title: php mysql calculate distance between 2 points
body: <p>I have a map page  that contains a Google map and a form to calculate the distance between two selected points from the database, but I don't know how to calculate the distance between two locations using PHP or AJAX and jQuery.</p>
  
  <p>I have a village table that contains: </p>
  
  <ul>
  <li>id</li>
  <li>village_name</li>
  <li>latitude</li>
  <li>longitude</li>
  </ul>
  
  <p>This is what I have in my code so far:</p>
  
  <h1>map.php</h1>
  
  <pre><code>&lt;?php require_once('include/connect.php'); ?&gt;
  &lt;?php
  session_start();
  
     if(isset($_SESSION['login']) != 'true'){
          header("location: index.php");
  
          var_dump( $_SESSION['login']);
      }
  
  
     $login = ($_SESSION['login']);
     $userid = ($_SESSION['user_id']);
     $login_user = ($_SESSION['username']);
     $fname = ($_SESSION['first_name']);
     $lname = ($_SESSION['last_name']);
  ?&gt;
  &lt;?php require_once('header.php'); ?&gt;
  
  &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;Lam_El_Chamel&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;style type="text/css"&gt;
              body { font: normal 10pt Helvetica, Arial; }
              #map { width: 850px; height: 500px; border: 0px; padding: 0px;left:0px;;}
              #calculate-distance-form{position:absolute; top:600px; right:-120px; width:570px; height:200;}
          &lt;/style&gt;
          &lt;script src="http://maps.google.com/maps/api/js?key=AIzaSyAcdPXDgq5V8wmTiJedTBXGqIhzq8XdKdc&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 * FROM location")or die(mysql_error());
  while($row = mysql_fetch_array($query))
  {
    $name = $row['user_name'];
    $lat = $row['lattitude'];
    $lon = $row['longitude'];
    //$desc = $row['desc'];
  
  
  
    echo("addMarker($lat, $lon, '&lt;b&gt;$name&lt;/b&gt;&lt;br /&gt;');\n");
  
  }
  
  ?&gt;
   center = bounds.getCenter();
       map.fitBounds(bounds);
  
       }
       &lt;/script&gt;
       &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
              $("select#location2").attr("disabled","disabled");
               $("select#location1").change(function(){
                id = $(this).val();
              $("select#location2").attr("disabled","disabled");
              $("select#location2").html("&lt;option&gt;wait...&lt;/option&gt;");
              $.post("select_location.php", {id:id}, function(data){
              $("select#location2").removeAttr("disabled");
              $("select#location2").html(data);
           });
          });
        });
       &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body onload="initMap()" style="margin:0px; border:0px; padding:0px;"&gt;
  
  
  
  &lt;div id="wrapper"&gt;
      &lt;div id="page-wrapper"&gt;
          &lt;div id="page"&gt;
              &lt;div id="wide-content"&gt;
                  &lt;h2&gt;Map Border .....See Your Location with Google Map&lt;/h2&gt; 
                  &lt;div id="map"&gt;&lt;/div&gt;
                  &lt;div id="calculate-distance-form"&gt;
                  &lt;?php require_once('include/select.class.php'); ?&gt;
                     &lt;form action="calculate_distance.php" method="post"&gt;
                     Location one:
               &lt;select id="location1" name="pt1"&gt;
                           &lt;?php echo $opt-&gt;Showlocation() ?&gt;
                        &lt;/select&gt;&lt;br /&gt;
                                 &lt;br /&gt;
  
                Location two:
               &lt;select id="location2" name="pt2"&gt;
                            &lt;option value="0"&gt;choose...&lt;/option&gt;
                        &lt;/select&gt;&lt;br /&gt;
                                 &lt;br /&gt;
  
                        &lt;input type="submit" name="calculate" value="Calculate Distance" /&gt;
                  &lt;/form&gt;
                     &lt;!--
                     First Location&lt;br /&gt;
                     &lt;input type="text" name="lat1" placeholder="first Latitude" /&gt;
                     &lt;input type="text" name="lon1" placeholder="first longitude"/&gt;&lt;br /&gt;
                     Second Location&lt;br /&gt;
                     &lt;input type="text" name="lat2" placeholder="second latitude" /&gt;
                     &lt;input type="text" name="lon2" placeholder="second longitude"/&gt;&lt;br /&gt;
                     &lt;input type="submit" name="calculate-distance" value="Calculate Distance" /&gt;
                    --&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>