Multiple Polygons, Infowindow, Setmap

well, I've spent a while on this, and I've stumbled my way through and got this far with the help of many tutorials and examples. I need to create multiple polygons each with a sep

Solution 1:

Javascript doesn't have references to keys like for example php, so countries['UK'] is not possible to set. You have to use numeric keys. So syntax should be something like this:

countries[0] = new google.maps.Polygon({ ... });
countries[1] = new google.maps.Polygon({ ... });

I made your example working:

http://jsfiddle.net/AcCzT/15/

Can be finetuned. It's not perfect. It's just a quick fix. You can go on from there

Solution 2:

Javascript arrays do not have a .setMap() method. google.maps.Polygon() objects do. Additionally, there are no associative arrays in javascript, such as countries['UK']

This might work:

countries['UK'].setMap(map);

but it wouldn't be correct.

Solution 3:

There are two issues in your code:

1. What Marcelo said, to add the polygon to the map, use: countries["UK"].setMap(map);
2. To add the click listener, you need to reference the polygon: google.maps.event.addListener(countries["UK"], 'click', showInfoUK);

working example

Solution 4:

use ajax easier, more plain. for example,

downloadUrl("url", function(data) {
    for (var i = 0; i < polygons.length; i++) {
        ........
        var decodedPath = ........
        polygon.setMap(map);
        ........
    }
});