Google Maps Examples

Polygon with Infowindow

Tools, Resources

Loading ...
<div id="mapCanvas" style="width:430px;height:400px">Loading ...</div>

<script type="text/javascript">

var map;
var myInfowindow;

function initialize() {
var myLatlng = new google.maps.LatLng(47.376136,8.528899);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
};

map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);

var myPolygon;
var path_definition = [
new google.maps.LatLng(47.37440716013057,8.524360656738281),
new google.maps.LatLng(47.37644149399108,8.531055450439453),
new google.maps.LatLng(47.373767781851015,8.532514572143555),
new google.maps.LatLng(47.3710716013057,8.524360656738281)
];

myPolygon = new google.maps.Polygon({
paths: path_definition,
strokeColor: "#FF0000",
strokeOpacity: 0.3,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.1,
});

myPolygon.setMap(map);

// Add a listener for the click event
google.maps.event.addListener(myPolygon, 'click', show_myInfowindow);

myInfowindow = new google.maps.InfoWindow();
}

function show_myInfowindow(event) {

var vertices = this.getPath();
var contentString = "<b>My Polygon</b>";

// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
}

// Replace our Info Window's position
myInfowindow.setContent(contentString);
myInfowindow.setPosition(event.latLng);
myInfowindow.open(map);
}
</script>