var polygon = new GPolygon(polylines[0],"#FFFFFF", 1, 1.0, color,opacity);
polygon.hid = this.id;
polygon.heat = this.heat;
google.maps.event.addListener(polygon, 'click', function(point) {
HoodsUnselect(active_hood_id);
active_hood_id = polygon.hid;
polygon.setOptions({fillColor: '#2948e4', fillOpacity: 0.50 });
//polygon.setFillStyle( { color:'#2948e4',opacity:'0.50' } );
if (point) {
map.openInfoWindowHtml(point, the_list); // open info window where user clicked
} else {
map.openInfoWindowHtml(polygon.getBounds().getCenter(), the_list); // open info window at the center of polygon
}
});
views:
45answers:
2The v3 equivalent of GPolyline is Polyline and GPolygon is Polygon. Both of these have click events that you can listen for.
Even better, Google provides Polyline examples and Polygon examples, including one that listens for clicks and opens an infowindow.
In addition to Tony's answer, there is no openInfoWindowHtml()
method in the v3 API. You'd have to create an InfoWindow
object, on which you can call the open()
or close()
methods. You'd normally want just one InfoWindow
object if you want just one visible at the same time:
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(yourOverlay, 'click', function () {
infoWindow.setContent('Some info on yourOverlay');
infoWindow.open(map);
);
The main difference between the v2 API and v3 API when it comes to Info Windows is the fact that in the v3 API you can have more than one Info Window open at the same time. This was not possible in the v2 API. To have multiple Info Windows open, you'd want to create multiple InfoWindow
objects, and not just one for all the markers (overlays).
As for the polygons, this is how to create a polygon in the v3 API (borrowed from the example mentioned by @Tony):
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);