Kunal Kunal - 1 month ago 27
Javascript Question

Draw polygon using mouse on google maps

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

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 :)