Well, it's a large project, one that can get slow on the page if you have more than 20 or so markers.

Most of the time you'll have data in a DB for the locations. One approach is to pull the address data and query the map API for the latitude and longitude, then again for the map markers. Obviously this is very slow and intensive.

The best approach I found is to store the lat/long in the database along side the other relevant data, then you pull that locally from the database and just query the API for the markers. Some starter code (not debugged, for example only:)

// Array of field names you need 
$v = array('name','phone','address','city', 'state','zip','url,'lat','lng'); 
$len = count($v-1); 
// This builds the JS in the next section 
$output = ' 
var markers=[]; 
var infoWindow = new google.maps.InfoWindow; 
var geocoder; 
var map; 
locations_object = [ 
'; 
// 
$total = mysql_num_rows($result); 
$k=0; 
while ($row = mysql_fetch_array($result)) { 
 $j=0; 
 $k++; 
 $output .= ' 
 { 
 '; 
 for ($i=0;$i<=$len;$i++) { 
  $output .= "\t\t'" . $v[$i] . "':'" . $row[$v[$i]] . "'"; 
  $j++; 
  if ($j<$len) { $output .= ','; } 
  $output .= "\n"; 
 } 
 $output .= "\t\t}"; 
 // Add the comma on all but the last "store" array 
 if ($k<$total) { 
 $output .= ", 
 "; 
 } 
} // while 
 $output .= ' 
 ]; 
'; 

Then it's down to the Javascript you output from PHP for the page. It should look something like this:

Create your map element (p, div), in this example, "mymap"
<p id="mymap">One moment, loading map...</p>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
var markers=[]; 
var infoWindow = new google.maps.InfoWindow; 
var geocoder1; 
var map1; 
locations_object = [ 
// you will have one of these for each location 
// be sure to REMOVE the last comma after inner } 
// If the PHP works right, you won't need to worry about it. :-) 
 { 
 'name':'location one', 
 'phone':'1234-5678 ', 
 'address':' the address line', 
 'city':'the city', 
 'state':'CA', 
 'zip':'09201', 
 'url':'the-page-url', 
 'lat':'33.1234567', 
 'lng':'-114.1234567' 
 }, 
 { 
 'name':'location two', 
 'phone':'1234-5678 ', 
 'address':' the address line 2', 
 'city':'the city 2', 
 'state':'CA', 
 'zip':'09201', 
 'url':'the-page-url2', 
 'lat':'32.1234567', 
 'lng':'-113.1234567' 
 } 
 ]; 
 // 
function initialize() { drawMap(); } 
// 
function drawMap () { 
 if (document.getElementById('mymap')) { 
 var latlng = new google.maps.LatLng("32.111111","-114.000111"); 
 var myOptions = { 
 zoom: 9, 
 center: latlng, 
 mapTypeId: google.maps.MapTypeId.ROADMAP 
 } 
 map = new google.maps.Map(document.getElementById('mymap'), myOptions); 
 for (j=0;j<locations_object.length;j++) { 
 createLocations(j,locations_object[j],map); 
 } 
 
 } 
} 
// 
function createLocations(num,store,map) { 
 var myLatlng = new google.maps.LatLng(store["lat"],store["lng"]); 
 var image = new google.maps.MarkerImage('/uri-to/your/gmap-icon.png', 
 new google.maps.Size(28, 39), 
 new google.maps.Point(0,0), 
 new google.maps.Point(0, 39)); 
 var shadow = new google.maps.MarkerImage('/uri-to/your/gmap-shadow.png', 
 new google.maps.Size(51, 28), 
 new google.maps.Point(0,0), 
 new google.maps.Point(-15, 28)); 
 // 
 // These are for the map balloons - apply styles via CSS for this page 
 var html = "<div id=\"info-windows\">"; 
 if (store["name"]) { html += "<h3>"+store["name"]+"</h3>"; } 
 if (store["phone"]) { html+= "<h4>"+store["phone"]+"</h4>"; } 
 if (store["address"] || store["city"] || store["state"] || +store["zip"]) { 
 html += "<p id=\"addr\">"; 
 if (store["address"]) { html += store["address"]+"<br>"; } 
 if (store["city"]) { html += store["city"]; } 
 if (store["state"] || +store["zip"]) { html += ", "; } 
 if (store["state"]) { html += store["state"] + " "; } 
 if (store["zip"]) { html += store["zip"]; } 
 html += "</p>"; 
 } 
 if (store["url"]) { html += "<p><a href=\"/"+store["url"]+"\">Details</a></p>"; } 
 html += "</div>"; 
 markers[num] = new google.maps.Marker({ 
 map: map,  
 position: myLatlng, 
 shadow: shadow, 
 icon: image, 
 }); 
 bindInfoWindow(markers[num], map, infoWindow, html); 
} 
// 
function bindInfoWindow(marker, map, infoWindow, html) { 
 google.maps.event.addListener(marker, "click", function() { 
 infoWindow.setContent(html); 
 infoWindow.open(map, marker); 
 }); 
} 
google.maps.event.addDomListener(window, "load", initialize); 
</script> 

This was taken from a working project and is probably not copy and paste code, but if you pick it apart you can see how it works. I would recommend NOT outputting it inline in the page, create a PHP resource to do this and do

<script type="text/javascript" src="maps.php"></script>