Remove a circle object from a Google Map - google-maps

Question

I have checked multiple similar posts on SO but haven't yet found the answer. I have a Google map app that when you Zoom in the marker changes from an icon to a circle. It works great. The Marker icon is replaced by the circle object. But, I also want it to work in reverse: As you zoom out, I want to remove the circle and replace it with the icon. I can get the icon to "reappear" but I can't figure out a way to get a reference to the circle object that is bound to the Marker so I can remove it.
This is NOT the complete code that I am using but to satisfy the request for something MINIMAL rather than complete, this would create the issue:
var marker;
createamarker();
removeCircle();
function createamarker(){
marker = new google.maps.Marker({
position: location,
map: map,
icon: icon,
// Add some custom properties
obscure:obscure,
originalpin: icon
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 1000, // in metres
fillColor: '#AA0000'
});
// Bind it to the marker
circle.bindTo('center', marker, 'position');
}
I also have a second function that is SUPPOSED to remove the circle:
function removeCircle(){
// remove whatever is there
marker.setMap(null);
var icon = {
url: marker.originalpin,
scaledSize: new google.maps.Size(22,32)
}
// reset the marker icon
marker.icon = icon;
//sets the marker back
marker.setMap(map);
// NOW REMOVE the circle:
// So at this point I am stuck. I have bound a circle to
// the marker but in order to REMOVE the circle I need a
// reference to it. Other SO postings suggest acting on the
// circle object directly like so:
circle.setMap(null);
// but the "circle" doesn't exist here. It was bound to the marker in another function. I need a reference to the circle that was bound to the marker so I can act on it.
}

Answer 1

To do what you are looking to do, one option would be to set the circle as a property of the marker:
marker.circle = circle;
Then you can hide the circle like this:
marker.circle.setMap(null);
Note that this won't work if the circle is global, it needs to be local to the createamarker function.
proof of concept fiddle
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = createamarker(map.getCenter());
removeCircle(marker);
var marker2 = createamarker(new google.maps.LatLng(37.45, -122.14));
google.maps.event.addDomListener(document.getElementById('toggle'), 'click', function() {
marker.circle.setMap(marker.circle.getMap() == null ? map : null);
marker2.circle.setMap(marker2.circle.getMap() == null ? map : null);
});
}
google.maps.event.addDomListener(window, "load", initialize);
function createamarker(location) {
var icon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
marker = new google.maps.Marker({
position: location,
map: map,
icon: icon,
// Add some custom properties
// obscure: obscure,
originalpin: icon
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 1000, // in metres
fillColor: '#AA0000'
});
// Bind it to the marker
circle.bindTo('center', marker, 'position');
marker.circle = circle;
return marker;
}
function removeCircle(marker) {
// remove whatever is there
marker.setMap(null);
var icon = {
url: marker.originalpin,
scaledSize: new google.maps.Size(22, 32)
}
// reset the marker icon
marker.icon = icon;
//sets the marker back
marker.setMap(map);
// NOW REMOVE the circle:
// So at this point I am stuck. I have bound a circle to
// the marker but in order to REMOVE the circle I need a
// reference to it. Other SO postings suggest acting on the
// circle object directly like so:
marker.circle.setMap(null);
// but the "circle" doesn't exist here. It was bound to the marker in another function. I need a reference to the circle that was bound to the marker so I can act on it.
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="toggle circle" id="toggle" />
<div id="map_canvas"></div>