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

User · Answer

Simply get route form this url and do next ...

Origin ---> starting point latitude & longitude

Destination---> ending point latitude & longitude

here i have put origin as Delhi latitude and longitude & destination as chandigarh latitude longitude

https://maps.googleapis.com/maps/api/directions/json?origin=28.704060,77.102493&destination=30.733315,76.779419&sensor=false&key="PUT YOUR MAP API KEY"

User · Answer

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   amp daddr  YOUR END LONGITUDE     YOUR END LATITUDE             intent setClassName             com google android apps maps              com google android maps MapsActivity       startActivity intent

User · Answer

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

User · Answer

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  amp  amp  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    amp  amp   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

User · Answer

public class MainActivity extends FragmentActivity        List lt Overlay gt  mapOverlays    GeoPoint point1  point2    LocationManager locManager    Drawable drawable    Document document    GMapV2GetRouteDirection v2GetRouteDirection    LatLng fromPosition    LatLng toPosition    GoogleMap mGoogleMap    MarkerOptions markerOptions    Location location      Override   protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main           v2GetRouteDirection   new GMapV2GetRouteDirection          SupportMapFragment supportMapFragment    SupportMapFragment  getSupportFragmentManager            findFragmentById R id map           mGoogleMap   supportMapFragment getMap                Enabling MyLocation in Google Map         mGoogleMap setMyLocationEnabled true           mGoogleMap getUiSettings   setZoomControlsEnabled true           mGoogleMap getUiSettings   setCompassEnabled true           mGoogleMap getUiSettings   setMyLocationButtonEnabled true           mGoogleMap getUiSettings   setAllGesturesEnabled true           mGoogleMap setTrafficEnabled true           mGoogleMap animateCamera CameraUpdateFactory zoomTo 12            markerOptions   new MarkerOptions            fromPosition   new LatLng 11 663837  78 147297           toPosition   new LatLng 11 723512  78 466287           GetRouteTask getRoute   new GetRouteTask            getRoute execute                         author VIJAYAKUMAR M      This class Get Route on the map              private class GetRouteTask extends AsyncTask lt String  Void  String gt             private ProgressDialog Dialog          String response                Override         protected void onPreExecute                   Dialog   new ProgressDialog MainActivity this                 Dialog setMessage  Loading route                     Dialog show                        Override         protected String doInBackground String    urls                    Get All Route values                          document   v2GetRouteDirection getDocument fromPosition  toPosition           GMapV2GetRouteDirection MODE DRIVING                       response    Success                 return response                       Override         protected void onPostExecute String result                  mGoogleMap clear                  if response equalsIgnoreCase  Success                   ArrayList lt LatLng gt  directionPoint   v2GetRouteDirection getDirection document                 PolylineOptions rectLine   new PolylineOptions   width 10  color                            Color RED                  for  int i   0  i  lt  directionPoint size    i                          rectLine add directionPoint get i                                     Adding route on the map               mGoogleMap addPolyline rectLine                 markerOptions position toPosition                 markerOptions draggable true                 mGoogleMap addMarker markerOptions                                   Dialog dismiss                     Override   protected void onStop             super onStop            finish               Route Helper class   public class GMapV2GetRouteDirection     public final static String MODE DRIVING    driving     public final static String MODE WALKING    walking      public GMapV2GetRouteDirection          public Document getDocument LatLng start  LatLng end  String mode        String url    http   maps googleapis com maps api directions xml                  origin     start latitude         start longitude                  amp destination     end latitude         end longitude                 amp sensor false amp units metric amp mode driving        try           HttpClient httpClient   new DefaultHttpClient            HttpContext localContext   new BasicHttpContext            HttpPost httpPost   new HttpPost url           HttpResponse response   httpClient execute httpPost  localContext           InputStream in   response getEntity   getContent            DocumentBuilder builder   DocumentBuilderFactory newInstance   newDocumentBuilder            Document doc   builder parse in           return doc        catch  Exception e            e printStackTrace              return null         public String getDurationText  Document doc        NodeList nl1   doc getElementsByTagName  duration        Node node1   nl1 item 0       NodeList nl2   node1 getChildNodes        Node node2   nl2 item getNodeIndex nl2   text         Log i  DurationText   node2 getTextContent         return node2 getTextContent         public int getDurationValue  Document doc        NodeList nl1   doc getElementsByTagName  duration        Node node1   nl1 item 0       NodeList nl2   node1 getChildNodes        Node node2   nl2 item getNodeIndex nl2   value         Log i  DurationValue   node2 getTextContent         return Integer parseInt node2 getTextContent            public String getDistanceText  Document doc        NodeList nl1   doc getElementsByTagName  distance        Node node1   nl1 item 0       NodeList nl2   node1 getChildNodes        Node node2   nl2 item getNodeIndex nl2   text         Log i  DistanceText   node2 getTextContent         return node2 getTextContent           public int getDistanceValue  Document doc        NodeList nl1   doc getElementsByTagName  distance        Node node1   nl1 item 0       NodeList nl2   node1 getChildNodes        Node node2   nl2 item getNodeIndex nl2   value         Log i  DistanceValue   node2 getTextContent         return Integer parseInt node2 getTextContent            public String getStartAddress  Document doc        NodeList nl1   doc getElementsByTagName  start address        Node node1   nl1 item 0       Log i  StartAddress   node1 getTextContent         return node1 getTextContent           public String getEndAddress  Document doc        NodeList nl1   doc getElementsByTagName  end address        Node node1   nl1 item 0       Log i  StartAddress   node1 getTextContent         return node1 getTextContent           public String getCopyRights  Document doc        NodeList nl1   doc getElementsByTagName  copyrights        Node node1   nl1 item 0       Log i  CopyRights   node1 getTextContent         return node1 getTextContent            public ArrayList lt LatLng gt  getDirection  Document doc        NodeList nl1  nl2  nl3      ArrayList lt LatLng gt  listGeopoints   new ArrayList lt LatLng gt         nl1   doc getElementsByTagName  step        if  nl1 getLength    gt  0            for  int i   0  i  lt  nl1 getLength    i                  Node node1   nl1 item i               nl2   node1 getChildNodes                 Node locationNode   nl2 item getNodeIndex nl2   start location                 nl3   locationNode getChildNodes                Node latNode   nl3 item getNodeIndex nl3   lat                 double lat   Double parseDouble latNode getTextContent                 Node lngNode   nl3 item getNodeIndex nl3   lng                 double lng   Double parseDouble lngNode getTextContent                 listGeopoints add new LatLng lat  lng                 locationNode   nl2 item getNodeIndex nl2   polyline                 nl3   locationNode getChildNodes                latNode   nl3 item getNodeIndex nl3   points                 ArrayList lt LatLng gt  arr   decodePoly latNode getTextContent                 for int j   0   j  lt  arr size     j                      listGeopoints add new LatLng arr get j  latitude  arr get j  longitude                               locationNode   nl2 item getNodeIndex nl2   end location                 nl3   locationNode getChildNodes                latNode   nl3 item getNodeIndex nl3   lat                 lat   Double parseDouble latNode getTextContent                 lngNode   nl3 item getNodeIndex nl3   lng                 lng   Double parseDouble lngNode getTextContent                 listGeopoints add new LatLng lat  lng                         return listGeopoints       private int getNodeIndex NodeList nl  String nodename        for int i   0   i  lt  nl getLength     i              if nl item i  getNodeName   equals nodename               return i            return -1       private ArrayList lt LatLng gt  decodePoly String encoded        ArrayList lt LatLng gt  poly   new ArrayList lt LatLng gt         int index   0  len   encoded length        int lat   0  lng   0      while  index  lt  len            int b  shift   0  result   0          do               b   encoded charAt index    - 63              result     b  amp  0x1f   lt  lt  shift              shift    5            while  b  gt   0x20           int dlat     result  amp  1     0     result  gt  gt  1     result  gt  gt  1            lat    dlat          shift   0          result   0          do               b   encoded charAt index    - 63              result     b  amp  0x1f   lt  lt  shift              shift    5            while  b  gt   0x20           int dlng     result  amp  1     0     result  gt  gt  1     result  gt  gt  1            lng    dlng           LatLng position   new LatLng  double  lat   1E5   double  lng   1E5           poly add position             return poly

User · Answer

Thank you for your help  At last I could draw a line on the map  This is how I done it       Called when the activity is first created     private List lt Overlay gt  mapOverlays   private Projection projection      Override public void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout main        linearLayout    LinearLayout  findViewById R id zoomview       mapView    MapView  findViewById R id mapview       mapView setBuiltInZoomControls true        mapOverlays   mapView getOverlays                projection   mapView getProjection        mapOverlays add new MyOverlay                  Override protected boolean isRouteDisplayed         return false     class MyOverlay extends Overlay       public MyOverlay                   public void draw Canvas canvas  MapView mapv  boolean shadow           super draw canvas  mapv  shadow            Paint   mPaint   new Paint            mPaint setDither true           mPaint setColor Color RED           mPaint setStyle Paint Style FILL AND STROKE           mPaint setStrokeJoin Paint Join ROUND           mPaint setStrokeCap Paint Cap ROUND           mPaint setStrokeWidth 2            GeoPoint gP1   new GeoPoint 19240000 -99120000           GeoPoint gP2   new GeoPoint 37423157  -122085008            Point p1   new Point            Point p2   new Point            Path path   new Path             Projection projection mapv getProjection            projection toPixels gP1  p1           projection toPixels gP2  p2            path moveTo p2 x  p2 y           path lineTo p1 x p1 y            canvas drawPath path  mPaint

User · Answer

You can get the projection from the MapView object which is passed into the draw   method  mapv getProjection   toPixels gP1  p1

User · Answer

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  lt  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 amp hl en amp saddr        srcPlace     amp daddr     destPlace        amp ie UTF8 amp 0 amp om 0 amp 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  lt  nl getLength    s         Node rootNode   nl item s      NodeList configItems   rootNode getChildNodes       for  int x   0  x  lt  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

User · Answer

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

User · Answer

Try this one  Add itemizedOverlay class   public class AndroidGoogleMapsActivity extends MapActivity        Override     public void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main               Displaying Zooming controls         MapView mapView    MapView  findViewById R id mapview           mapView setBuiltInZoomControls true             MapController mc   mapView getController            double lat   Double parseDouble  48 85827758964043            double lon   Double parseDouble  2 294543981552124            GeoPoint geoPoint   new GeoPoint  int  lat   1E6    int  lon   1E6            mc animateTo geoPoint           mc setZoom 15           mapView invalidate                              Placing Marker                       List lt Overlay gt  mapOverlays   mapView getOverlays            Drawable drawable   this getResources   getDrawable R drawable mark red           AddItemizedOverlay itemizedOverlay                 new AddItemizedOverlay drawable  this             OverlayItem overlayitem   new OverlayItem geoPoint   Hello    Sample Overlay item             itemizedOverlay addOverlay overlayitem           mapOverlays add itemizedOverlay                Override     protected boolean isRouteDisplayed             return false

User · Answer

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  lt  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 amp hl en amp     saddr   sourceLat     sourceLong   amp daddr   destinationLat     destinationLong     amp ie UTF8 amp 0 amp om 0 amp 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  lt  nl getLength    s             Node rootNode   nl item s          NodeList configItems   rootNode getChildNodes           for  int x   0  x  lt  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

User · Answer

For those who really only want to draw a simple line - there is indeed also the short short version   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      from https   developers google com maps documentation android reference com google android gms maps model Polyline

User · Answer

This worked for me  With the method mentioned here I was able to draw polylines on Google Maps V2  I drew a new line whenever the user location got changed  so the the polyline looks like the path followed by user on map   Source code at   Github  prasang7 eTaxi-Meter  Please ignore other modules of this project related to distance calculation and User Interface if you are not interested in them

[android] Drawing a line/path on Google Maps

Examples related to android

Examples related to google-maps

Examples related to overlay

Examples related to android-mapview

Examples related to draw