title: Using php with google maps
body: <p>I'm just learning how to use the google maps with info from my database, and i'm having some trouble. I can get the map to appear with no problem, and the info from my database is being pulled correctly in the php page, but i can't seem to call that information in my html page. I'm trying to get little icons to appear on the map at each location in the database, but so far, nothing is appearing other than the google maps box. Any help would be greatly appreciated!</p>
  
  <p><em><strong>googleMap.php</em></strong></p>
  
  <pre><code>&lt;?
  $username="myUsername";
  $password="myPassword";
  $database="myDatabase"; 
  ?&gt; 
  
  &lt;?php
  
  function parseToXML($htmlStr) 
  { 
  $xmlStr=str_replace('&lt;','&amp;lt;',$htmlStr); 
  $xmlStr=str_replace('&gt;','&amp;gt;',$xmlStr); 
  $xmlStr=str_replace('"','&amp;quot;',$xmlStr); 
  $xmlStr=str_replace("'",'&amp;#39;',$xmlStr); 
  $xmlStr=str_replace("&amp;",'&amp;amp;',$xmlStr); 
  return $xmlStr; 
  } 
  
  // Opens a connection to a MySQL server
  $connection=mysql_connect (localhost, $username, $password);
  if (!$connection) {
  die('Not connected : ' . mysql_error());
  }
  
  // Set the active MySQL database
  $db_selected = mysql_select_db($database, $connection);
  if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
  }
  
  // Select all the rows in the markers table
  $query = "SELECT * FROM markers";
  $result = mysql_query($query);
  if (!$result) {
  die('Invalid query: ' . mysql_error());
  } 
  
  // Start XML file, echo parent node
  
  
  // Iterate through the rows, printing XML nodes for each
  while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo 'marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/&gt;';
  }
  ?&gt;
  </code></pre>
  
  <p><strong>googleMap.html</strong></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
  &lt;title&gt;Google Maps AJAX + mySQL/PHP Example&lt;/title&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false"
          type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  
  var customIcons = {
    restaurant: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    bar: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
  };
  
  function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(47.6145, -122.3418),
      zoom: 13,
      mapTypeId: 'roadmap'
    });
    var infoWindow = new google.maps.InfoWindow;
  
    downloadUrl(googleMap.php, function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon,
          shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }
  
  function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
    });
  }
  
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
  
    request.open('GET', url, true);
    request.send(null);
  }
  
  function doNothing() {}
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="load()"&gt;
  &lt;div id="map" style="width: 500px; height: 300px"&gt;&lt;/div&gt;
  /body&gt;
  &lt;/html&gt;
  </code></pre>