Google Maps API v3 Hiding and showing a circle bound to a marker
Solution 1
One option is to make the circle a property of the marker (like ._myCircle), reference it in the click handler as marker._myCircle.
Add the circle as the _myCircle property of marker:
var circle = new google.maps.Circle({
map: map,
radius: 50*1609.34,// 50 MI
visible: false
});
circle.bindTo('center', marker, 'position');
marker._myCircle = circle;
To toggle it use something like (not tested):
if(marker._myCircle.getMap() != null) marker._myCircle.setMap(null);
else marker._myCircle.setMap(map);
Solution 2
var rad =".$this->conf['radius'] * 1000 ."; //convert km to meter
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,//map object
center: new google.maps.LatLng($corr_match[0], $corr_match[1]),//center of circle
radius: rad
};
var cityCircle = new google.maps.Circle(populationOptions);
Related videos on Youtube
Timberline411
Updated on September 26, 2022Comments
-
Timberline411 over 1 year
I have successfully bound a circle to my marker using google map api v3. I know this because if I make the marker dragable the circle moves as well.
How can I refer to the circle if the marker is clicked. I need to show the circle if not visible or vice-versa.
Here is the code to create the marker and circle
var markerOptions = { title: title, icon: markerImage, shadow: markerShadow, position: latlng, map: map } var marker = new google.maps.Marker(markerOptions); // Add a Circle overlay to the map. var circle = new google.maps.Circle({ map: map, radius: 50*1609.34,// 50 MI visible: false }); //circle.bindTo('map', marker); circle.bindTo('center', marker, 'position');
I found an answer on stackoverflow that led me to think I needed to do the rem'd out map binding as well the center binding, but that did not work.
Here is my click event for the marker.
google.maps.event.addListener(marker, "click", function() { var infowindowOptions = { content: html } var infowindow = new google.maps.InfoWindow(infowindowOptions); cm_setInfowindow(infowindow); infowindow.open(map, marker); marker.setIcon(markerImageOut); marker.circle({visible: true});
Any ideas. I need to interact with the bound circle of the marker that was just clicked or moused over.
-
Timberline411 over 11 yearsThanks for your reply. How do I make the circle a property of the marker?
-
geocodezip over 11 yearsThere is an example in my answer (marker._myCircle is "a property of the marker"). Does it not work for you?
-
Timberline411 over 11 yearsForgive me but I'm just starting with this api and am not familiar with the object model. How do I set market._myCircle equal to the circle I created thats center is bound to the marker we are speaking of. In other words, what is the JS code that creates a property for the marker that is equal to the circle I have just created?
-
Timberline411 over 11 yearsyou put me on the right track. marker._myCircle = circle worked. Then I put a marker._mycircle.setOptions({visible: true}); in the click event. -Thanks