title: php + mysql + google map
body: <p>i am using google map to create a dynamic google map that take locations(lat, lon) stored in the database using php mysql and display the selected locations by markers on the map 
    but the problem is that i get the map displayed with a blue color without anything else 
  if anyone can help me i will appreciate that </p>
  
  <h1>map.php</h1>
  
  <pre><code>&lt;?php
  $conn = mysql_connect("localhost", "****", "*****") or die(mysql_error());
  mysql_select_db("map") or die(mysql_error());
  ?&gt;
  
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;
          &lt;title&gt;Google Maps&lt;/title&gt;
          &lt;style type="text/css"&gt;
              body { font: normal 10pt Helvetica, Arial; }
              #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
          &lt;/style&gt;
          &lt;script src="http://maps.google.com/maps/api/js?key=mykey&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              //Sample code written by August Li
              var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                         new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                         new google.maps.Point(16, 32));
              var center = null;
              var map = null;
              var currentPopup;
              var bounds = new google.maps.LatLngBounds();
              function addMarker(lat, lng, info) {
                  var pt = new google.maps.LatLng(lat, lng);
                  bounds.extend(pt);
                  var marker = new google.maps.Marker({
                      position: pt,
                      icon: icon,
                      map: map
                  });
                  var popup = new google.maps.InfoWindow({
                      content: info,
                      maxWidth: 300
                  });
                  google.maps.event.addListener(marker, "click", function() {
                      if (currentPopup != null) {
                          currentPopup.close();
                          currentPopup = null;
                      }
                      popup.open(map, marker);
                      currentPopup = popup;
                  });
                  google.maps.event.addListener(popup, "closeclick", function() {
                      map.panTo(center);
                      currentPopup = null;
                  });
              }           
              function initMap() {
                  map = new google.maps.Map(document.getElementById("map"), {
                      center: new google.maps.LatLng(0, 0),
                      zoom: 14,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      mapTypeControl: true,
                      mapTypeControlOptions: {
                          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                      },
                      navigationControl: true,
                      navigationControlOptions: {
                          style: google.maps.NavigationControlStyle.ZOOM_PAN
                      }
                  });
  &lt;?php
  $query = mysql_query("SELECT * FROM poi_example")or die(mysql_error());
  while($row = mysql_fetch_array($query))
  {
    $name = $row['name'];
    $lat = $row['lat'];
    $lon = $row['lon'];
    $desc = $row['desc'];
  
  
  
    echo("addmarker($lat, $lon, '&lt;b&gt;$name&lt;/b&gt;&lt;br /&gt;$desc');\n");
  
  }
  
  ?&gt;
   center = bounds.getCenter();
       map.fitBounds(bounds);
  
       }
       &lt;/script&gt;
       &lt;/head&gt;
       &lt;body onload="initMap()" style="margin:0px; border:0px; padding:0px;"&gt;
       &lt;div id="map"&gt;&lt;/div&gt;
       &lt;/body&gt;
       &lt;/html&gt;
  </code></pre>
  
  <h1>     the database is</h1>
  
  <pre><code>CREATE TABLE IF NOT EXISTS `poi_example` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` text NOT NULL,
    `desc` text NOT NULL,
    `lat` text NOT NULL,
    `lon` text NOT NULL,
    PRIMARY KEY (`id`)
  ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
  
  --
  -- Dumping data for table `poi_example`
  --
  
  INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`) VALUES
  (1, '100 Club', 'Oxford Street, London  W1&amp;lt;br/&amp;gt;3 Nov 2010 : Buster Shuffle&amp;lt;br/&amp;gt;', '51.514980', '-0.144328'),
  (2, '93 Feet East', '150 Brick Lane, London  E1 6RU&amp;lt;br/&amp;gt;7 Dec 2010 : Jenny &amp;amp; Johnny&amp;lt;br/&amp;gt;', '51.521710', '-0.071737'),
  (3, 'Adelphi Theatre', 'The Strand, London  WC2E 7NA&amp;lt;br/&amp;gt;11 Oct 2010 : Love Never Dies', '51.511010', '-0.120140'),
  (4, 'Albany, The', '240 Gt. Portland Street, London  W1W 5QU', '51.521620', '-0.143394'),
  (5, 'Aldwych Theatre', 'Aldwych, London  WC2B 4DF&amp;lt;br/&amp;gt;11 Oct 2010 : Dirty Dancing', '51.513170', '-0.117503'),
  (6, 'Alexandra Palace', 'Wood Green, London  N22&amp;lt;br/&amp;gt;30 Oct 2010 : Lynx All-Nighter', '51.596490', '-0.109514');
  </code></pre>