$(document).ready(function() {
  var map = new GMap2(document.getElementById('map_canvas'));
  map.setCenter(new GLatLng(lat, lng), zoom);
  map.setUIToDefault();
  map.disableScrollWheelZoom();
  
  /*
  var mt = map.getMapTypes();
  //overwrite the getMinimumResolution() and getMaximumResolution() methods
  for (var i=0; i<mt.length; i++) {
    mt[i].getMinimumResolution = function() {return 10;}
    mt[i].getMaximumResolution = function() {return 16;}
  }
 */
 //custom icon
  var tinyIcon = new GIcon();
  tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
  tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  tinyIcon.iconSize = new GSize(12, 20);
  tinyIcon.shadowSize = new GSize(22, 20);
  tinyIcon.iconAnchor = new GPoint(6, 20);
  tinyIcon.infoWindowAnchor = new GPoint(5, 1);
  
  // Set up our GMarkerOptions object
  markerOptions = { icon:tinyIcon };
  
  function loadSpotsInBounds()
  {        
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var leftUp    = northEast.lat();
    var leftDown  = northEast.lng();
    
    $('#map_load_indicator').show();
    url = markersurl + "?sw_lat="+southWest.lat()+"&sw_lng="+southWest.lng()+"&ne_lat="+northEast.lat()+"&ne_lng="+northEast.lng();
    if ((typeof(activity_type) != 'undefined')) {
      url = url + "&activity_type=" + activity_type;
    }
    GDownloadUrl(url, function(data, responseCode) {
      map.clearOverlays();
      //map.removeOverlay();
      //if (map.getZoom() > 9) {
        $('#map_load_indicator').hide();
        parseJson(data);
      //}
      //else {
      //  $('#map_load_indicator').hide();
      //}
    });
  }
  
  GEvent.addListener(map, "moveend", function() {
    if (!map.getInfoWindow().isHidden()) {
      return;
    } 

    loadSpotsInBounds();
  });
  
  function createMarker(input) {
    var marker = new GMarker(input.point, markerOptions);
    GEvent.addListener(marker, "click" , function() {
      marker.openInfoWindowHtml( '<div style="max-height: 155px; overflow: auto; width:350px; margin-right:10px">' + input.info + '</div>');
      opened = marker;
    });
    return marker;
  }
  
  function parseJson (doc) {
    var jsonData = eval('(' + doc + ')');
    for (var i = 0; i < jsonData.markers.length; i++) {
      var marker = createMarker(jsonData.markers[i]);
      map.addOverlay(marker);
      }
    }
  loadSpotsInBounds();
});