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:-
<!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.
