$(document).ready(function() {
  var map = new GMap2(document.getElementById('map_canvas'));
  map.setCenter(new GLatLng(lat, lng), zoom);
  map.setUIToDefault();
  map.disableScrollWheelZoom();
  evaled = false;
  
  /*
  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();
    if (!markersurl) {  
      $('#map_load_indicator').hide();
      parseJson(doc, false); 
    }
    else {
      map.clearOverlays();
      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_load_indicator').hide();
          parseJson(data, true);
      });
    }
  }
  
  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: 120px; overflow: auto; width:200px; margin-right:10px">' + input.info + '</div>');
      opened = marker;
    });
    return marker;
  }
  
  function parseJson (doc, evalit) {
    bounds = new GLatLngBounds();
    evaled = true;
    
    if (evalit) {
      var jsonData = eval('(' + doc + ')');
    }
    else {
      var jsonData = doc;
    }
    
    if (jsonData.markers) {
      for (var i = 0; i < jsonData.markers.length; i++) {
        bounds.extend(jsonData.markers[i].point);
        var marker = createMarker(jsonData.markers[i]);
        map.addOverlay(marker);
      }
    }
  }
  

  // === Circle ===
  //var point = new GLatLng(52.5097308, 5.4776243);
  //map.addOverlay(GPolygon.Circle(point,30000,"#00ff00",3,.8,"#00ff00",0.5));
  loadSpotsInBounds();

  if (evaled) {
    map.setZoom(map.getBoundsZoomLevel(bounds));
    map.setCenter(bounds.getCenter());
  }  
});