place marker on polyline with specific distance

Question

I have made a google map using google map api v3 and placed a polyline on map here is my code for my map

function initialize() {
            var myLatLng = n         


        

Answer 1

This works for me (added to the end of your initialize function):

var i=1;
var length = google.maps.geometry.spherical.computeLength(flightPath.getPath());
var remainingDist = length;

while (remainingDist > 0)
{
   createMarker(map, flightPath.GetPointAtDistance(1000*i),i+" km");
   remainingDist -= 1000;
   i++;
}
// put markers at the ends
createMarker(map,flightPath.getPath().getAt(0),length/1000+" km");
createMarker(map,flightPath.getPath().getAt(flightPath.getPath().getLength()-1),(length/1000).toFixed(2)+" km");
flightPath.setMap(map);
}

function createMarker(map, latlng, title){
    var marker = new google.maps.Marker({
          position:latlng,
          map:map,
          title: title
          });
}

example

Answer 2

I could not deploy the logic in my case, since the creation of my markers are separated, as I define the first and útilmo, and other markings, this function is called in the end initialize():

function calcRoute() {
var myTrip=[];
var bounds = new google.maps.LatLngBounds();
    <c:forEach var="listaCoord" varStatus="posicao" items="${listaCoord}">

        var dt = '${listaCoord.dtSistema}';                 
        var cod = '${listaCoord.codDaf}';
        var lat = '${listaCoord.idLatitude}';
        var lng = '${listaCoord.idLongitude}';
        var bt = '${listaCoord.bateria}';

        var pt = new google.maps.LatLng(lat, lng);

        myTrip.push(pt);
        bounds.extend(pt);

        <c:choose>
            <c:when test="${posicao.first}">
                dt = dt + ' - <b>ATUAL</b>';
                atual = pt;
                createMarkerAtual(pt,cod,dt,bt,map);
            </c:when>

            <c:when test="${posicao.last}">
                dt = dt + ' - <b>PARTIDA</b>';
                inicio = pt;
                createMarkerPartida(pt,cod,dt,bt,map);
            </c:when>

            <c:otherwise>
                createMarker(pt,cod,dt,bt,map);
            </c:otherwise>
        </c:choose>

    </c:forEach>

    var flightPath = new google.maps.Polyline({
           path:myTrip,
           strokeColor:"#0000FF",
           strokeOpacity:0.5,
           strokeWeight:4
         });

    flightPath.setMap(map);
    map.fitBounds(bounds);
}

this function is create markers (no the start, no the end point):

function createMarker(point,info,dt,bt,map) {
var iconURL = 'img/pata.png';               
var iconSize = new google.maps.Size(32,34);
var iconOrigin = new google.maps.Point(0,0);    
var iconAnchor = new google.maps.Point(15,30);

var myIcon = new google.maps.MarkerImage(iconURL, iconSize, iconOrigin, iconAnchor);

var marker = new google.maps.Marker({
  position : point,
  html : info,
  map : map,
  icon: myIcon
});   

google.maps.event.addListener(marker, 'click', function() {
    endereco(info,this.position,dt,bt);
    infowindow.open(map,this);
});

}