Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
* initialize()
* setup the google map, draw the polygon on it, set event handlers
function initialize() {
//create the google map
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: new google.maps.LatLng(22.7964, 79.8456),
mapTypeId: google.maps.MapTypeId.HYBRID
//specify the coordinates for a polygon
var coords = [
new google.maps.LatLng(18.979026, 72.949219),
new google.maps.LatLng(28.613459, 77.255859),
new google.maps.LatLng(22.512557, 88.417969),
new google.maps.LatLng(12.940322, 77.607422),
//create the polygon object using these coordinates
polygon = new google.maps.Polygon({
paths: coords,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.26,
someRandomData: "I'm a custom tooltip :-)"
//attach event listeners to this polygon
google.maps.event.addListener(polygon, 'mouseover', function (e) {
injectTooltip(e, polygon.someRandomData);
google.maps.event.addListener(polygon, 'mousemove', function (e) {
google.maps.event.addListener(polygon, 'mouseout', function (e) {
//render the polygon on the map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment