Custom google map that displays location pin and coverage radius area.

google-map-api

<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>

<div class="mapcontainer"><div id="map-canvas"></div></div>

<script>	
	function initialize() {
	  var myLatlng = new google.maps.LatLng(52.074530, 1.141600);
	  var mapOptions = {
	    zoom: 4,
	    minZoom: 6, 
	    maxZoom: 17, 
	    center: myLatlng,
	    mapTypeId: google.maps.MapTypeId.ROADMAP,
	    // Set the Map Controls
		overviewMapControl:true,
		mapTypeControl:false
	  }

	  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	  var image = new google.maps.MarkerImage("http://www.cottrellmoore.co.uk/wp-content/uploads/2014/09/map-icon.png", null, null, null, new google.maps.Size(35,52));

	  var marker = new google.maps.Marker({
	      position: myLatlng,
	      // animation:google.maps.Animation.BOUNCE,
	      icon:image,
	      map: map,
	      title: 'Cottrell Moore'
	  });

	  // The Radius Band:
	var local = new google.maps.Circle({
		  center:myLatlng,
		  radius:51265.408,
		  strokeColor:"#0000FF",
		  strokeOpacity:0.8,
		  strokeWeight:0,
		  fillColor:"#710030",
		  fillOpacity:0.3
		  });

		local.setMap(map);

		google.maps.event.addListener(local, 'click', function(ev){
	    	band0infowindow.setPosition(ev.latLng);
	    	band0infowindow.open(map);
		});
		
}

	google.maps.event.addDomListener(window, 'load', initialize);

	</script>