Keywords | draw a distance circle on google maps, draw a circle on google maps, draw a circle on google map, draw radius circle on google maps
- Keep reading on Google Maps Draggable Marker Get Coordinates
Draw a Circle on Google Maps
A shape is an object on the map, tied to a latitude/longitude coordinate. So using Google Maps API V3 we can add various shapes to your map. There are following shapes to overlay on Google Maps such as – line, polygon, circle and rectangle.
In addition, the Google Maps JavaScript API includes a specific class for drawing circle on the map, to simplify their construction. A circle has two additional properties which define its shape:-
- Center specifies the google.maps.LatLng of the center of the circle
- Radius specifies the radius of the circle, in meters
How to draw a distance circle on Google Maps
The following example demonstrates draw a circle on google maps and how to how to draw radius circle on google maps javascript API v3. Find the source code below:-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>How to draw a circle on Google Maps</title> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-KEY"></script> <script type="text/javascript"> var circleClusterremove = []; var buffer_circle = null; // To load google map function initialize() { var mapOptions = { center: new google.maps.LatLng(19.110136, 72.881927), zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); map.setMapTypeId(google.maps.MapTypeId.ROADMAP); } // set onclick listener to pick a location on map function setListenerBuffer() { map.setOptions({ draggableCursor: 'crosshair' }); google.maps.event.addListenerOnce(map, "click", function (latlng) { map.setOptions({ draggableCursor: '' }); createCircle(latlng.latLng); }); return false; } // Draw circle with in radius function createCircle(cntr) { var rad = "5"; // can input dynamically rad *= 1000; // convert to meters if in miles if (buffer_circle != null) { buffer_circle.setMap(null); } buffer_circle = new google.maps.Circle({ center: cntr, radius: rad, strokeColor: "", strokeOpacity: 0.0, strokeWeight: 2, fillColor: "#FFD700", fillOpacity: 0.5, map: map }); circleClusterremove.push(buffer_circle); } // To remove circle from google map function RemoveCircleBuffer() { try { for (var i = 0; i < circleClusterremove.length; i++) { circleClusterremove[i].setMap(null); } circleClusterremove = []; } catch (Error) { } } </script> <style type="text/css"> .create_Circle { background: url(buffer.png) no-repeat; width: 41px; margin: 0px 8px 0 0px; float: left; cursor: pointer; z-index: 2; height: 41px; } .remove_Circle { background: url(close.png) no-repeat; width: 41px; margin: 0px 8px 0 0px; float: left; cursor: pointer; z-index: 2; height: 41px; } </style> </head> <body onload="initialize();"> <h1>Draw a Circle on Google Maps</h1> <a href="#" onclick="return setListenerBuffer();">Click here to pick a location on map</a><br /> <a href="#" onclick="RemoveCircleBuffer();">Click here to remove circle from the map</a> <div id="map-canvas" style="width: 750px; height: 400px"> </div> </body> </html> |
What do you think?
I hope you liked this article on draw a circle on google maps and draw a distance circle on google maps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
