Googel Maps API - Toggle Circles around Markers?

Marc J · 05-15-2012, 07:12 PM

I'm trying to show an array of markers which, when clicked, will show an infowindow and also a circle with a radius, the size of which is also part of the array.

I've got as far as showing the markers, the infoboxes and the circles, but am struggling with toggling the circles.

I haven't quite made up my mind if I want the circles to all be initially on or off, I guess that depends how many I end up with...

Here's what I have so far: -

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps API Tests</title>
<style type="text/css">
html {font-family:Tahoma,verdana,sans-serif; font-size:0.75em;}
p {font-weight:bold;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
  function initialize() {

	var myLatlng = new google.maps.LatLng(36.637484, -121.51057);
	var myOptions = {
	  zoom: 6,
	  center: myLatlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  streetViewControl: true
	}

	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	setMarkers(map, sites);
	infowindow = new google.maps.InfoWindow({
			content: "loading..."
		});

  }


	var sites = [
		['Google', 37.422117, -122.083856, 'http://www.google.com/', 402336],
		['Yahoo', 34.030194, -118.47479, 'http://www.yahoo.com/', 201168]
	];



	function setMarkers(map, markers) {

		for (var i = 0; i < markers.length; i++) {
			var sites = markers[i];
			var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
			var marker = new google.maps.Marker({
				position: siteLatLng,
				map: map,
				title: sites[0],
				html: '<p>'+sites[0]+'</p><a href="'+sites[3]+'">Web Link</a>'
			});

			var circle = new google.maps.Circle({
				map: map,
				radius: sites[4],
				fillColor: '#12a3eb',
				fillOpacity: 0.15,
				strokeColor: '#0177b3'
			});

			circle.bindTo('center', marker, 'position'); 


			google.maps.event.addListener(marker, "click", function () {
				infowindow.setContent(this.html);
				infowindow.open(map, this);
			});
		}
	}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Any help would be much appreciated!