googleMapWithPolygon.js

/********************************************************************
 * 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) {
        moveTooltip(e);
    });

    google.maps.event.addListener(polygon, 'mouseout', function (e) {
        deleteTooltip(e);
    });

    //render the polygon on the map
    polygon.setMap(map);
}