muliple markers

by priyanka tiwari

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>

CSS

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

JavaScript

var map = null;
var markerArray = []; //create a global array to store markers
var locations = [
    ['Bondi Beach', 51.890542, -0.274856, 4],
    ['Coogee Beach', 51.923036, -0.259052, 5],
    ['Cronulla Beach', 51.028249, -0.157507, 3],
    ['Manly Beach', 51.0, -0.287434187, 2],
    ['Maroubra Beach', 51.950198, -0.259302, 1]];

function initialize() {
    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(50.80010128657071, 0.28747820854187)
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

    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]);
    }

    mc.addMarkers(markerArray, true);
}

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

function createMarker(latlng, myTitle, myNum, myIcon) {
    var contentString = myTitle;
    var markernew = new google.maps.Marker({
        position: latlng,
        map: map
    });

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

    markerArray.push(markernew);
}

window.onload = initialize;