Want more features on Pastebin? Sign Up, it's FREE!
Guest

Google Maps

By: a guest on Mar 16th, 2013  |  syntax: HTML  |  size: 3.24 KB  |  views: 42  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  7. <style>
  8. #map-canvas {height:500px;width:500px;}
  9. </style>
  10. </head>
  11. <body onload="initialize()">
  12. <?php
  13. include "db.php";
  14.  
  15. $query = mysql_query("SELECT latitude, longitude FROM tbl_users WHERE username='Admin'") or die(mysql_error());
  16.  
  17. while($row = mysql_fetch_array($query))
  18. {
  19.  $lat = $row['latitude'];
  20.  $long = $row['longitude'];
  21. }
  22. ?>
  23. <div id="map-canvas"></div>
  24. <div>
  25. <b>Start: </b>
  26. <select id="start" onchange="calcRoute();">
  27.   <option value="">Home </option>
  28.   <option value="chicago, il">Chicago</option>
  29.   <option value="st louis, mo">St Louis</option>
  30.   <option value="joplin, mo">Joplin, MO</option>
  31.   <option value="oklahoma city, ok">Oklahoma City</option>
  32.   <option value="amarillo, tx">Amarillo</option>
  33.   <option value="gallup, nm">Gallup, NM</option>
  34.   <option value="flagstaff, az">Flagstaff, AZ</option>
  35.   <option value="winona, az">Winona</option>
  36.   <option value="kingman, az">Kingman</option>
  37.   <option value="barstow, ca">Barstow</option>
  38.   <option value="san bernardino, ca">San Bernardino</option>
  39. </select>
  40. <b>End: </b>
  41. <select id="end" onchange="calcRoute();">
  42.   <option value="chicago, il">Chicago</option>
  43.   <option value="st louis, mo">St Louis</option>
  44.   <option value="joplin, mo">Joplin, MO</option>
  45.   <option value="oklahoma city, ok">Oklahoma City</option>
  46.   <option value="amarillo, tx">Amarillo</option>
  47.   <option value="gallup, nm">Gallup, NM</option>
  48.   <option value="flagstaff, az">Flagstaff, AZ</option>
  49.   <option value="winona, az">Winona</option>
  50.   <option value="kingman, az">Kingman</option>
  51.   <option value="barstow, ca">Barstow</option>
  52.   <option value="san bernardino, ca">San Bernardino</option>
  53. </select>
  54. </div>
  55. <input type="text" value="<?php echo $lat; ?>" name="lat" />
  56. <input type="text" value="<?php echo $long; ?>" name="long" />
  57.  <script>
  58.   var directionDisplay;
  59.   var directionsService = new google.maps.DirectionsService();
  60.   var map;
  61.   var lat = document.getElementById('lat').value;
  62.   var long = document.getElementById('long').value;
  63.  
  64.   function initialize() {
  65.     directionsDisplay = new google.maps.DirectionsRenderer();
  66.     var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  67.     var home = new google.maps.LatLng(lat, long); //this is for the value in the database
  68.     var mapOptions = {
  69.       zoom:7,
  70.       mapTypeId: google.maps.MapTypeId.ROADMAP,
  71.       center: home
  72.     }
  73.     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  74.     directionsDisplay.setMap(map);
  75.   }
  76.  
  77.   function calcRoute() {
  78.     var start = document.getElementById('start').value;
  79.     var end = document.getElementById('end').value;
  80.     var request = {
  81.         origin:start,
  82.         destination:end,
  83.         travelMode: google.maps.DirectionsTravelMode.DRIVING
  84.     };
  85.     directionsService.route(request, function(response, status) {
  86.       if (status == google.maps.DirectionsStatus.OK) {
  87.         directionsDisplay.setDirections(response);
  88.       }
  89.     });
  90.   }
  91. </script>
  92. </body>
  93. </html>
clone this paste RAW Paste Data