Dilverey Map Radius

Dilverey-Map-Radius.markdown

Dilverey Map Radius

I needed to put a couple radius that accurately mapped different mile markers around an address.

Forked from Jermbo's Pen Map Radius.

Forked from Jermbo's Pen Map Radius.

A Pen by Mahmoud on CodePen.

License.

index.html

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

script.js

var map,
    lat = 40.615656,
    long = -73.918138,
    baseCenter = new google.maps.LatLng( lat, long );
function initialize() {
  var mapOptions = {
    zoom: 13,
    center: baseCenter
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var rad = 1000; // convert to meters if in miles


  var threeMile = new google.maps.Circle({
    center: baseCenter,
    radius: rad * 2.7,
    strokeColor: "#e99d47",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0,
    map: map
  });
   var fourMile = new google.maps.Circle({
    center: baseCenter,
    radius: rad * 3.5,
    strokeColor: "#e99d47",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0,
    map: map
  });
  
 var fiveMile = new google.maps.Circle({
    center: baseCenter,
    radius: rad * 5,
    strokeColor: "#e99d47",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0,
    map: map
  });
  
}

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

style.css

html, body, #map-canvas { height: 100%; margin: 0; padding: 0; }