Interactive circle in google map which changes on changing radius
12,376
Create the circle once instead of on every slider move event. Then simply update the radius of the circle when the slider changes.
Untested code:
var circle; //global variable, consider adding it to map instead of window
$(function() {
circle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: myMap,
radius: 500
});
circle.bindTo('center', marker, 'position');
$( "#slide" ).slider({
orientation: "horizontal",
range: "min",
max: 10000,
min: 500,
value: 500,
slide: function( event, ui ) {
updateRadius(circle, ui.value);
}
});
});
function updateRadius(circle, rad){
circle.setRadius(rad);
}
Author by
Abhishek
Updated on June 09, 2022Comments
-
Abhishek almost 2 years
I want an interactive circle for google maps, which increases or decreases as and when i change radius in slider.
It is working fine when i am increasing radius, but on decreasing radius it is not changing(decreasing) circle in map$(function() { $("#slide").slider({ orientation: "horizontal", range: "min", max: 10000, min: 500, value: 500, slide: function( event, ui ) { drawCircle(ui.value); } }); }); function drawCircle(rad){ circle = new google.maps.Circle({ strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: myMap, radius: rad }); circle.bindTo('center', marker, 'position'); }
-
Suhail Mumtaz Awan over 6 yearshelpful and effective
-
Mr. Pyramid over 6 yearssuperb you just save my day! :)