Getting Polyline ID Clicked

Viewed 2405

I'm using Google Maps v3 and have a map placed on my page. The user selects a bunch of data from some lists and then my map is updated with data from my db and provides the user with a map with a polyline of the selected data. The data is retrieved from the db using jquery and returned as json. My code parses the json and draws the polyline. My json contains a data ID, lat, lng. Works fine.

Now I want the user to be able to click on one of the polyline points and I will get additional data for that data ID from my database, but I'm having trouble identifying which ID they clicked. Does anyone have a quick solution to identifying which id was clicked on the line?

This is my listener for the polyline click event. It can get it to react just fine but I don't know how to identify "what" point was clicked so that I can go get my additional data. The example below gives me the ID of the first element in my polyline so I know I'm accessing the array and the event is firing. Just need to be able to locate the specific point I clicked. I get my json. My test set has 8,349 points that looks like this.

{
            "id": 1590065,
            "lat": 37.07318,
            "lng": -88.563132}
,{
            "id": 1590066,
            "lat": 37.07307,
            "lng": -88.563002}
,{
            "id": 1590067,
            "lat": 37.072967,
            "lng": -88.562875}
,{
            "id": 1590068,
            "lat": 37.07287,
            "lng": -88.56275}
,{
            "id": 1590069,
            "lat": 37.072779,
            "lng": -88.56263}
,....

Then I parse the data and assign it to my coordinates.

vesselPathCoordinates = JSON.parse("[" + data + "]");

Then I build my polyline.

vesselPath = new google.maps.Polyline({
    path: vesselPathCoordinates,
    strokeColor: ''#FF0000'',
    strokeOpacity: 1.0,
    strokeWeight: 1.5
});



google.maps.event.addListener(vesselPath, 'click', function( event ){
      console.log( vesselPathCoordinates[0].id ); 
        });

When the user click a specific point on the line I want to know what ID from the JSON that they clicked. In other words, what lat and lng point on the line triggered the event.

2 Answers
Related