title: use Google map with php and mysql to display locations
body: <p>i have a map page that include a Google map  to display  users static  locations using the php and mysql  because the <strong>longitude and lattitude</strong> are stored in the database in <strong>village table</strong>  but the <strong>village id</strong> is in the a foreign key in the user table so i used the <strong>INNER join</strong><br>
  but the problem is that the browser do not show anything  can  anyone help me ???</p>
  
  <h1>map.php</h1>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta name="keywords" content="" /&gt;
  &lt;meta name="description" content="" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;&lt;?php print "$firstname $lastname"; ?&gt;&lt;/title&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' /&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' /&gt;
  &lt;link href="default.css" rel="stylesheet" type="text/css" media="all" /&gt;
  &lt;!--[if IE 6]&gt;
  &lt;link href="default_ie6.css" rel="stylesheet" type="text/css" /&gt;
  &lt;![endif]--&gt;
  
  &lt;script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
              #map {
      width: 850px;
      height: 500px;
      border: 0px;
      padding: 0px;
      position: absolute;
      top: 76px;
      left: 253px;
  }
  &lt;/style&gt;
  &lt;script src="http://maps.google.com/maps/api/js?key=AIzaSyC9YBiNmZG9jIWY32FzJwn92iuJtJZHjfc&amp;sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   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 lattitude, longiude FROM user u 
                        INER JOIN village v
                         ON u.village = v.id")or die(mysql_error());
  while($row = mysql_fetch_array($query))
  {
   // $name = $row['user_name'];
    $lat = $row['lattitude'];
    $lon = $row['longitude'];
    //$desc = $row['desc'];
  //'&lt;b&gt;$name&lt;/b&gt;
  
  
    echo("addMarker($lat, $lon &lt;br /&gt;');\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;?php  /*require_once('header.php');*/ ?&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="page-wrapper"&gt;
        &lt;div id="page"&gt;
              &lt;div id="wide-content"&gt;
                &lt;div id="map"&gt;&lt;/div&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;?php /*require_once('footer.php');*/ ?&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>databse stucture</h1>
  
  <p>village table:</p>
  
  <ul>
  <li>id</li>
  <li>village_name</li>
  <li>district_id</li>
  <li>lattitude</li>
  <li>longitude</li>
  </ul>
  
  <p>user table:</p>
  
  <ul>
  <li>user_id</li>
  <li>first_name</li>
  <li>last_name</li>
  <li>governorate</li>
  <li>district</li>
  <li>village</li>
  <li>birth_date</li>
  <li>email_address</li>
  <li>specialization</li>
  <li>user_name</li>
  <li>password</li>
  <li>interest</li>
  <li>registered_date</li>
  <li>last_log_date</li>
  </ul>