Google Maps: Using JQuery to Display Multiple Addresses

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=..." type="text/javascript"></script>

<div id="myMap"></div>

var map;
// check if browser is compatible with Google Maps
if (GBrowserIsCompatible()) {
        // create map in the 'myMap' div 
	map = new GMap2(document.getElementById('myMap'));
        // add map controls
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
 
        //add default icon
	baseIcon = new GIcon(G_DEFAULT_ICON);
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
}

// create Geocoder client
var geocoder = new GClientGeocoder();
// Stargate SG-1
var lat = 40.730885;
var lng = -73.997383
// use 'map' object that we created above to center the map
map.setCenter(new GLatLng(lat,lng), 15);
// create a point using the latitude and longitude
// we need the point to create a marker
var point = new GLatLng(lat,lng);
var marker = new GMarker(point);
// add marker to overlay
map.addOverlay(marker);
// display latitude and longitude in the display window that appears when a user clicks on the marker
var address = 'Latitude: '+ lat + ', Longitude: ' + lng;
marker.bindInfoWindowHtml('<p style="color:#000; font-size:11px;">'+address+'</p>');

var geocoder = new GClientGeocoder();
// Bob Marley's birth place
var address = 'Nine Mile, Saint Ann Parish, Jamaica, West Indies';
geocoder.getLatLng(
	address,
	function(point) {
       		if (!point) {
       			alert(address + " not found");
       		} else {
			map.setCenter(point, 15);
                        // call createMarker function
			map.addOverlay(createMarker(address, point, 1));
       		}
	}
);
// createMarker function
// Needs the address, the point returned from geocoder.getLatLang, 
// and an index needed for multiple markers
function createMarker(address, point, index) {
	  // Create a lettered icon for this point using our icon class
	  var letter = String.fromCharCode("A".charCodeAt(0) + index);
	  var letteredIcon = new GIcon(baseIcon);
	  letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
 
	  // Set up our GMarkerOptions object
	  markerOptions = { icon:letteredIcon };
          // Create marker
	  var marker = new GMarker(point, markerOptions);
	  marker.bindInfoWindowHtml('<p style="color:#000; font-size:11px;">'+address+'</p>');	
         // return the marker
	  return marker;
}

$json = '[';
   	$json .= '{"address": "Capitol Building, Washington, DC"},';
	$json .= '{"address": "Constitution Ave NW & 15th St NW Washington, DC 20024"},';
	$json .= '{"address": "17th St NW & Independence Ave Washington, DC 20006"},';
	$json .= '{"address": "Lincoln Memorial Cir SW Washington, DC 20037"},';
	$json .= '{"address": "Constitution Ave NW & Henry Bacon Dr NW Washington, DC 20001"}';
	$json .= ']';
	echo $json;

// Create GeoCoder Client
var geocoder = new GClientGeocoder();
// aLatLng is an array that will store all values in the imLatLngs <a href="http://grasshopperpebbles.com/javascript/the-javascript-object/" target="_blank">Javascript Object</a>
var aLatLng = new array();
function imLatLngs(lat, lng) {
	this.lat = lat;
	this.lng = lng;
}

// the php file
var url = 'washingtondc.php';
// call my standard ajax function. Once the data is retrieved, call the <strong>getLatLngs</strong> function
doAjax('GET', url, '', '', getLatLngs);
 
// my standard function
function doAjax(t, u, d, fnBefore, fnSuccess) {
	$.ajax({
		type: t,
		url: u,
		data: d,
		dataType: 'text',
		beforeSend: fnBefore, 
		success: fnSuccess
 	}); //close $.ajax(
};
 
// on success, call <strong>getLatLngs</strong>
function getLatLngs(response) {
        // get the number of addresses. This value is used to let the getAdrLocations know
        // that all the addresses have been loaded
        adr_cnt  = address.length;
 
        // loop through each address
        $.each(response, function(i, itm) {
                // call the getAdrLocations function
		getAdrLocation(itm.address, adr_cnt, i);
	});
}
 
function getAdrLocation(adr, adr_cnt, cnt) {
        // call google maps getLocations method
	geocoder.getLocations(adr, function(response) {
		if (!response || response.Status.code != 200) {
	    		alert("Sorry, we are unable to gecode address: " + adr);
	  	} else { 
                        // see <strong>Note</strong> regarding getLocations response
		    	var place = response.Placemark[0];
 
                        // store latitude and longitude in array
                        // see http://grasshopperpebbles.com/javascript/the-javascript-object/
			aLatLng[cnt] = new imLatLngs(place.Point.coordinates[1], place.Point.coordinates[0]);
 
                        // if the array length is equal the total items in the json object
			if (aLatLng.length == adr_cnt) {
				mapAddress();
			}
	  	}
	});
}
 
function mapAddress() {
       //set bounds	
	bounds = new GLatLngBounds();
	$.each(aLatLng, function(i, itm){
	    	bounds.extend(new GLatLng(itm.lat, itm.lng));
        });
	var latSpan = bounds.toSpan().lat();
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	var newBounds = map.getBounds();
	var newLatSpan = newBounds.toSpan().lat();
	if (latSpan/newLatSpan > .90) { map.zoomOut(); }
 
	$.each(aLatLng, function(i, itm) {
		var point = new GLatLng(itm.lat, itm.lng);
		var marker = new GMarker(point);
                map.addOverlay(marker);
	});	
}

bounds = new GLatLngBounds();
$.each(aLatLng, function(i, itm){
    	bounds.extend(new GLatLng(itm.lat, itm.lng));
});

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

$.each(aLatLng, function(i, itm) {
	var point = new GLatLng(itm.lat, itm.lng);
	var marker = new GMarker(point);
        map.addOverlay(marker);
});