function loadmap(mapfile) {
  var map = document.getElementById("mapright");

  if (GBrowserIsCompatible()) {
	
		function formatMarkerContent (i, gmap, mapjson) {
			var input = mapjson.markers[i];
			
			var html    =  "<br />";
			    if(input.image != null) {
			     html    +=  "<img style='padding-bottom:4px;' src=\""+input.image+"\">";
		        }
			   if(input.city != null) {
			    html    +=  "<h2 class='clear-left' id='mytownTitle'><a href=\""+input.link+"\">" + input.city;
				 }
			    html    +=  "</a></h2>";
			    if(input.authorname != null) {
			    html    +=  "<p id='mytownCity'><strong>By:</strong> "+input.authorname+" ";
				}
				if(input.userlink != null) {
				html    += " <span class=\"web\"><a href=\""+input.userlink+"\" target=\"_blank\">[site]</a></span>";
				}
			    if(input.neighborhood != null) {
				html    += "<br /> <strong>Neighborhood</strong> "+input.neighborhood+"";
				}
				if(input.occupation != null) {
				html    += "<br /> <strong>Occupation</strong> "+input.occupation+"";
				}
				html    +=  "</p>";
				html    +=  "<div class=\"place\">";
				if(input.quote != null) {
				html    +=  "<p id='mytownCity'>"+input.quote+"</p>";
				}
				if(input.link != null) {
				html    += " <p><a class=\"more\" href=\""+input.link+"\">Read More >></a></p>";
				}
			return html;
		}
	
		function makeIcon (category) {
			var icon = new GIcon();
			icon.image = "http://microsite.smithsonianmag.com/content/my-kind-of-town/markers/"+category+".png";
			icon.shadow = "http://microsite.smithsonianmag.com/content/my-kind-of-town/markers/shadow.png";
			icon.iconSize = new GSize(18, 30);
			icon.shadowSize = new GSize(30, 30);
			icon.iconAnchor = new GPoint(8, 30);
			icon.infoShadowAnchor = new GPoint(0, 0);
			icon.infoWindowAnchor = new GPoint(5, 1);	
			return icon;
		}
		
		function loadIntro(mapjson){
			document.getElementById("mapcontent").innerHTML = mapjson.intro;
		}
	
	    function loadContent(i, gmap, mapjson) {
			var marker = gmap.getMarkerById(i);
	        var input = mapjson.markers[i];
			var pt = marker.getPoint();
	        gmap.panTo(pt);
	        var content = formatMarkerContent(i, gmap, mapjson);	
	        var mark = gmap.getFirstMarker();
			while (mark != null) {
				mark.hideTooltip(mark);
				mark.setMouseOutEnabled(true);
			    mark = gmap.getNextMarker();
			}
			
		    document.getElementById("mapcontent").innerHTML = content;
		
			marker.showTooltip(marker);
	        if (marker.getMouseOutEnabled()) {
				marker.setMouseOutEnabled(false);
			} else {
		        marker.setMouseOutEnabled(true); // hide after hover
			}
		
	    }
	
		function addtoNav(i, mapjsonmarker, listobj){    
	        var elem=$(i);	
	        var name = mapjsonmarker.authorname;
			var user = mapjsonmarker.username;
			var abbreviation = "on";
	        var city = mapjsonmarker.city;
			
			if (mapjsonmarker.authorname) { 
			namehere = name
			abbreviation = "on"
			} 
			else { 
			namehere = "" 
			abbreviation = ""
			} 
			
            //document.getElementById(listobj).innerHTML +=  '<option value="'+i+'">'+name+'</option>';
			var option = '<option value="' + i + '">'+city+'</option>';
			$j("#artistselector").append(option);		
	    }
	   
		function createMarker(i, gmap) {
		    var input = mapjson.markers[i];
			var marker = new PdMarker(input.point, makeIcon(input.category) );
			marker.setId(i);
			marker.allowLeftTooltips(false);
			marker.setTooltip("<div class='labelframe'><div class='tlabel'><nobr>"+input.city+"</nobr></div></div>");			
		        GEvent.addListener(marker, "click", function() {
				    loadContent(i, gmap, mapjson);
			    });
			return marker;
		}
	
	   function loadMarkers(gmap, mapjson){
		
			MochiKit.Signal.connect('artistselector', 'onchange', function(e) {
			   e.stop();
			   var v= this.options[this.selectedIndex].value;
			   loadContent(v, gmap, mapjson);
			  });
		
			for (var i = 0; i < mapjson.markers.length; i++) {
				
				addtoNav(i, mapjson.markers[i], "artistselector");
				
				if (mapjson.markers[i]) {
				    var marker = createMarker(i, gmap);
				    gmap.addOverlay(marker);
			        //doNavEvents(i, gmap);
		        }
				//if(i == 0){
				    //this will load content for the first point
				    //loadContent(i, gmap, mapjson);
			    //}
		    }
		
		
		   loadIntro(mapjson);
		
		
	   }
	
		function parsemapjson (doc) {		
			var mapjsonData = eval("(" + doc + ")");
			return mapjsonData;		
		}
		
		
	/* ------------------------------------------ */	
	
		GDownloadUrl(mapfile, function(data, responseCode) { 
			mapjson = parsemapjson(data);
			//make map
			var gmap = new GMap2(map);
			gmap.addControl( new GLargeMapControl() );
			gmap.setMapType(G_HYBRID_MAP);
			gmap.addControl( new GMapTypeControl()) ;
			gmap.addControl( new GOverviewMapControl(new GSize(100,100)) );
			
			if(mapjson.focus != null) {
			    var focus = mapjson.focus;
			} else {
				var focus = 2;
			}
			
			gmap.setCenter( mapjson.centerpoint, focus );
			
			loadMarkers(gmap, mapjson);
		});
	
	
  } else {
	alert("Sorry, your browser cannot display Google Maps.");
    }	
	
}