i would hide/show a circle on gmaps, on checkbox click.
Map is created on document ready. My code add the circle, but doesn't remove/hide. On new checkbox click it creates a new circle, not removing the old one.
I suppose it's a scope question, could anyone help me?
thanks in advance
this is my code
$( "#ck_radar" ).click(function() {
var markerOptions = {
title: "Tu sei qui",
icon: "http://maps.google.com/mapfiles/marker_green.png",
position: {lat: 38.132687, lng: 13.321929},
map: $("#bigmap").gmap3("get")
}
var marker = new google.maps.Marker(markerOptions);
circle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFFFF",
fillOpacity: 0.35,
map: $("#bigmap").gmap3("get"),
radius: 500,
tag:"acircle",
id:"circ"
});
if($(this).is(':checked')){
circle.bindTo('center', marker, 'position');
alert(circle.radius);
}else{
$('#bigmap').gmap3({
clear: {
id:"circ"
}
});
}
});
resolved, the mistake was in scoping, as supposed.
$( "#ck_radar" ).click(function() {
if($(this).is(':checked')){
var markerOptions = {
title: "Tu sei qui",
icon: "http://maps.google.com/mapfiles/marker_green.png",
position: {lat: 38.132687, lng: 13.321929},
map: $("#bigmap").gmap3("get")
}
var marker = new google.maps.Marker(markerOptions);
circle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FFFFF",
fillOpacity: 0.35,
map: $("#bigmap").gmap3("get"),
radius: 500,
tag:"acircle",
id:"circ"
});
circle.bindTo('center', marker, 'position');
}else{
$('#bigmap').gmap3({
clear: {
id:"circ"
}
});
}
});