How to get a link to a polygon? (google maps api v3)

Question

I created several polygons, just drew them on the map. I also managed to start console.log when they were clicked. However, how will I continue to figure out which polygon was clicked?

As you can see in my code example here, I store each object in the "lots" collection, however - clicking on them gives me only a lat-long click. I thought that I might need to focus on my polygons and check if a point was clicked, cross them and thus figure out which polygon it is ... is there an easier solution?

var lot = new google.maps.Polygon({ paths: me.area, strokeColor: 'black', strokeOpacity: 0.35, strokeWeight: 1, fillColor: fillcol, fillOpacity: 0.35 }); lot.setMap(map); var obj = { 'id':me.id, 'rented':me.rented, 'area':lot }; google.maps.event.addListener(lot, 'click', function(event) { console.log(event); }); lots.push(lot); 

Answer 1

Why not assign an id property to each polygon when creating them, and then just use this.myID ? In truth, you can put all the necessary information on this polygon object.

 var lot = new google.maps.Polygon({ paths: me.area, strokeColor: 'black', strokeOpacity: 0.35, strokeWeight: 1, fillColor: fillcol, fillOpacity: 0.35 }); lot.setMap(map); var obj = { 'id':me.id, 'rented':me.rented, 'area':lot }; lot.objInfo = obj; google.maps.event.addListener(lot, 'click', function(event) { console.log(this.objInfo); }); lots.push(lot); 

Would that be more efficient than comparing a path in a loop, or am I missing something? :)

Answer 2

If I can be a little late with another solution, I had the same problem and I found that you can define custom properties on a polygon.

My example (which creates state on a US map)

 poly = new google.maps.Polygon({ map_state_id: map_state_id, paths: pts, fillColor: colour, fillOpacity: 0.66, strokeWeight: 1, clickable:true }); 

In this case, map_state_id is a custom property. I defined it as a state identifier (1 for Alabama, 2 for Alaska, etc.).

Then, when the specific state is clicked later, this "map_state_id" can be passed to the event function.

 google.maps.event.addListener(poly, 'click', function() { var map_state_id = this.map_state_id; //retrieve correct state_id $.ajax( { type: "POST", url: "http://www...get_state_info.php", data: {state_id : map_state_id}, dataType: "html", success: function(data) { $("#state_info").html(data); //display some info } }); }); 

I found this specific concept at http://dominoc925.blogspot.com/2011/12/add-your-own-property-field-to-google.html

Answer 3

Turned off getPath () works like a charm. I did not understand that in fact I received a link to the polygon that passed in the click event to match this with my stored “lots”. I just go through my saved batches and compare this.getPath with other.getPath if they match. I know which party was clicked and can now display information related to this particular object.

Here's an example code: (where parking is an array of my parking objects, which themselves have arrays containing parking objects)

 google.maps.event.addListener(lot, 'click', function(event) { var myPath = this.getPath(); for(var i = 0; i < parking.length; i++){ for(var j = 0; j < parking[i].lots.length; j++){ var lot = parking[i].lots[j]; var otherPath = lot.poly.getPath(); if(otherPath == myPath){ console.log(lot); break; } } } });