Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps - Attaching InfoWindows to polygons in array

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 infoWindow. I can see all the polygons on the map. I add the listener, and it fires (the color change happens), but I don't get the infoWindow. Any help would be greatly appreaciated!

Cheers!

C...

tmppoly = new google.maps.Polygon({
   map: map,
   paths: polypath,
   strokeColor: scolor,
   strokeOpacity: 0.5,
   strokeWeight: 2,
   fillColor: fcolor,
   fillOpacity: 0.5
});

addPolygonClick(tmppoly,mdata);
plot_polygons.push(tmppoly);

...

function addPolygonClick(poly,html) {

    infowindow = new google.maps.InfoWindow(
    { 
        content: html
    });

    google.maps.event.addListener(poly,'click', function(event) {
        this.setOptions({fillColor: "#000000"});
        infowindow.open(map);
    }); 

}
like image 288
Cris McCarthy Avatar asked Mar 22 '26 08:03

Cris McCarthy


1 Answers

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.

like image 157
Gallery Avatar answered Mar 24 '26 22:03

Gallery