Multiple markers on a Google map with Umbraco

_page.html

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

<ul class="specialistsGrid">
  <li>
     <p class="sName"><a><strong>Specialist one</strong></a></p>
     <p class="sAddress">Street address, Town, County, Postcode</p>
     <p>T: 01234 567890<br />F: 01234 567890</p>
     <p class="sCoords">51.50276580000001,-0.0749306999999817,2</p>
  </li>
  <li>
     <p class="sName"><a><strong>Specialist two</strong></a></p>
     <p class="sAddress">Street address, Town, County, Postcode</p>
     <p>T: 01234 567890<br />F: 01234 567890</p>
     <p class="sCoords">51.50276580000001,-0.0749306999999817,2</p>
  </li>
</ul>

markers.gmap.js

    // initialise variables
    var map;
    var arrMarkers = [];
    var arrInfoWindows = [];
    
    // set up the map with defaults
    function mapInit(){
      var centerCoord = new google.maps.LatLng(52.95, -1);
      var mapOptions = {
        zoom: 6,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      
      // for each list item...
      $('.specialistsGrid li').each(function(i, item){
        $(this).attr('id', i);
        
        var mName = $(this).children('.sName').text();
        var mAddress = $(this).children('.sAddress').html();
        var mCoords = $(this).children('.sCoords').text().split(',');
        
        // split the co-ordinates string and use the values to plot a marker on the map
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(mCoords[0], mCoords[1]),
          map: map,
          title: mName
        });
        
        arrMarkers[i] = marker;

        // add an infowindow as well containing some of the information gathered above
        var infowindow = new google.maps.InfoWindow({
          content: '<p><strong>' + mName + '</strong><br />' + mAddress + '</p>'
        });
        
        arrInfoWindows[i] = infowindow;

        // if a marker is clicked then show the corresponding infowindow
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map, marker);
        });
      });
    }
    
    $(document).ready(function(){
      mapInit();
      
      // little extra goody.
      // if you click on the list item name, the map will switch to the appropriate location and show the corresponding infowindow
      $('.specialistsGrid li .sName a').live('click', function(){
        var i = $(this).parents('li').attr('id');
        // this next line closes all open infowindows before opening the selected one
        for(x=0; x < arrInfoWindows.length; x++){ arrInfoWindows[x].close(); }
        arrInfoWindows[i].open(map, arrMarkers[i]);
      });
    });

Hi,
I'm not able to add google map.I just upload your zip file and i see the follwoing content displaying on the webpage
Specialist one

Street address, Town, County, Postcode

T: 01234 567890
F: 01234 567890

51.50276580000001,-0.0749306999999817,2

Specialist two

Street address, Town, County, Postcode

T: 01234 567890
F: 01234 567890

51.50276580000001,-0.0749306999999817,2.

It is not displaying the map.Please let me know how to display the google map with multiple markers and also if possible to add png markers.

Regards,
John