Drawing a line/path on Google Maps

Question

I've been busy for a long time finding out how to draw a line between two (GPS) points on the map in HelloMapView but with no luck.

Could anyone please tell me how to do so.

Suppose I use the HelloMapView which extends MapView. Do I need to use overlays? If so do I have to override the onDraw() method of the overlay and draw a line here? I actually tried these things but with no result.

Thank you in advance!

Answer 1

just i will find draw with some rectangle in mapview just we want change paint as we like

EmptyOverlay.java

public class EmptyOverlay extends Overlay {
private float x1,y1;
private MapExampleActivity mv = null;
private Overlay overlay = null;

public EmptyOverlay(MapExampleActivity mapV){
    mv = mapV;
}

@Override
public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
        long when) {
    // TODO Auto-generated method stub
    return super.draw(canvas, mapView, shadow, when);
}

@Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
    if(mv.isEditMode()){
        if(e.getAction() == MotionEvent.ACTION_DOWN){
            //when user presses the map add a new overlay to the map
            //move events will be catched by newly created overlay
            x1 = y1 = 0;
            x1 = e.getX();
            y1 = e.getY();

            overlay = new MapOverlay(mv, x1, y1);
            mapView.getOverlays().add(overlay);

        }
        if(e.getAction() == MotionEvent.ACTION_MOVE){
        }
        //---when user lifts his finger---
        if (e.getAction() == MotionEvent.ACTION_UP) {                

        }    
        return true;
    }
    return false;
}
}

MapExampleActivity.java

 public class MapExampleActivity extends MapActivity {
private MapView mapView;
private boolean isEditMode = false;
private Button toogle;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    toogle = (Button)findViewById(R.id.toogleMap);        
    toogle.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            toogleEditMode();

        }
    });

    mapView = (MapView)findViewById(R.id.mapview);
    mapView.setBuiltInZoomControls(true); //display zoom controls
    //add one empty overlay acting as a overlay loader. This will catch press events and will add the actual overlays
    mapView.getOverlays().add(new EmptyOverlay(this));
    mapView.postInvalidate();
}
//toogle edit mode for drawing or navigating the map
private void toogleEditMode(){
    isEditMode = !isEditMode;
}

@Override
protected boolean isRouteDisplayed() {
    // TODO Auto-generated method stub
    return false;
}
@Override
protected boolean isLocationDisplayed() {
    return false;
}

public boolean isEditMode(){
    return this.isEditMode;
}

public MapView getMapView(){
    return this.mapView;
}
}

MapOverlay.java

 public class MapOverlay extends Overlay {

private float x1,y1,x2,y2;
private GeoPoint p1=null,p2=null;
private MapExampleActivity mv = null;
private Paint paint = new Paint();
private boolean isUp = false;

//constructor receiving the initial point
public MapOverlay(MapExampleActivity mapV,float x,float y){
    paint.setStrokeWidth(2.0f);
    x1 = x;
    y1 = y;
    mv = mapV;
    p1 = mapV.getMapView().getProjection().fromPixels((int)x1,(int)y1);
}
//override draw method to add our custom drawings
@Override
public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
        long when) {

    if(p1 != null && p2 != null){
        //get the 2 geopoints defining the area and transform them to pixels
        //this way if we move or zoom the map rectangle will follow accordingly
        Point screenPts1 = new Point();
        mapView.getProjection().toPixels(p1, screenPts1);
        Point screenPts2 = new Point();
        mapView.getProjection().toPixels(p2, screenPts2);

        //draw inner rectangle
        paint.setColor(0x4435EF56);
        paint.setStyle(Style.FILL);
        canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
        //draw outline rectangle
        paint.setColor(0x88158923);
        paint.setStyle(Style.STROKE);
        canvas.drawRect(screenPts1.x, screenPts1.y, screenPts2.x, screenPts2.y, paint);
    }
    return true;
}

@Override
public boolean onTouchEvent(MotionEvent e, MapView mapView) {
    if(mv.isEditMode() && !isUp){
        if(e.getAction() == MotionEvent.ACTION_DOWN){
            x1 = y1 = 0;
            x1 = e.getX();
            y1 = e.getY();
            p1 = mapView.getProjection().fromPixels((int)x1,(int)y1);

        }
        //here we constantly change geopoint p2 as we move out finger
        if(e.getAction() == MotionEvent.ACTION_MOVE){
            x2 = e.getX();
            y2 = e.getY();
            p2 = mapView.getProjection().fromPixels((int)x2,(int)y2);

        }
        //---when user lifts his finger---
        if (e.getAction() == MotionEvent.ACTION_UP) {                
            isUp = true;
        }    
        return true;
    }
    return false;
}
 }

see this http://n3vrax.wordpress.com/2011/08/13/drawing-overlays-on-android-map-view/

Answer 2

It is really easy with Google Maps Android API v2

Just copy the example from Developer documentation

(of course you have to init your map first)

GoogleMap map;
 // ... get a map.
 // Add a thin red line from London to New York.
 Polyline line = map.addPolyline(new PolylineOptions()
     .add(new LatLng(51.5, -0.1), new LatLng(40.7, -74.0))
     .width(5)
     .color(Color.RED));

Answer 3

Yes you need to use overlays.

You need to get the MapView's overlays and add your new overlay onto it.

Your class extends Overlay, which is a transparent canvas in which you can draw on it like any other canvas.

You can use mapView.getProjection() to get projection of map view.

...

More info found here: http://blogoscoped.com/archive/2008-12-15-n14.html

Answer 4

This is full source code to draw direction path from source latitude and longitude to destination latitude and longitude. I have changed the above code to fit for latitude and longitude rather than source and destination. So anyone who is accessing his latitude and longitude through his gps can get the direction from his gps device to the destination coordinates.

Thanks to above answers we could make such a change and get path direction.

public class DrawMapActivity extends MapActivity {
     MapView myMapView = null;
     MapController myMC = null;
     GeoPoint geoPoint = null;
     @Override
     public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      setContentView(R.layout.main);
      myMapView = (MapView) findViewById(R.id.mapview);

      geoPoint = null;
      myMapView.setSatellite(false);
      double fromLat = 12.303534;
      double fromLong = 76.64611;
      double toLat = 12.9715987;
      double toLong = 77.5945627;

      String sourceLat = Double.toString(fromLat);
      String sourceLong = Double.toString(fromLong);
      String destinationLat = Double.toString(toLat);
      String destinationLong = Double.toString(toLong);

      String pairs[] = getDirectionData(sourceLat,sourceLong, destinationLat, destinationLong );
      String[] lngLat = pairs[0].split(",");

      // STARTING POINT
      GeoPoint startGP = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6), (int) (Double.parseDouble(lngLat[0]) * 1E6));

      myMC = myMapView.getController();
      geoPoint = startGP;
      myMC.setCenter(geoPoint);
      myMC.setZoom(10);
      myMapView.getOverlays().add(new DirectionPathOverlay(startGP, startGP));

      // NAVIGATE THE PATH

      GeoPoint gp1;
      GeoPoint gp2 = startGP;

      for (int i = 1; i < pairs.length; i++) {
       lngLat = pairs[i].split(",");
       gp1 = gp2;
       // watch out! For GeoPoint, first:latitude, second:longitude

       gp2 = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6),(int) (Double.parseDouble(lngLat[0]) * 1E6));
       myMapView.getOverlays().add(new DirectionPathOverlay(gp1, gp2));
       Log.d("xxx", "pair:" + pairs[i]);
      }

      // END POINT
      myMapView.getOverlays().add(new DirectionPathOverlay(gp2, gp2));

      myMapView.getController().animateTo(startGP);
      myMapView.setBuiltInZoomControls(true);
      myMapView.displayZoomControls(true);

     }

     @Override
     protected boolean isRouteDisplayed() {
      // TODO Auto-generated method stub
      return false;
     }

     private String[] getDirectionData(String sourceLat, String sourceLong, String destinationLat, String destinationLong) {


      String urlString = "http://maps.google.com/maps?f=d&hl=en&" +"saddr="+sourceLat+","+sourceLong+"&daddr="+destinationLat+","+destinationLong + "&ie=UTF8&0&om=0&output=kml";
      Log.d("URL", urlString);
      Document doc = null;
      HttpURLConnection urlConnection = null;
      URL url = null;
      String pathConent = "";

      try {

       url = new URL(urlString.toString());
       urlConnection = (HttpURLConnection) url.openConnection();
       urlConnection.setRequestMethod("GET");
       urlConnection.setDoOutput(true);
       urlConnection.setDoInput(true);
       urlConnection.connect();
       DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
       DocumentBuilder db = dbf.newDocumentBuilder();
       doc = db.parse(urlConnection.getInputStream());

      } catch (Exception e) {
      }

      NodeList nl = doc.getElementsByTagName("LineString");
      for (int s = 0; s < nl.getLength(); s++) {
       Node rootNode = nl.item(s);
       NodeList configItems = rootNode.getChildNodes();
       for (int x = 0; x < configItems.getLength(); x++) {
        Node lineStringNode = configItems.item(x);
        NodeList path = lineStringNode.getChildNodes();
        pathConent = path.item(0).getNodeValue();
       }
      }
      String[] tempContent = pathConent.split(" ");
      return tempContent;
     }

    }


    //*****************************************************************************



     class DirectionPathOverlay extends Overlay {

        private GeoPoint gp1;
        private GeoPoint gp2;

        public DirectionPathOverlay(GeoPoint gp1, GeoPoint gp2) {
            this.gp1 = gp1;
            this.gp2 = gp2;
        }

        @Override
        public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
                long when) {
            // TODO Auto-generated method stub
            Projection projection = mapView.getProjection();
            if (shadow == false) {

                Paint paint = new Paint();
                paint.setAntiAlias(true);
                Point point = new Point();
                projection.toPixels(gp1, point);
                paint.setColor(Color.BLUE);
                Point point2 = new Point();
                projection.toPixels(gp2, point2);
                paint.setStrokeWidth(2);
                canvas.drawLine((float) point.x, (float) point.y, (float) point2.x,(float) point2.y, paint);
            }
            return super.draw(canvas, mapView, shadow, when);
        }

        @Override
        public void draw(Canvas canvas, MapView mapView, boolean shadow) {
            // TODO Auto-generated method stub

            super.draw(canvas, mapView, shadow);
        }

    }

Hope it helps for other Stack Overflow users

Answer 5

This can be done by using intents too:

  final Intent intent = new Intent(Intent.ACTION_VIEW,
    Uri.parse(
            "http://maps.google.com/maps?" +
            "saddr="+YOUR_START_LONGITUDE+","+YOUR_START_LATITUDE+"&daddr="YOUR_END_LONGITUDE+","+YOUR_END_LATITUDE));
         intent.setClassName(
          "com.google.android.apps.maps",
          "com.google.android.maps.MapsActivity");
   startActivity(intent);

Answer 6

// This Activity will draw a line between two selected points on Map

public class MainActivity extends MapActivity {
 MapView myMapView = null;
 MapController myMC = null;
 GeoPoint geoPoint = null;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {


  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  myMapView = (MapView) findViewById(R.id.mapview);
  geoPoint = null;
  myMapView.setSatellite(false);

  String pairs[] = getDirectionData("ahmedabad", "vadodara");
  String[] lngLat = pairs[0].split(",");

  // STARTING POINT
  GeoPoint startGP = new GeoPoint(
    (int) (Double.parseDouble(lngLat[1]) * 1E6), (int) (Double
      .parseDouble(lngLat[0]) * 1E6));

  myMC = myMapView.getController();
  geoPoint = startGP;
  myMC.setCenter(geoPoint);
  myMC.setZoom(15);
  myMapView.getOverlays().add(new DirectionPathOverlay(startGP, startGP));

  // NAVIGATE THE PATH

  GeoPoint gp1;
  GeoPoint gp2 = startGP;

  for (int i = 1; i < pairs.length; i++) {
   lngLat = pairs[i].split(",");
   gp1 = gp2;
   // watch out! For GeoPoint, first:latitude, second:longitude

   gp2 = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6),
     (int) (Double.parseDouble(lngLat[0]) * 1E6));
   myMapView.getOverlays().add(new DirectionPathOverlay(gp1, gp2));
   Log.d("xxx", "pair:" + pairs[i]);
  }

  // END POINT
  myMapView.getOverlays().add(new DirectionPathOverlay(gp2, gp2));

  myMapView.getController().animateTo(startGP);
  myMapView.setBuiltInZoomControls(true);
  myMapView.displayZoomControls(true);

 }

 @Override
 protected boolean isRouteDisplayed() {
  // TODO Auto-generated method stub
  return false;
 }

 private String[] getDirectionData(String srcPlace, String destPlace) {

  String urlString = "http://maps.google.com/maps?f=d&hl=en&saddr="
   + srcPlace + "&daddr=" + destPlace
   + "&ie=UTF8&0&om=0&output=kml";

  Log.d("URL", urlString);
  Document doc = null;
  HttpURLConnection urlConnection = null;
  URL url = null;
  String pathConent = "";

  try {

   url = new URL(urlString.toString());
   urlConnection = (HttpURLConnection) url.openConnection();
   urlConnection.setRequestMethod("GET");
   urlConnection.setDoOutput(true);
   urlConnection.setDoInput(true);
   urlConnection.connect();
   DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
   DocumentBuilder db = dbf.newDocumentBuilder();
   doc = db.parse(urlConnection.getInputStream());

  } catch (Exception e) {
  }

  NodeList nl = doc.getElementsByTagName("LineString");
  for (int s = 0; s < nl.getLength(); s++) {
   Node rootNode = nl.item(s);
   NodeList configItems = rootNode.getChildNodes();
   for (int x = 0; x < configItems.getLength(); x++) {
    Node lineStringNode = configItems.item(x);
    NodeList path = lineStringNode.getChildNodes();
    pathConent = path.item(0).getNodeValue();
   }
  }
  String[] tempContent = pathConent.split(" ");
  return tempContent;
 }

}


//*****************************************************************************

DirectionPathOverlay

public class DirectionPathOverlay extends Overlay {

    private GeoPoint gp1;
    private GeoPoint gp2;

    public DirectionPathOverlay(GeoPoint gp1, GeoPoint gp2) {
        this.gp1 = gp1;
        this.gp2 = gp2;
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapView, boolean shadow,
            long when) {
        // TODO Auto-generated method stub
        Projection projection = mapView.getProjection();
        if (shadow == false) {

            Paint paint = new Paint();
            paint.setAntiAlias(true);
            Point point = new Point();
            projection.toPixels(gp1, point);
            paint.setColor(Color.BLUE);
            Point point2 = new Point();
            projection.toPixels(gp2, point2);
            paint.setStrokeWidth(2);
            canvas.drawLine((float) point.x, (float) point.y, (float) point2.x,
                    (float) point2.y, paint);
        }
        return super.draw(canvas, mapView, shadow, when);
    }

    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow) {
        // TODO Auto-generated method stub

        super.draw(canvas, mapView, shadow);
    }

}