// Build variables that we'll need later
var map;
var marker;

// This is what shows up inside our location's info bubble
var WINDOW_HTML = '<strong style="position:relative; top:5px;">The Thoracic Group</strong><form target="_blank" class="wizardpush" id="dirfrm" action="http://maps.google.com/maps">\n<input type="hidden" name="lsm" value="1" />\n<input type="hidden" value="35 Clyde Rd, Somerset, NJ 08873" name="daddr"/>\n<input type="hidden" name="geocode" value=""/>\n<br/><strong>Get Directions</strong><br/>\n<label for="saddr">Start address:</label>\n<div>\n<input type="text" class="inptsmall" id="iwdiraddr" name="saddr" value="" />\n<input type="submit" value="Go" />\n</div>\n</form>';

// Everything inside $(document).ready(function() {...}); runs as soon as the page loads. 	
$(document).ready(function() {
	$('#map').css({width: "300px", height: "300px"});
	
	// This is the code that actually inserts the map:
	if (GBrowserIsCompatible()) {
		// Build a map object in the div with id="map"
		map = new GMap2(document.getElementById('map'));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(40.487807, -74.510093), 11); // coordinates and zoom level
		
		// Add a marker at our address's coordinates
		marker = new GMarker(new GLatLng(40.487807, -74.510093));
		map.addOverlay(marker);
		
		// Show the marker's info bubble when page loads and also when the marker is clicked
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(WINDOW_HTML);
		});
		marker.openInfoWindowHtml(WINDOW_HTML);
	}
});

$(document.body).unload(function() {
	if (GBrowserIsCompatible()) {
		GUnload();
	}
});