javascript - Google Maps API v3 Hiding and showing a circle bound to a marker - Stack Overflow

admin管理员组

文章数量:1293739

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.

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.

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

Share Follow asked Dec 8, 2012 at 1:57 Timberline411Timberline411 3511 gold badge11 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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);

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);

本文标签： javascriptGoogle Maps API v3 Hiding and showing a circle bound to a markerStack Overflow