Custom markers

by Alex Azuero

HTML

<html>
<head>
<title>Google Maps API v3 - Icons</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 530px; height:230px"></div>
</body>
</html>

JavaScript

function initialize()
{
    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 11,
        center: new google.maps.LatLng(15.529279,73.903656),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    setMarkers(map, beaches);
}

var beaches = [
  ['Baga Beach', 15.559627,73.750792, 4],
  ['Calangute Beach', 15.547141,73.755341, 5],
  ['Candolim Beach', 15.523656,73.774137, 3],
  ['Miramar Beach', 15.477504,73.80744, 2],
  ['Dona Paula Beach', 15.454756,73.805208, 1]
];

function setMarkers(map, locations)
{
    var image = 'http://icons.iconarchive.com/icons/visualpharm/vacation/48/beach-chair-icon.png';
      for (var i = 0; i < locations.length; i++)
    {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker(
        {
                position: myLatLng,
                map: map,
                icon: image,
                title: beach[0],
                zIndex: beach[3]
            });
      }
}