Google Maps - Attaching InfoWindows to polygons in array

Question

I\'ve been banging my head against the wall all morning with this one. I an creating an array of polygons, and want to associate some data in each one that will show in an info

Answer 1

There are a few problems that might be preventing this from working:

1: You need a var in front of infowindow, to make it a local variable:

var infowindow = new google.maps.InfoWindow(...

As it is, you are replacing the infowindow variable every time you add a new click listener.

2: You need to specify a position or anchor for the infowindow (see: http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions).

The only valid anchor is a Marker, so you will probably want to specify the 'position' property. 'position' must be a valid google.maps.LatLng object. I suspect you will want to compute the center of your polygon to use as the position.

You also need to make sure map is a global variable, although it likely is looking at the rest of your code.

Answer 2

I can provide some useful suggestions about your question.

Firstly, you should know the expression about the method 'infowindow.open(map, anchor?:MVCObject)'. As the google api v3 says: In the core API, the only anchor is the Marker class. Polygon class does not match the condition, however, we can achieve in another way.

var polygon = new google.maps.Polygon({
    paths: PGpoints,   //The PGpoints is the collection of points around this polygon.
    map: map,
    strokeColor: colory,
    strokeOpacity: 0.6,
    strokeWeight: 1,
    fillColor: colory,
    fillOpacity: 0.35       
});

polygon.set("Info", idy);  // Set some attributes for adding extra information into this polygon.   

google.maps.event.addListener(polygon, 'click', function() {
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent("Information : " + polygon.get("Info"));

    // 'laty,lngy' is the location of one point in PGpoints, which can be chosen as you wish
    infoWindow.setPosition(new google.maps.LatLng(laty,lngy));     
    infoWindow.open(map);
});

The code above has passed test, you can use it directly. Then, if you click one polygon, infoWindow would appear above the map.

Answer 3

Please take a look at this https://developers.google.com/maps/documentation/javascript/examples/event-closure and combine it with the response above to assign a unique message for each polygon in your array of polygons.

I am also working in having multiple polygons in one layer with unique message for each polygon. I have not succeeded yet. With the response above, I got info window to show up, but I get the same message for all the polygons. Once I solve my problem, I will post the solution.