CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3polyline
phil123
phil123

Reputation: 195

Google Maps polyline: Click on section of polyline and return ID?

I have a Google Maps V3 polyline. I can detect click events on the entire polyline, but can I do anything more advanced with the click event?

What I'd like to do is detect which section of the polyline has been clicked, and show this in an alert.

 routePath = new google.maps.Polyline({
     path: routeCoordinates,
     strokeColor: "#CC33FF",
     strokeWeight: 3
 });     
 routePath.setMap(map);
 google.maps.event.addListener(routePath, 'click', function() {
     alert(routePath);
     // TODO: display which section of the polyline has been clicked?
 });

Does anyone know how to do this in Google Maps?

thanks!

Upvotes: 8

Views: 23883

Answers (3)

Dexter Le Blanc Jr.
Dexter Le Blanc Jr.

Reputation: 101

I ran into the same, issue here is how I dealt with it: when setting up the handler:

google.maps.event.addListener(routePath, 'click', function(e) {
    handlePolyClick(e, this)
});

var handlePolyClick(eventArgs, polyLine) {
    // now you can access the polyLine
    alert(polyLine.strokeColor);
});

Or if you want to access a related object set it by creating a variable on the polyLine:

routePath.car = $.extend({}, cars[1]); // shallow copy of cars[1]

then you can access your car from the event:

alert(this.car.color);

Upvotes: 4

Nils
Nils

Reputation: 2061

On the click event you can receive a LatLng of the coordinate that was clicked. However, since that will probably not be an exact point that is creating the polyline you need to find the closest point. You can use the computeDistanceBetween in the Google Maps library or you can use Pythagoras theorem as it should give you a good enough accuracy in this case.

You can find more information on computeDistanceBetween here: https://developers.google.com/maps/documentation/javascript/reference#spherical

Here is a code example how you could do it with the computeDistanceBetween. 

google.maps.event.addListener(routePath, 'click', function(h) {
     var latlng=h.latLng;
     alert(routePath);
     var needle = {
         minDistance: 9999999999, //silly high
         index: -1,
         latlng: null
     };
     routePath.getPath().forEach(function(routePoint, index){
         var dist = google.maps.geometry.spherical.computeDistanceBetween(latlng, routePoint);
         if (dist < needle.minDistance){
            needle.minDistance = dist;
            needle.index = index;
            needle.latlng = routePoint;
         }
     });
     // The closest point in the polyline
     alert("Closest index: " + needle.index);

     // The clicked point on the polyline
     alert(latlng);

 });

Upvotes: 12

jmaculate
jmaculate

Reputation: 3016

Finding the closest point by distance analysis will fail in a lot of cases where a path crosses back over or near itself.

You can use it to identify candidates, but you should confirm them by comparing the cross product and/or dot product of the 2 lines created if you use the click point to split 2 consecutive polyline points

Upvotes: 2

Related Questions