

// initialise variables
    var map;
    var arrMarkers = [];
    var arrInfoWindows = [];
    
    // set up the map with defaults
    function mapInit(){
      var centerCoord = new google.maps.LatLng(53.82021491611149,-1.560451750878883);
      var mapOptions = {
        zoom: 10,
        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(',');
         var linkurl =  $(this).children('.mlink').text();
        
        
          var image = new google.maps.MarkerImage(
                          '/images/marker2.png',
                          new google.maps.Size(32,32),
                          new google.maps.Point(0,0),
                          new google.maps.Point(10,30)
                        );
       
        
        // 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,
          icon: image,
          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 /><a href="'+linkurl+'">View properties</a></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]);
      });
      
      $('.specialistsGrid').hide();
    });

