Add milestones (markers) every x Km on direction

Question

I want to add a marker every 5 or 10 Kilometer on the polylines of the direction given by google maps api. something like this :

http://www.geocodezip.com/v3_polyline_example_kmmarkers_0.html

but with the google direction's

And I want to rule the world !! Do you think this is rent-a-coder ? Show us what you tried atleast ! — woofmeow, Aug 08 '13 at 03:00
My other example of ["mile markers" on a directions polyline](http://www.geocodezip.com/v3_GoogleEx_directions-waypoints_kmmarkersC.html) — geocodezip, Aug 08 '13 at 06:01
[example of route from directions service with marker every mile](http://www.geocodezip.com/v3_kmMarkersFromDirections.html) — geocodezip, Dec 02 '17 at 20:17
possible duplicate of [Add Markers Along a Route](https://stackoverflow.com/questions/9594598/add-markers-along-a-route) — geocodezip, Dec 02 '17 at 20:18
possible duplicate of [X marks along the direction](https://stackoverflow.com/questions/7535116/x-marks-along-the-direction) — geocodezip, Dec 02 '17 at 20:18

score 0 · Answer 1 · answered Aug 08 '13 at 03:16

Given a start point, initial bearing, and distance, this will calculate the destination point and final bearing travelling along a (shortest distance) great circle arc.

var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) + 
              Math.cos(lat1)*Math.sin(d/R)*Math.cos(brng) );
var lon2 = lon1 + Math.atan2(Math.sin(brng)*Math.sin(d/R)*Math.cos(lat1), 
                     Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));

source: http://www.movable-type.co.uk/scripts/latlong.html

The radius of the earth (R) is 6371000 meters. brng is the direction you are travelling in degrees (0 = north).

Then use this function to add markers to the map

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = {
    url: 'images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };
  var shadow = {
    url: 'images/beachflag_shadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    size: new google.maps.Size(37, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon.
  // The type defines an HTML <area> element 'poly' which
  // traces out a polygon as a series of X,Y points. The final
  // coordinate closes the poly by connecting to the first
  // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

source: https://developers.google.com/maps/documentation/javascript/overlays

Edit that function to have the proper marker icons and call it for each marker you want to place.

score 0 · Answer 2 · answered Mar 05 '18 at 17:45

I found a formula that works like a charm. It adds a marker every 8 meter between to given points.

I got the formula from here: How to calculate the points between two given points and given distance?

PointF pointA, pointB;

    var diff_X = pointB.X - pointA.X;
    var diff_Y = pointB.Y - pointA.Y;
    int pointNum = 8;

    var interval_X = diff_X / (pointNum + 1);
    var interval_Y = diff_Y / (pointNum + 1);

    List<PointF> pointList = new List<PointF>();
    for (int i = 1; i <= pointNum; i++)
    {
        pointList.Add(new PointF(pointA.X + interval_X * i, pointA.Y + interval_Y*i));
    }

Android My end result translation

    //GeoPoint PointF, pointA, pointB;

    Double diff_X = lat2 - lat1;
    Double diff_Y = lon2 - lon1;
    int pointNum = 8;

    Double interval_X = diff_X / (pointNum + 1);
    Double interval_Y = diff_Y / (pointNum + 1);

    //ArrayList<GeoPoint> geoPoints = new ArrayList<>();
    List<GeoPoint> pointList = new ArrayList<>();
    for (int i = 1; i <= pointNum; i++)
    {
        GeoPoint g = new GeoPoint(lat1 + interval_X * i, lon1 + interval_Y*i);
        pointList.add(g);
        itemizedLayer.addItem(createMarkerItem(g, R.drawable.ic_my_location));
    }


    map.map().updateMap(true);

Add milestones (markers) every x Km on direction

2 Answers2