Draw polygon using mouse on google maps

Question

I need to draw polygon using mouse and mark a particular area on Google maps. The purpose is to mark an area on Google maps and then showing hotels and attractions on that area. The user will mark the hotels on Google map while creating them so the db will have their latitude and longitudes.

How can I draw the polygon and fill it with a color as background to mark the area in Google Maps? I have read the API Manual “how to draw polygons?” basically you would need to mark multiple points and then combine them into a polygon. But I will need to do this using mouse drag, just like drawing a shape. Kindly help me out how to achieve this.

Answer 1

Here is some code (for the Google Maps JavaScript API version 3) that achieves what you want. It supports:

• clicking to append vertices.
• clicking on the first vertex again to close the path.
• dragging vertices.

It's undocumented, but hopefully you can see what it's doing easily enough.

$(document).ready(function () {     var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });     var isClosed = false;     var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });     google.maps.event.addListener(map, 'click', function (clickEvent) {         if (isClosed)             return;         var markerIndex = poly.getPath().length;         var isFirstMarker = markerIndex === 0;         var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true });         if (isFirstMarker) {             google.maps.event.addListener(marker, 'click', function () {                 if (isClosed)                     return;                 var path = poly.getPath();                 poly.setMap(null);                 poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });                 isClosed = true;             });         }         google.maps.event.addListener(marker, 'drag', function (dragEvent) {             poly.getPath().setAt(markerIndex, dragEvent.latLng);         });         poly.getPath().push(clickEvent.latLng);     }); }); 

Answer 2

The Google Maps JavaScript API v3 provides a drawing library, http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

You just need to enable the drawing tools (as shown the the example in the docs) and add event listeners for the creation of overlay types (as shown under the "Drawing Events" section).

A quick example of its use would be: http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html