Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 316
Kunal Avatar asked Feb 24 '10 11:02

Kunal


People also ask

Is there a drawing tool on Google Maps?

Add line or shape.Select a layer and click where to start drawing. A layer can have 2,000 lines, shapes or places. Click each corner or bend of your line or shape. To move the map, click and hold the mouse.

How do I draw on Google Maps app?

Select the Draw a Line tool. Select Add Driving Route. Click on your starting point to begin drawing the route, and then double-click on your ending point to stop drawing. My Maps will create your route.

How do I import a polygon into Google Maps?

The answer is no, an encoded polygon cannot be imported. For a shape to be imported to My Maps, it must first be converted to a KML file. BlueCollar laid out the first step, which is to use Google's encoding API to decode the encoded shapes into Lat/Lng pairs. The KML file can then be imported.


2 Answers

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);     }); }); 
like image 172
Drew Noakes Avatar answered Oct 11 '22 00:10

Drew Noakes


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

like image 35
Michael Hellein Avatar answered Oct 11 '22 00:10

Michael Hellein