The following article will demonstrate to you how to draw a circle on Google Maps with a radius. The Google Maps API has several types of overlays that you can add programmatically such as markers, info-window, polylines, polygons, circles, and rectangles.
- Keep reading on Google Maps Distance Matrix API Example C#, Check if point inside polygon Google Maps JavaScript
How to draw a radius circle on google maps
The Google Maps JavaScript v3 API includes a specific class for Circle objects, to simplify their construction. You can define custom colors, weights, and opacities for the edge of the circle (the stroke) and colors and opacities for the area within the circle (the fill). Colors should be indicated in the hexadecimal numeric HTML style.
A circle has two additional properties that define its shape:
- Center specifies the google.maps.LatLng of the center of the circle.
- Radius specifies the radius of the circle, in meters.
Find the below source code to draw a radius circle on a map:-
<!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>Conclusion
I hope you liked this article on how to draw a circle in google maps. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply