GoogleMap API - markerArray with klm radius options

by freedawirl

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script src="http://www.kjftw.com/gmap/images/icons/numeric/red10.png"></script>
<div id="map_canvas"></div>
<button id='createCir'>Create Circle at 5000 klm</button>
<button id='createCir2'>Create Circle at 10000 klm</button>

CSS

#map_canvas{
    width: 500px;
    height: 500px;
}

JavaScript

var map = null;
var markerArray = []; //create a global array to store markers
var locations = [
    ['CapMetro HQ', 30.271267, -97.744044, 4],
    ['Net Spend', 30.267153, -97.743061, 5],
    ['TX State Capital Bld', 30.263926, -97.744931, 3],
    ['Lucys Fried Chicken', 30.267153, -97.743061, 2],
    ['TDLR Blg', 30.267153, -97.743061, 1]
];

function initialize() {
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(30.267153, -97.743061),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for (var i = 0; i < locations.length; i++) {
        createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]), locations[i][0], locations[i][3], locations[i][4]);
    }
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, myTitle, myNum, myIcon) {
    var contentString = myTitle;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5,
        title: myTitle
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

function createRadius(dist) {
    var myCircle = new google.maps.Circle({
        center: markerArray[markerArray.length - 1].getPosition(),
        map: map,
        radius: dist,
        strokeColor: "#FF0000",
       ...