if (GBrowserIsCompatible()) {
  $(document).ready(function() {

    $('#mapContent').width( $(window).width() - 2 );
    $('#map').width( $('#mapContent').innerWidth( {margin: true} ) - $('#sub_nav').outerWidth() - 15 );

    $(window).resize( function(){
      $('#mapContent').width( $(window).width() - 2 );
      $('#map').width( $('#mapContent').innerWidth( {margin: true} ) - $('#sub_nav').outerWidth() - 15 );
    });

    var smallIcon = new GIcon();
        smallIcon.image = "images/mm_20_purple.png";
        smallIcon.shadow = "images/shadow50.png";
        smallIcon.iconSize = new GSize(20, 20);
        smallIcon.shadowSize = new GSize(31, 20);
        smallIcon.iconAnchor = new GPoint(10, 10);
        smallIcon.infoWindowAnchor = new GPoint(10, 10);
        //smallIcon.infoShadowAnchor = new GPoint(10, 15);

      // === Create an associative array of GIcons() ===
    var gicons = [];
      gicons["vroom"] = new GIcon(smallIcon, "/images/map/vroom_20.gif");
      gicons["vroom"].shadow = "/images/map/shadow-vroom_20.png";
      
      gicons["farout"] = new GIcon(smallIcon, "/images/map/farout_20.gif");
      gicons["farout"].shadow = "/images/map/shadow-farout_20.png";
      
      gicons["neodoowop"]  = new GIcon(smallIcon, "/images/map/neodoowop_20.gif");
      gicons["neodoowop"].shadow = "/images/map/shadow-neodoowop_20.png";
      
      gicons["nondoowop"]  = new GIcon(smallIcon, "/images/map/nondoowop_20.gif");
      gicons["nondoowop"].shadow = "/images/map/shadow-nondoowop_20.png";
      
      gicons["shorething"]  = new GIcon(smallIcon, "/images/map/shorething_20.gif");
      gicons["shorething"].shadow = "/images/map/shadow-shorething_20.png";
      
      gicons["earlydoowop"]  = new GIcon(smallIcon, "/images/map/earlydoowop_20.gif");
      gicons["earlydoowop"].shadow = "/images/map/shadow-earlydoowop_20.png";
      
      gicons["phonycolonee"]  = new GIcon(smallIcon, "/images/map/phonycolonee_20.gif");
      gicons["phonycolonee"].shadow = "/images/map/shadow-phonycolonee_20.png";
      
      gicons["modernblastoff"]  = new GIcon(smallIcon, "/images/map/modernblastoff_20.gif");
      gicons["modernblastoff"].shadow = "/images/map/shadow-modernblastoff_20.png";
      
      gicons["polynesiantiki"]  = new GIcon(smallIcon, "/images/map/polynesiantiki_20.gif");
      gicons["polynesiantiki"].shadow = "/images/map/shadow-polynesiantiki_20.png";
      
      gicons["chinatownrevival"]  = new GIcon(smallIcon, "/images/map/chinatownrevival_20.gif");
      gicons["chinatownrevival"].shadow = "/images/map/shadow-chinatownrevival_20.png";

    var city_center =  new Object;
    city_center.North_Wildwood = new GLatLng(38.999476,-74.79857);
    city_center.Wildwood = new GLatLng(38.988035,-74.819040);
    city_center.Wildwood_Crest = new GLatLng(38.970754,-74.837408);
    city_center.Diamond_Beach = new GLatLng(38.959175,-74.852428);
    city_center.all_cities = new GLatLng(38.9865,-74.8214); // Default to City Hall as center of map

    var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GOverviewMapControl());
      if (search_term == "") { map.setCenter(new GLatLng(map_lat,map_lon), 16);}
        else{ map.setCenter( new GLatLng(38.9865,-74.8214), 14 ); }
      var dwhd = new GGeoXml("http://wildwooddoowop.com/ajax/dwhd-poly.kml");  //KML file of Doo Wop Historic District overlay  SAME-SITE RESTTRICTIONS!!!  MUST CHANGE TO wildwooddoowop.com AT "LEISURE --> DOOWOP" TRANSFER!!!!!!
      map.addOverlay(dwhd); // place the Doo Wop Historic District on the map

    // function to build the query for map.xml bounds
    function areaQuery() {
      var center = map.getCenter();
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      var area_query = "neLat="+northEast.lat()+"&neLon="+northEast.lng()+"&swLat="+southWest.lat()+"&swLon="+southWest.lng()+"&lat="+center.lat()+"&lon="+center.lng()+"&zoom="+map.getZoom();
      return area_query;
    }
    
    // A function to create the marker and set up the event window
    function createMarker(point,name,html,style_icon,id) {
      var marker = new GMarker(point,{icon: gicons[style_icon], title: name});
      GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html); });
      return marker;
    }

    // update the dynamic links and place the markers on the map
  	function updateMap() {
      $('#g_e_link').attr("href", function() { return "/data/map.kml?f="+filter+"&s="+search_term+"&"+areaQuery(); } ) // update the "View in Google Earth" Link
      map.clearOverlays();
      map.addOverlay(dwhd);  //overlays the Doo Wop Historic District polygon
      loadMarkers();
    }

    // show loading message and place the markers on the map
    function loadMarkers() {
      $('#loading_msg').html('<img src="/images/sm_red_loader.gif" alt="" />&nbsp;Loading...');
      setTimeout(showMarkers,10);
    }

    //read the markers from xml file and put them on the map
  	function showMarkers() {
      GDownloadUrl("/data/map.xml?f="+filter+"&s="+search_term+"&"+areaQuery(), function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
          var icon = markers[i].getAttribute("icon");
          var html = GXml.value(markers[i].getElementsByTagName("description")[0]);
          var label = markers[i].getAttribute("name");
          var id = markers[i].getAttribute("id");
          var marker = createMarker(latlng,label,html,icon,id);
          map.addOverlay(marker);
          if (id == map_id) { map.openInfoWindowHtml(latlng,html) };
        }
      });
      $('#loading_msg').html('');
    }

    $('#g_e_link').attr("href", function() { return "/data/map.kml?f="+filter+"&s="+search_term+"&"+areaQuery();} )
    loadMarkers(); // place the markers on the map
    GEvent.addListener(map, "dragend",  updateMap);
    GEvent.addListener(map, "zoomend",  updateMap);

  });

} else { alert("Sorry, the Google Maps API is not compatible with this browser");}