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

you can use the Google MyMaps polygon editing tools in your appplication, maybe this will be ok for you?

see http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html

However if you want to implement this yourself it is basically this:

add click listener to map.

repeat: store points that user clicks on in an array, and add a marker at this point. if it is the first marker add click listener to it

when user clicks on first marker, parse use the array of points to build your polygon

I don't have any code to show you, but I have implemented this myself in a previous company, so it can be done :)

Answer 2

You may want to check out the Geometry Controls of the GMaps Utility Library.

For further reference, you may want to go through the GeometryControls Reference.

Answer 3

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 isFirstMarker = poly.getPath().length === 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);
    });
});