//<![CDATA[
    if (GBrowserIsCompatible()) {
      // Display the map, with some controls
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      //map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(38.5625,-95.677068),4);
      GEvent.addListener(map, 'zoomend', function() { map.closeInfoWindow(); });  

		//add loading box
		var html_loading='<div style="background-color:transparent; border:solid 1px black; width:300px"><div style="background-color:white; border:solid 1px grey; padding:2ex; margin:1px; font-weight:bold; font-size:24px; text-align:center">Map Loading...</div></div>';
		loadingMessage=new HtmlControl(html_loading);
		map.addControl(loadingMessage, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(275, 152)));

		//add reset button
		var reset_html='<div style="width: 72px; background-color:#AFC6E9; border:solid 1px grey; padding:2px; margin:0px; font-size:10px; text-align:center"><a href="javascript:map.returnToSavedPosition()">reset map</a></div>';
		resetMessage=new HtmlControl(reset_html);
		map.addControl(resetMessage, new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(4, 0)));

		//add cloud view button
		var cloud_html='<div style="width: 100px; background-color:#fff; border:solid 1px grey; padding:2px; margin:0px; font-size:10px; text-align:center"><a href="cloud.php"><span style="color:red"><i><b>NEW</b></i></span> <b>go to word cloud view</b></a></div>';
		cloudMessage=new HtmlControl(cloud_html);
		map.addControl(cloudMessage, new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(4, 0)));

		//add legend 
		//var legend_html='<div style="width: 240px; background-color:white; border:solid 1px grey; padding:2px; margin:0px; font-size:10px; text-align:center">Map of Physicians\' Health Reform Thoughts</div>';
		//legendMessage=new HtmlControl(legend_html);
		//map.addControl(legendMessage, new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(8, 0)));

		//define normal icon
		var normalIcon=new GIcon();
		normalIcon.image='marker_hex.php3.png';
		normalIcon.iconSize=new GSize(12, 20);
		normalIcon.iconAnchor=new GPoint(6, 20);
		normalIcon.infoWindowAnchor=new GPoint(6, 1);


 	//what happens when you click on a cluster
	function myClusterClick(args) {
		cluster.defaultClickAction=function(){
			map.setCenter(args.clusterMarker.getLatLng(), map.getBoundsZoomLevel(args.clusterMarker.clusterGroupBounds))
			delete cluster.defaultClickAction;
		}
		var html='<div id="zoombubble"><a href="javascript:void(0)" onclick="cluster.defaultClickAction()"><strong>Zoom</strong></a> in to show these '+args.clusteredMarkers.length+' doctors:<br><br>';
		for (i=0; i<args.clusteredMarkers.length; i++) {
			html+='<a href="javascript:cluster.triggerClick('+args.clusteredMarkers[i].index+')">'+args.clusteredMarkers[i].getTitle()+'</a><br />';
		}
		html+='</div>';
		//	args.clusterMarker.openInfoWindowHtml(html);
		map.openInfoWindowHtml(args.clusterMarker.getLatLng(), html);
	}
		
	//	create a ClusterMarker
	cluster=new ClusterMarker(map, {clusterMarkerTitle:'Click to see info about %count locations' , clusterMarkerClick:myClusterClick, fitMapMinZoom:4 });



      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var maxs = [];
      var i = 0;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,max) {
        var marker = new GMarker(point, {icon:normalIcon, title:name});

        GEvent.addListener(marker, "click", function() {
          //marker.openInfoWindowHtml(html,{maxContent:max});
          marker.openInfoWindowHtml(max);
	
        });

        // save the info we need to use later for the side_bar
        gmarkers.push(marker);
        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // ================================================================
      process_it = function(doc) {
        var jsonData = eval('(' + doc + ')');
        
        for (var i=0; i<jsonData.markers.length; i++) {
          var marker = createMarker(jsonData.markers[i].point, jsonData.markers[i].label, jsonData.markers[i].html, jsonData.markers[i].maxContent);
        }
                cluster.removeMarkers();
		cluster.addMarkers(gmarkers);
                cluster.fitMapToMarkers();
		map.removeControl(loadingMessage);
		loadingMessage=null;
      }          

      GDownloadUrl("./cgi-bin/create_simple_json.pl", process_it);
      // ================================================================


      //then add points outside continental USA
      function createDistantMarker(point,name,html,max) {
        	var marker = new GMarker(point, {icon:normalIcon, title:name});
	        GEvent.addListener(marker, "click", function() {
	          marker.openInfoWindowHtml(max);
      });
        // save the info we need to use later for the side_bar
        return marker;
      }

      process_it2 = function(doc) {
        // === Parse the JSON document === 
        var jsonData2 = eval('(' + doc + ')');
        
        // === Plot the markers ===
        for (var i=0; i<jsonData2.markers.length; i++) {
          var marker = createDistantMarker(jsonData2.markers[i].point, jsonData2.markers[i].label, jsonData2.markers[i].html, jsonData2.markers[i].maxContent);
		map.addOverlay(marker);
        }

      }          
      // === Fetch the JSON data file ====    
      GDownloadUrl("./cgi-bin/create_simple_json2.pl", process_it2);
    }

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