Google Maps API V3 - Change Circle radius by click event
11,393
Try Replacing your code with this, change part is after body tag.
<html>
<head>
<div id="map"></div>
<style media="screen, projection" type="text/css">
#map {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div>
30.000m <input type="radio" name="radiusBtns" id="radioBtn1" onclick="calcRadius(30000);" value="30" /><br />
60.000m<input type="radio" name="radiusBtns" id="radioBtn2" onclick="calcRadius(60000);" value="60" /><br />
90.000m<input type="radio" name="radiusBtns" id="radioBtn3" onclick="calcRadius(90000);" value="90" />
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script><script type="text/javascript">
var circle, map, pre_radius;
function initialize()
{
pre_radius = '60000';
var mapCenter = new google.maps.LatLng(40, -74);
map = new google.maps.Map(document.getElementById('map'), {
'zoom': 7,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// Add click event listenecal
calcRadius(60000);
};
function calcRadius(radiusVal)
{
//console.log(document.getElementById("#radioBtn1").value);
pre_radius = radiusVal;
google.maps.event.addListener(map, "click", function (e) {
var image = new google.maps.MarkerImage(
'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(40, 35),
new google.maps.Point(0, 0),
new google.maps.Point(20, 30)
);
var shadow = new google.maps.MarkerImage(
'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(62, 35),
new google.maps.Point(0, 0),
new google.maps.Point(0, 35)
);
var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
map: map,
position: e.latLng
});
circle = new google.maps.Circle({
map: map,
radius: pre_radius,
fillColor: '#AA0000'
});
console.log(circle);
circle.bindTo('center', marker, 'position');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Related videos on Youtube
Author by
Darko J
Updated on September 15, 2022Comments
-
Darko J over 1 year
I use below code to display Circle by click event with Radius 60.000m.
<html> <head> <div id="map"></div> <style media="screen, projection" type="text/css"> map { width: 800px; height: 600px; } </style> </head> <body> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script><script type="text/javascript"> function initialize() { var mapCenter = new google.maps.LatLng(40, -74); var map = new google.maps.Map(document.getElementById('map'), { 'zoom': 7, 'center': mapCenter, 'mapTypeId': google.maps.MapTypeId.ROADMAP }); // Add click event listener google.maps.event.addListener(map, "click", function (e) { var image = new google.maps.MarkerImage( 'image/data/ConstBuilder/marker.png', new google.maps.Size(40, 35), new google.maps.Point(0, 0), new google.maps.Point(20, 30) ); var shadow = new google.maps.MarkerImage( 'image/data/ConstBuilder/shadow.png', new google.maps.Size(62, 35), new google.maps.Point(0, 0), new google.maps.Point(0, 35) ); var marker = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, map: map, position: e.latLng }); var circle = new google.maps.Circle({ map: map, radius: 60000, fillColor: '#AA0000' }); circle.bindTo('center', marker, 'position'); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </body> </html
Now I want to add one more functionality - radio buttons that can change radius values of my Click event (that display circle). I know that I need to employ
getRadius()
method like new event, and I try to implement code below but without success.google.maps.event.addDomListener( document.getElementById('circle_radius'), 'change', function() { circle.setRadius(document.getElementById('circle_radius').value) });
Can anyone help me to find solutions?