plot a route on google maps

Question

I want to draw a route on google map with the change in my position using GPS. As my location changes(when new geopoints are created), the dot moves on the google map but i'm unable to draw the line on the map.

Please help in plotting the route on google maps. Below is my code

`

LocationManager locman;
LocationListener loclis;
Location location;
private MapView map;

List<GeoPoint> geoPointsArray = new ArrayList<GeoPoint>();
private MapController controller;
String provider = LocationManager.GPS_PROVIDER;
double lat;
double lon;


@Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      initMapView();
      initMyLocation();
      locman = (LocationManager)getSystemService(Context.LOCATION_SERVICE);
      //locman.requestLocationUpdates(provider,60000, 100,loclis);
      //Location = locman.getLastKnownLocation(provider);

   }
/** Find and initialize the map view. */
   private void initMapView() {
      map = (MapView) findViewById(R.id.mapView);
      controller = map.getController();
      map.setSatellite(false);
      map.setBuiltInZoomControls(true);
   }

   /** Find Current Position on Map. */
   private void initMyLocation() {
      final MyLocationOverlay overlay = new MyLocationOverlay(this, map);
      overlay.enableMyLocation();
      overlay.enableCompass(); // does not work in emulator
      overlay.runOnFirstFix(new Runnable() {
         public void run() {
            // Zoom in to current location
            controller.setZoom(16);
            controller.animateTo(overlay.getMyLocation());
         }
      });
      map.getOverlays().add(overlay);
   }

public void onLocationChanged(Location location) {
    if (location != null){
        lat = location.getLatitude();
        lon = location.getLongitude();
        GeoPoint New_geopoint = new GeoPoint((int)(lat*1e6),(int)(lon*1e6));
        controller.animateTo(New_geopoint);

    }

}
class MyOverlay extends Overlay{
    public MyOverlay(){
    }   
    public void draw(Canvas canvas, MapView mapv, boolean shadow){
    super.draw(canvas, mapv, shadow);
    Paint paint;
    paint = new Paint();
    paint.setColor(Color.GREEN);

    paint.setAntiAlias(true);
    paint.setStyle(Style.STROKE);
    paint.setStrokeWidth(3);

        Projection projection = map.getProjection();
        Path p = new Path();
        for (int i = 0; i < geoPointsArray.size(); i++) {
            if (i == geoPointsArray.size() - 1) {
                break;
            }
        Point from = new Point();
        Point to = new Point();
        projection.toPixels(geoPointsArray.get(i), from);
        projection.toPixels(geoPointsArray.get(i + 1), to);
        p.moveTo(from.x, from.y);

        canvas.drawLine(from.x, from.y, to.x, to.y, paint);

        //p.lineTo(to.x, to.y);
        }
    }   
 }      

`

Answer 1

I wrote this code quite some time ago so forgive me, it could be cleaned up a lot, but i believe it should do what you need.

public class RouteSegmentOverlay extends Overlay {
private Paint paint;
private ArrayList<GeoPoint> routePoints;
private boolean routeIsActive;  
private int numberRoutePoints;


private Path path;

// Constructor permitting the route array to be passed as an argument.
public RouteSegmentOverlay(ArrayList<GeoPoint> routePoints) {
    this.routePoints = routePoints;
    numberRoutePoints  = routePoints.size();
    routeIsActive = true;
}

// Method to turn route display on and off
public void setRouteView(boolean routeIsActive){
    this.routeIsActive = routeIsActive;
}

public void setColor(int c){
    color = c;
}

private int color = 0;

Paint.Style paintStyle = Paint.Style.STROKE;

public void setFillStyle(Paint.Style style){
    paintStyle = style;
}

@Override
public void draw(Canvas canvas, MapView mapview, boolean shadow) {
    super.draw(canvas, mapview, shadow);
    if(! routeIsActive) return;


    if(paint==null){
        paint = new Paint();

        paint.setAntiAlias(true);
        paint.setStrokeWidth(7);
        paint.setStyle(paintStyle);
        paint.setAntiAlias(true);
        paint.setARGB(255, 0, 0, 255);
        paint.setColor(color);
    }

    if(bitmap==null){

        wMin = Integer.MAX_VALUE;
        wMax = Integer.MIN_VALUE;
        hMin = Integer.MAX_VALUE;
        hMax = Integer.MIN_VALUE;

        lonMin = Integer.MAX_VALUE;
        lonMax = Integer.MIN_VALUE;
        latMin = Integer.MAX_VALUE;
        latMax = Integer.MIN_VALUE;

        Boolean newSegment = true;
        Point pt = new Point();

        GeoPoint point = null;

        ArrayList<Point> points = new ArrayList<Point>();

        for(int i=0; i<numberRoutePoints; i++){

            point = routePoints.get(i);

            int tempLat = point.getLatitudeE6();
            int tempLon = point.getLongitudeE6();

            if(tempLon<lonMin)lonMin = tempLon;
            if(tempLon>lonMax)lonMax = tempLon;
            if(tempLat<latMin)latMin = tempLat;
            if(tempLat>latMax)latMax = tempLat;

            mapview.getProjection().toPixels(routePoints.get(i), pt);

            points.add(new Point(pt.x,pt.y));

            if(pt.x<wMin)wMin = pt.x;
            if(pt.x>wMax)wMax = pt.x;
            if(pt.y<hMin)hMin = pt.y;
            if(pt.y>hMax)hMax = pt.y;

        }

        topLeftIn = new GeoPoint(latMax, lonMin);
        bottomRightIn = new GeoPoint(latMin, lonMax);
        int width = (wMax-wMin);
        int height = (hMax-hMin);           

        bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
        Canvas c = new Canvas(bitmap);

        Path bitmapPath = new Path();
        bitmapPath.incReserve(numberRoutePoints);

        newSegment = true;
        for(Point p : points){

            if (newSegment) {
                bitmapPath.moveTo(p.x - wMin, p.y - hMin);
                newSegment = false;
              } else {
                bitmapPath.lineTo(p.x - wMin, p.y - hMin);
              }

        }
        c.drawPath(bitmapPath, paint);

    }
    mapview.getProjection().toPixels(topLeftIn, topLeftOut);
    mapview.getProjection().toPixels(bottomRightIn, bottomRightOut);

    int l = topLeftOut.x;
    int t = topLeftOut.y;
    int r = bottomRightOut.x;
    int b = bottomRightOut.y; 

    Rect rect = new Rect(l,t,r,b);

    canvas.drawBitmap(bitmap, new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()),rect,null);

}
GeoPoint topLeftIn = null;
GeoPoint bottomRightIn = null;
Point topLeftOut = new Point();
Point bottomRightOut = new Point();

Bitmap bitmap = null;
int wMin = Integer.MAX_VALUE;
int wMax = 0;
int hMin = Integer.MAX_VALUE;
int hMax = 0;

int lonMin = Integer.MAX_VALUE;
int lonMax = 0;
int latMin = Integer.MAX_VALUE;
int latMax = 0;

}

Answer 2

Why don't you just draw a polyline? You just need LatLng instances.

var flightPlanCoordinates = [
    new google.maps.LatLng(43.290307,-2.884174),
    new google.maps.LatLng(41.3973,2.158964),
    new google.maps.LatLng(40.462046,-3.809694),
    new google.maps.LatLng(38.976895,-1.858366)
];

var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});
flightPath.setMap( map );