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.
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.
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.
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.
Here is some code (for the Google Maps JavaScript API version 3) that achieves what you want. It supports:
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); }); });
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With