javascript - Google Maps: Select previous Marker on Polyline

Question

I'm doing an application with google maps API that have a JSON with the marker's coordinates. Then I draw polylines between the markers. I also implemented a function with a onclick event that creates a new marker inside the polyline. This marker has to show information of the previous marker in the polyline (the one taked of the JSON, not a clicked one). But I don't know how to take the previous vertex(marker) of a selected polyline.

Code:

(function() {

window.onload = function() {

var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.HYBRID,
noClear: true,
panControl: true,
scaleControl: false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControl: true,
zoomControl: false,
}; 
var map = new google.maps.Map(document.getElementById('map'), options);

// JSON
$.getJSON("loc.js", function(json) {
    console.log(json);
});

//Marker type
var markers = [];
var arr = []; 
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png" + pinColor,
    new google.maps.Size(21, 34),
    new google.maps.Point(0,0),
    new google.maps.Point(10, 34));

// JSON loop
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
    latLng = new google.maps.LatLng(data.lat, data.lng);
    arr.push(latLng);

    // Create markers
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: pinImage,
    });
    infoBox(map, marker, data);   

    //Polylines
    var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map:map
    });
      infoPoly(map, flightPath, data);

    //Calculate polylines distance
    google.maps.LatLng.prototype.kmTo = function(a){ 
        var e = Math, ra = e.PI/180; 
        var b = this.lat() * ra, c = a.lat() * ra, d = b - c; 
        var g = this.lng() * ra - a.lng() * ra; 
        var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d/2), 2) + e.cos(b) * e.cos 
        (c) * e.pow(e.sin(g/2), 2))); 
        return f * 6378.137; 
    }
    google.maps.Polyline.prototype.inKm = function(n){ 
        var a = this.getPath(n), len = a.getLength(), dist = 0; 
        for (var i=0; i < len-1; i++) { 
           dist += a.getAt(i).kmTo(a.getAt(i+1)); 
        }
        return dist; 
    }
}

function infoBox(map, marker, data) {
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, "click", function(e) {
        salta(data.tm);
    });

    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        salta(data.tm);
      });
    })(marker, data);
}
//Create onclick marker on the polyline
function  infoPoly(map, flightPath, data){
google.maps.event.addListener(flightPath, 'click', function(event) {
      mk = new google.maps.Marker({
        map: map,
        position: event.latLng,

      });
      markers.push(mk);
      map.setZoom(17);
      map.setCenter(mk.getPosition());
    });
    }

    function drawPath() {
       var coords = [];
       for (var i = 0; i < markers.length; i++) {
        coords.push(markers[i].getPosition());
       }
       flightPath.setPath(coords);
    }  

//  Fit these bounds to the map
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < arr.length; i++) {
    bounds.extend(arr[i]);
}

map.fitBounds(bounds);
//dist polylines
distpoly = flightPath.inKm();
distpolyround = Math.round(distpoly);
};
})();

If I click in the blue arrow, I create a marker on that point of the polyline. I that marker it takes the values of the previous one.

Answer 1

You can use the geometry library .poly namespace isLocationOnEdge method to determine which segment of the polyline the clicked point (new marker) is on.

//Create onclick marker on the polyline
function infoPoly(map, flightPath, data) {
  google.maps.event.addListener(flightPath, 'click', function(event) {
    mk = new google.maps.Marker({
      map: map,
      position: event.latLng,

    });
    markers.push(mk);
    map.setZoom(17);
    map.setCenter(mk.getPosition());

    // find line segment.  Iterate through the polyline checking each line segment.
    // isLocationOnEdge takes a google.maps.Polyline as the second argument, so make one,
    // then use it for the test.  The default value of 10e-9 for the tolerance didn't work,
    // a tolerance of 10e-6 seems to work.
    var betweenStr = "result no found";
    var betweenStr = "result no found";
    for (var i=0; i<flightPath.getPath().getLength()-1; i++) {
       var tempPoly = new google.maps.Polyline({
         path: [flightPath.getPath().getAt(i), flightPath.getPath().getAt(i+1)]
       })
       if (google.maps.geometry.poly.isLocationOnEdge(mk.getPosition(), tempPoly, 10e-6)) {
          betweenStr = "between "+i+ " and "+(i+1);
       }
    }

    (function(mk, betweenStr) {
      google.maps.event.addListener(mk, "click", function(e) {
        infowindow.setContent(betweenStr+"<br>loc:" + this.getPosition().toUrlValue(6));
        infowindow.open(map, mk);
        // salta(data.tm);
      });
    })(mk, betweenStr);

    google.maps.event.trigger(mk,'click');
  });

proof of concept fiddle

code snippet:

var infowindow = new google.maps.InfoWindow();
(function() {

  window.onload = function() {

    var options = {
      zoom: 3,
      center: new google.maps.LatLng(37.09, -95.71),
      mapTypeId: google.maps.MapTypeId.HYBRID,
    };
    var map = new google.maps.Map(document.getElementById('map'), options);

    //Marker type
    var markers = [];
    var arr = [];
    var pinColor = "FE7569";
    var pinImage = "http://labs.google.com/ridefinder/images/mm_20_red.png";

    // JSON loop
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
        latLng = new google.maps.LatLng(data.lat, data.lng);
      arr.push(latLng);

      // Create markers
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: pinImage,
      });
      infoBox(map, marker, data);

      //Polylines
      var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
      infoPoly(map, flightPath, data);
    }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, "click", function(e) {
          infowindow.setContent("tm:" + data.tm + "<br>loc:" + this.getPosition().toUrlValue(6));
          infowindow.open(map, marker);
          // salta(data.tm);
        });

        (function(marker, data) {
          google.maps.event.addListener(marker, "click", function(e) {
            infowindow.setContent("tm:" + data.tm + "<br>loc:" + this.getPosition().toUrlValue(6));
            infowindow.open(map, marker);
            // salta(data.tm);
          });
        })(marker, data);
      }
      //Create onclick marker on the polyline

    function infoPoly(map, flightPath, data) {
      google.maps.event.addListener(flightPath, 'click', function(event) {
        mk = new google.maps.Marker({
          map: map,
          position: event.latLng,

        });
        markers.push(mk);
        map.setZoom(17);
        map.setCenter(mk.getPosition());

        // find line segment.  Iterate through the polyline checking each line segment.
        // isLocationOnEdge takes a google.maps.Polyline as the second argument, so make one,
        // then use it for the test.  The default value of 10e-9 for the tolerance didn't work,
        // a tolerance of 10e-6 seems to work.
        var betweenStr = "result no found";
        for (var i = 0; i < flightPath.getPath().getLength() - 1; i++) {
          var tempPoly = new google.maps.Polyline({
            path: [flightPath.getPath().getAt(i), flightPath.getPath().getAt(i + 1)]
          })
          if (google.maps.geometry.poly.isLocationOnEdge(mk.getPosition(), tempPoly, 10e-6)) {
            betweenStr = "between " + i + " and " + (i + 1);
          }
        }


        (function(mk, betweenStr) {
          google.maps.event.addListener(mk, "click", function(e) {
            infowindow.setContent(betweenStr + "<br>loc:" + this.getPosition().toUrlValue(6));
            infowindow.open(map, mk);
            // salta(data.tm);
          });
        })(mk, betweenStr);

        google.maps.event.trigger(mk, 'click');
      });
    }

    function drawPath() {
      var coords = [];
      for (var i = 0; i < markers.length; i++) {
        coords.push(markers[i].getPosition());
      }
      flightPath.setPath(coords);
    }

    //  Fit these bounds to the map
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
      bounds.extend(arr[i]);
    }

    map.fitBounds(bounds);
    //dist polylines
    distpoly = flightPath.inKm();
    distpolyround = Math.round(distpoly);
  };
})();

var json = [{
  lat: 38.931808,
  lng: -74.906606,
  tm: 0
}, {
  lat: 38.932442,
  lng: -74.905147,
  tm: 1
}, {
  lat: 38.93311,
  lng: -74.903473,
  tm: 2
}, {
  lat: 38.933777,
  lng: -74.901671,
  tm: 3
}, {
  lat: 38.930739,
  lng: -74.912528,
  tm: 1000
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>