Jump to content

Google Map Driving Distances


gazever

Recommended Posts

Hi I have a list of places of interest which I have their Lat & Lon for, I also have another list of villas of which I'd like to calculate the driving distances between the items.

 

I can output a map with the directions from one point to another, but could I just output the distances between points as a list rather than the directions. Or can I capture the javascript variable and enter into a database to retrive with php to output a list of distances.

 

What id like to achive is something like

Distance to Disney: 2 miles

Distance to Seaworld: 4 miles

Distance to Kennedy Space Center: 15 miles.. etc.

 

Or would I have to manually query every villa for every item and then enter it in a DB

 

I only really know PHP, javascript is new to me hence the lack of knowledge.

 

Google example

http://code.google.com/apis/maps/documentation/examples/directions-simple.html

 

HTML BELOW:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
      type="text/javascript"></script>
    <script type="text/javascript"> 
// Create a directions object and register a map and DIV to hold the 
    // resulting computed directions

    var map;
    var directionsPanel;
    var directions;

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load("from: 28.1391880, -81.3604530 to: 28.415800, -81.455905");
    }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
    <div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div>
    <br/>
  </body>
</html>

 

Hope this makes sense

 

Many Thanks

 

Gazever

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.