Put turn by turn directions to you on your web site

Turn by turn directions Launched in your Google Maps app

As you know in the library world many queries are just long URLs and Google maps directions are the same. All you have to do is format the URL with your location as the destination and add the starting point to the URL input by your user on a form and launch the URL.

Lets start with the Google Maps Directions URL

If you go to Google maps and get a set of directions you can copy a link to those from the upper right of the map. It will contain a lot of things you don’t need, like your preferred language etc. All it needs is a stating address and a destination address: saddr= is the start address &daddr= is the destination AKA your site. The ampersand divides the URL into its parts.

Example Simplified Google Maps Directions URL:

http://maps.google.com/maps?saddr=Kingston,+RI&daddr=46+Montgomery+Street,+Tivoli,+NY

This simple URL gets directions from Kingston, RI to 46 Montgomery St, Tivoli, NY

Go to Google maps and do a directions search to your location. When you have search that works go to the link, link on the map right click on it and copy the link location. Paste the link in a text editor and remove all sections other than source and destination: saddr= I and &daddr= . Remember the ampersand divides the URL into its parts.

Test the link by pasting it in a browser URL box and this is your base URL for the script.

The PHP script to process the form and launch the link

The script required to take a destination and add it to the URL is super short and simple it just needs to URL encode whatever text they enter and tack it right between saddr= and &daddr= . Then output that as a link on a web page then launch it. When testing this I found the directions would always launch in the Google mobile web when launched directly from my script and I wanted it to launch in my maps app the way it does when you just click a directions link. So I added a small script to the processing script that simulates a click on the link that is created.

This PHP form processing script and javascript are on a PHP page that is posted to by a simple one box form and the start location on the form comes to this script with name=”From”.

<?php
//error_reporting(E_ALL);
//ini_set('display_errors', '1');
// Cleans out bad characters from the form post
foreach($_POST as $index => $value){
$_POST[$index] = preg_replace("/\r/", "", $_POST[$index]);
$_POST[$index] = preg_replace("/\n/", "", $_POST[$index]);
$forminput .= $_POST[$index];
}
// formats the From location to be added to the google maps URL
$fromwhere = urlencode($_POST["From"]);
//
// echo $fromwhere;
// Decode formats the From location to display on the web page
$startwhere = urldecode($fromwhere);
// This is where the directions link is being put together with your site as destination
// This example uses 46 Montgomery ST, Tivoli, NY
$url = 'http://maps.google.com/maps?saddr=' .
$fromwhere .
'&daddr=46+Montgomery+Street,+Tivoli,+NY';
//
// This line would launch the URL created above but this always goes to Google Maps
// Web page BUT for mobile users we want them to have the option to open this
// with an APP like a turn by turn navigation app see java script below this
//header("Location: $url");
// This line outputs the link as a button on the screen
echo '<Center><a href="' .
$url .
'"><big><b><input type="button" id="gdlink"' .
'value="Click here for directions"></b></big></a></center>';
echo "\n<p><b>You input: " . $startwhere . "</b></p>";
?>
<!-- If there is an error about the location the used
users see this message and can go back and try -->
<big><b>
<p>If your START location didn't work go back and try again.</p>
</b></big>
//
<!-- This is the javascript that launches Google Maps Directions
by emulating a click on the link button above. This works on mobile devices
but usually does not work on desktop web browsers. -->
<script type="text/javascript" language="javascript">
<!--
var gdirections=document.getElementById("gdlink");
document.getElementById("gdlink").click();
//-->
</script>

Turn by turn directions sent to your users Email

We decided not to text message directions for the simple fact many services have a limit to the number of characters in a text message and the directions would not fit. But text-messages are in fact just email to specific carriers have different addresses you can Google how this works if you have need of it.

We use Bing maps mobile for our emailed turn by turn directions. We signed up for a Bing maps API but found it easier to set up a simple form of screen scraping to get and format the directions to email to our users. We give Bing maps the credit and add a link to Bing mobile on our form and results. This starts once again by formatting a simple URL that queries Bing mobile maps directions.

The URL

This URL for this script is a little less simple it needs to have some parts other than start location sa= and end location ea= . Just make sure it has this line tacked on the end of the URL 

&a=getroute&SHOWMAP=0

This line makes it get the directions and hides the map. Remember we are just pulling out the text of the turn by turn directions. 

Simple URL Example:

http://m.bing.com/search/search.aspx?sa=gardiner+ny&ea=46+montgomery+st+tivoli+ny&a=getroute&SHOWMAP=0

The email me driving directions PHP script does more:

  • This script puts the URL together
  • Gets the text of the page at this URL in the background
  • Displays an error if the start location was not found and quits the script
  • Strips away all unneeded tags etc. from directions when they come back
  • Formats the clean results as simple HTML
  • Shows the results on the web page and Sends the results to the email address provided on the form
  • Displays an error if the email did not work

See Comments in this code:
We start out by giving credit to Bing Mobile in our HTML on the PHP page.

<h3>Coutesy of <a href="http://m.bing.com">
<img src="/m/images/bingsearch.gif" width="60" height="24" alt="Bing Mobile" />
</a> &reg;</h3>

<?php
//error_reporting(E_ALL);
//ini_set('display_errors', '1');
//
// This section of the script makes the URL
foreach($_POST as $index => $value){
$_POST[$index] = preg_replace("//r/", "", $_POST[$index]);
$_POST[$index] = preg_replace("//n/", "", $_POST[$index]);
$forminput .= $_POST[$index];
}
// urlencode makes sure the From data will work in our URL
$fromwhere = urlencode($_POST["From"]);
// This grabs the email address from the form in a variable so we can use it to send mail
$recipient=$_POST["email"];
// URLDecode formats the From in the form post so we can display it on the web page
$startwhere = urldecode($fromwhere);
//
// This places the From location in the Bing Mobile Maps Directions URL that
// already has your location as the destination in this case
// in this example script - 46 Montgomery ST Tivoli NY
$url = 'http://m.bing.com/search/search.aspx?sa=' .
$fromwhere .
'&ea=46+montgomery+st+tivoli+ny&a=getroute&SHOWMAP=0';
//
// This function of the script gets the content at the URL we created for bing directions
// Your PHP set up should have the curl libraries installed
$str = file_get_contents($url);
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}
//
// This section of the script cuts out just the section with the directions
// and gives an error if there was no result
$wholepage = get_url_contents($url);
$reg = '/show map<//a>(.*)reverse directions<//a>/s';
preg_match($reg,$wholepage,$matches);
if (isset($matches[1])) {
echo "";
} else {
echo '<h2 class=center>Start Location Not Found</h2><p>You entered: ' .
$startwhere .
' This did not work please go back and try again.</p>';
die();
}
//
// This section strips out links that would not work and other confusing code
// With text replacement regular expressions
// It add a simple break tag for every numbered line and a bold tag on the line number
$directions = $matches[1];
$find = '/<a class=/"[0-9a-zA-Z]+/" href=/"[^ /"]+">(/d+)/.<//a>/i';
$replacewith = "/n<br /><b>$1 . </b> ";
$done = preg_replace($find, $replacewith, $directions);
$findlinks = '/(<a[^>]+[^<]+<//a>|<img[^>]+>|<a[^>]+>|<div[^>]+>|<//div>|&nbsp/;)/i';
$replacewithnot = '';
$looselinks = preg_replace($findlinks, $replacewithnot, $done);
$find = '//[([0-9]+/.[0-9]+) ([a-zA-Z]+) /]/i';
$replacewith = "[$1$2]";
$doneagain = preg_replace($find, $replacewith, $looselinks);
//
// This section puts together parts of the message as both html or plain text
$startline = "/n<br /><b>Start From: " . $startwhere . "</b>/n";
$directionsDone = $startline . $doneagain . "/n/n";
print $directionsDone;
$plaintext = strip_tags($directionsDone, '');
//
// This section is the email section
// it starts by giving Bing maps credit at the top of the email message
// Then includeds the formatted list of turn by turn directions
$msg = '<p><a href="http://m.bing.com">Courtesy of bing&reg; Mobile<br /></a></p>' .
"/n/n" .
$directionsDone;
//
// This section creates mime boundary and header of email to allow an HTML formatted message
$semi_rand = md5( time() );
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$mime_header .= "MIME-Version: 1.0/n" .
"Content-Type: multipart/mixed;/n" .
" boundary=/"{$mime_boundary}/"/n" .
"--{$mime_boundary}/n" .
"Content-Type: text/HTML; charset=/"iso-8859-1/"/n" .
"Content-Transfer-Encoding: 7bit/n/n" .
"$html_content /n/n";;
//
// Add a From to the mime header you could add a full return email address here
$headers = 'From: MY Mobile Web' . "/r/n" .
$mime_header;
// add the subject to the email and try to send it
// Under the else add a message to see on the web page if the script does not work.
$subject = "Directions To My Location";
error_reporting(0);
if (mail($recipient, $subject, $msg, $headers)){
echo "<h2>Thank you</h2><p>Successfully sent to email to: " .
$recipient .
" .</p>/n";
} else {
echo "<center><br /><p><b>Error the message could not be sent to: <br /><ins><big>" .
$recipient .
"</big></ins></b>.</p></center>/n";
}
?>

Advertisements

About mobilelibraryinacan

Library tech person 4 20 years
This entry was posted in Maps and Location Scripting, Mobile Navigation Elements, PHP Scripting, The Fun Stuff and tagged . Bookmark the permalink.

2 Responses to Put turn by turn directions to you on your web site

  1. Caitlin says:

    That you’ve mentioned a very fantastic details , thankyou to the post.

  2. Matthew says:

    Good day! I just want to offer you a huge thumbs up for the excellent information you’ve got right here on this post. I’ll be returning to your web site for more soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s