Google Map - Bullseye

Draw a bullseye around Curtin in bands of increasing distance.

by Brian von Konsky

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Business Web Technology (ISYS3004) -->
<!-- School of Information Systems      -->
<!-- Curtin University                  -->

<!-- See jsfiddle External Resources for google map api reference -->
<!-- to https://maps.googleapis.com/maps/api/js                   -->

<h2> Distance to Curtin </h2>
<p>Below are 2, 4, 8, 16 and 32 kilometer bands around Curtin University, Bentley</p>
<div id="google_map"></div>

CSS

#google_map {
    width: 512px;
    height: 512px;
    background-color: black;
}

JavaScript

// Extentions to the Number and google maps LatLng Objects 
// in this fiddle have been adapted from the following:
// http://stackoverflow.com/questions/2637023/how-to-calculate-the-latlng-of-a-point-a-certain-distance-away-from-another

// Inialise the map centered on the CBS at the Bentley campus of Curtin University
function initMap() {

    // Get the latitude and longitude for Curtin
    var curtin = new google.maps.LatLng(-32.003850, 115.894818);
    
    // Set map center and zoom factor
    var mapOptions = {
      zoom: 10,
      center: curtin
      }
   
    // Create the goolge map.
    var map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
    
    // drawBullsEye centered at Curtin
    drawBullsEye (map, curtin);
    
}

//Draw a Bulls on on the specified map at the LatLng given by center
function drawBullsEye(map, center) {

    // Create an object to specify drawing attributes 
    // of things we'll render in red
    var red = {
        strokeColor: '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    };
   
   // Create an object to specifying drawing attributes 
   // of things we'll render in blue
   var blue = {
        strokeColor: '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: 0.35
    };
    
    // Try this...
    // change the defintion of gray to the following and explain the result.
    // var gray = red;
    // var gray.fillColor = "#0000FF;    
   
    // Create alternating bands that are at increasing 2 kilometers factors
    for (var r = 0; r< 5 ; r++ )  {
        var hole= true;
        if (r==0)
            hole=false;
        var color = blue;
        if (r%2==0)
            color=red;
        var d1 = Math.pow(2, r);
        var d2 = d1 * 2;
        drawDonut(map, d1, d2, center, hole, color);
    }
}

// Draw a single donut
function drawDonut (map, r1, r2,...