How to Have Phone Read Turn by Turn Directions for a Preplanned Route

Read Fourth dimension: 16 mins Languages:

In this tutorial, nosotros volition go through the process of creating a pocket-size widget that allows users to retrieve turn-by-turn directions to a specified location. We'll be using the Google Maps API, via JavaScript, to provide this rather advanced functionality.

Getting An API Key

The only caveat with using Google Maps is we must employ for an API central, but this is a fairly trivial process if yous already take a Google/GMail account. Unfortunately due to the requirements of Google we must develop on the domain that we provide Google, i.e. we can not develop on a local server. Fortunately for united states the process volition be quick and nosotros won't spend a lot of time on the live server. As well, be certain to store you API cardinal in a prophylactic place because I could not detect a manner to call back them one time generated, though I guess you could just recreate i.

The Country of Affairs

Earlier we dive into code allow me discuss the reason backside this idea. Every bit near developers I spend a lot of time on the spider web. One item subset of websites I visit are local businesses who certainly don't have great resources to devote to web design, but hopefully the people that are developing those sites will run into articles similar this and realize how easy it is to include a full-featured map into whatever webpage. Virtually any website representing a modest business organization has a folio dedicated to telling users how to locate their physical location. Frequently times you go a map with their location pinned on it, which doesn't help users who don't know the area. In this tutorial we are going to change that and permit users enter their address and get plow-past-plough directions to whatever address we want.

Including the Google Maps Javascript Library

Now that the soapbox is out of fashion lets look into code. The first thing we demand to practise is include the Javascript library that contains all the Google Maps methods. Google probably generated this code when y'all created your API key, but that might have pointed to the version 3 API which is still in beta testing. Here is the link to the API version 2 be sure to insert your API key. We are too going to include a file, awarding.js that will hold our custom functions, I stored mine in a directory at the root level called js. The following code goes within the head department of your page.

<script src="http://maps.google.com/?file=api&five=two&key=INSERT_API_KEY_HERE" type="text/javascript"></script> <script src="./js/application.js" blazon="text/javascript"></script>

The HTML Code

In the body section of our folio nosotros demand some limited markup. I will briefly become over the required $.25, and you lot can look at the source code to see the fluff I included in my demo. The showtime chemical element is an empty div with an ID of map_canvas, this is the placeholder that we indicate the Google Maps calls to and it will generate all the map markup within that chemical element.

<div id="map_canvas"></div>

Next I created a div to hold the organization address and the course for the user to enter their address. You tin look over this code but it is pretty simple and not very hard to discern information technology'southward meeting. Be sure to look at my CSS to see how it is styled in my demo.

<div id="addresses">     <div grade="accost-console">         <h2>Our Address</h2>         <address>           1450 Jayhawk Blvd #223<br />           Lawrence, KS<br />           66045         </accost>     </div>      <div class="accost-panel">         <h2>Your Accost</h2>          <grade activity="./alphabetize.php" onsubmit="overlayDirections();return imitation;" method="post">             <div>               <characterization for="street">Street Address</label>               <input id="street" name="street_address" type="text" />             </div>             <div>               <div class="address-form-cavalcade">                 <label for="city">City</characterization>                 <input id="city" proper noun="city" type="text" />               </div>                <div grade="address-course-column">                 <characterization for="country">Country</label>                 <select id="land" name="state">                   <option value="AL">Alabama</selection>                   <choice value="AK">Alaska</option>                   <option value="AZ">Arizona</option>                   <option value="AR">Arkansas</option>                   <option value="CA">California</pick>                   <option value="CO">Colorado</selection>                   ...                 </select>               </div>                <div class="address-grade-column">                 <characterization for="zip">Zip Code</label>                 <input id="nothing" name="zip_code" type="text" maxlength="5" size="5" />               </div>             </div>              <div course="button">               <input proper name="submit" type="submit" value="Get Directions" />             </div>         </course>     </div> </div>

Notice that nosotros are submitting this page to itself this is then we tin can process the folio using PHP if the user has JS disabled. If they have JS enabled nosotros desire to execute a function, overlayDirections() which we will take a look at a little later on. The bulk of this code goes to the select box that lets the user selection their state, I've condensed it for the sake of those press this article, only you tin can grab the full code from the download. Other interesting notes is we gear up the size and maxlength of the zip code text field to v. The final matter to take note is that nosotros take assigned ids and names to all of the form elements.

Bootstrapping and Declaring Variables

Alright now we tin can move into the meat of this tutorial, the JavaScript code. Nearly all the calls we are going to make come from the Google Maps API that nosotros referenced earlier. Google provides excellent documentation and instance code on their website so be certain to check information technology out. I'll attempt to link to relevant pages as I utilize them.

The offset thing is while we accept our HTML page open lets bootstrap the initialize function by setting onload attribute. Note: this could exist done in jQuery using the $(certificate).set() office.

<body onload="initialize()">

Now we are going to motion in to the js/appication.js file. The very first thing we need to do is set some variables. Some lawmaking evangelist will probably hunt me downwards for declaring global variables, simply I believe in this case we should be okay. I'll give yous the code and and so explicate how we volition use each one.

var gdir, fromAddress, toAddress;

• gdir: holds the GDirections object used to obtain driving directions results and display them on a map and/or a text panel.
• fromAddress: a cord that holds the full address of the user.
• toAddress: a string that holds the business organization/organization address

The initialize() Function

The initialize() office we chosen earlier will exist used to create the Map on the page and place a custom marking of our location.

/* ** * Bootstrap role to setup map and employ * custom visitor marker */ function initialize() {   if (GBrowserIsCompatible()) {     //settings     var companyMarkerImage= "./images/jayhawk.gif";     var companyLatLng     = new GLatLng(38.957101, -95.251469);     var companyMarkerSize = new GSize(55, 52); //width, top          toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";      var defaultZoomLevel  = 13;     //end settings      //setup elements     map   = new GMap2(document.getElementById("map_canvas"));     gdir  = new GDirections(map, document.getElementById("directions"));      //error handler     GEvent.addListener(gdir, "error", handleErrors);      //set company marker     var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);      //set map center     map.setCenter(companyLatLng, defaultZoomLevel);     map.addOverlay(companyMarker);   } }

The first thing we need to do is check if the browser is compatible with Google Maps, and for this Google provides the GBrowserIsCompatible() in their API. In essence it returns true if the browser is compatible and allows us to move into the rest of our function. I decided to abstruse some of the values to variables at the top of the role so that this could easily be ported to many applications.

          //settings   var companyMarkerImage= "./images/jayhawk.gif";   var companyLatLng     = new GLatLng(38.957101, -95.251469);   var companyMarkerSize = new GSize(55, 52); //width, pinnacle      toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";    var defaultZoomLevel  = xiii;   //end settings

The companyMarkerImage is a string of the location of a pocket-sized image we will place at our location on the map. This is something I think is a squeamish touch to have a custom icon to stand for your business which volition personalize the generic Google Map view. Next, companyLatLng holds a GLatLng object corresponding to a latitude, longitude bespeak in the globe. Don't run out and purchase a GPS device to get these numbers we tin can employ maps.google.com . In the search box type your address and when information technology finds the location click the Link button on the top right of the map. Scroll through the first text box in the modal window and find &sll=....

You lot can copy and paste those coordinates into the parameters of our GLatLng constructor. This is the point on the map where nosotros volition place our custom image. The next variable, companyMarkerSize, holds a GSize object which represents the width and height of your custom mark image. Next nosotros set toAddress which is the address of the concern. The final variable, defaultZoomLevel, simply tells the map what you want the default zoom level to exist ranging from 1 to 18.

          //setup elements   map   = new GMap2(certificate.getElementById("map_canvas"));   gdir  = new GDirections(map, document.getElementById("directions"));

The next line of code creates a GMap2 object. Google describes this equally "the primal class in the API." This loads the map information and allows us to manipulate what is shown in the map surface area. It takes one argument a DOM object pointing to the chemical element containing the map, #map_canvas. Adjacent we set gdir to concord the GDirections object. This is the interface we use to query Google Maps for directions. The constructor takes two arguments a map object and a DOM object where we desire to put the turn-by-plow directions. I cull to create an empty div beneath #addresses called #directions.

          //error handler   GEvent.addListener(gdir, "error", handleErrors);

When using spider web services we always run the risk of getting an error returned. Nosotros can make this as pain free as possible using the GEvent course. In this bit of code we are saying that if we have an error getting the directions to execute a custom callback role, handleErrors in our case. We straight telephone call the addListener() function which registers a callback. Information technology takes 3 arguments a source object, a string referring to the blazon of effect we want to execute the callback on, and a handler which points to a function nosotros want executed. The office, handleErrors, is something we will look at later.

          //set up visitor marking   var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);      //gear up map center   map.setCenter(companyLatLng, defaultZoomLevel);   map.addOverlay(companyMarker);

The concluding few lines in initialize() are used to create our custom marker, I chose a Jayhawk found on KU'southward homepage. createMarker is a wrapper function I wrote to abstract the lawmaking required to create a custom marking. Information technology takes three arguments: a reference to a GLatLng object where we want to place the image on the, a cord respresenting the path to an paradigm, and a reference to a GSize object that represents the size of the epitome. Next we use the setCenter() method of the GMap2 form which takes two arguments a GLatLng object of the coordinates to centre on, and an integer for the zoom level. Notice we are passing in the variables nosotros set in the settings block at the top of the initialize() function. The final line of code uses the addOverlay() method. This is what actually adds the custom image to the map.

The initialize() function does a lot of heavy lifting, but it certainly can show for it. Afterwards we write the createMarker() function next you will be able to load up the awarding and run across some progress. Just first lets recap the initialize() function.

The createMarker() Function

Adjacent nosotros will create a wrapper function that takes all the hurting out of creating a marker with a custom epitome. The reason I cull to abstruse this is because it is an involved process and would ataxia upwardly our initialize() function even more. Another added do good is that we can add multiple markers very quickly without repeating a lot of code.

/* ** * Wrapper function to create/return a marking object * with custom paradigm */ function createMarker(latlng, imageURL, imageSize) {      var marking      = new GIcon(G_DEFAULT_ICON, imageURL);     marking.iconSize = imageSize;      return new GMarker(latlng, { icon: mark });  }

Considerably smaller than our get-go function, but only as important. First we declare a new variable, marker, and store a GIcon object. It tin can take two arguments copy which is a GIcon object that information technology will copy backdrop from, and image which is a string representing a path to a custom image. G_DEFAULT_ICON is a constant that represents a default marker, and the imageURL comes from the settings block in initialize(). We only have to set one more than holding, iconSize which is of blazon GSize, this represents the size of our custom image and likewise comes from the settings block. The final line of code returns a GMarker object which takes two arguments latlng, and icon. The first, latlng is a reference to the GLatLng object nosotros alleged in the settings cake. The side by side argument is for the GIcon object nosotros simply created. That is all we need to exercise for the map portion of our application to piece of work. You can now load upward the folio and come across how like shooting fish in a barrel information technology is to go a nice map on our website.

Adding Directions

This is past far my favorite part about this tutorial, allowing users to enter an address and receive back a map with the route highlighted and turn-past-plough directions. Through the use of this API we can condense something that would require thousands of lines of lawmaking and an incredible amount of processing resource to merely a handful of code.

/* ** * Looks up the directions, overlays route on map, * and prints plough-by-turn to #directions. */  office overlayDirections() {     fromAddress =       document.getElementById("street").value       + " " + document.getElementById("city").value       + " " + document.getElementById("state").options[document.getElementById("land").selectedIndex].value       + " " + document.getElementById("aught").value;      gdir.load("from: " + fromAddress + " to: " + toAddress); }

The get-go line I have actually extended into five lines for clarity. In essence this grabs all the values from the form and puts a space between each part. I thought this was meliorate than asking the user to enter the whole address into a single text box considering that tin become confusing.

The second line makes use of the gdir we set up in initialize(). Nosotros phone call the load() method and pass a unmarried string argument, which is essentially what nosotros would pass maps.google.com via the search box. The from: and to: keywords assist tell Google which address needs to be the starting point and which needs to be the catastrophe indicate. That is all we demand to do for directions, yeah I was shocked too! If yous visit your page again you can come across this in activeness.

Handling Errors

Next we are going to declare the handleErrors() office. I grabbed this from Google Sample code on their API website. I won't get into any detail because it fairly straightforward.

          part handleErrors(){      if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)        alarm("No corresponding geographic location could be constitute for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may exist incorrect.\nError code: " + gdir.getStatus().code);      else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)        alert("A geocoding or directions asking could non be successfully processed, notwithstanding the exact reason for the failure is not known.\northward Error code: " + gdir.getStatus().code);      else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)        alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty accost was specified equally input. For directions requests, this means that no query was specified in the input.\northward Error code: " + gdir.getStatus().code);      else if (gdir.getStatus().code == G_GEO_BAD_KEY)        alarm("The given key is either invalid or does not match the domain for which it was given. \n Error lawmaking: " + gdir.getStatus().code);      else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)        alert("A directions request could not be successfully parsed.\n Error lawmaking: " + gdir.getStatus().code);      else alarm("An unknown fault occurred.");   }

It has a long if...elseif...else statement that checks for many fault types and alerts the user if any occur. Y'all can change this if you wish to brand the alert less technical.

Degradable

Equally practiced spider web developers nosotros should make certain our website works for every bit many users as possible, including those with JavaScript disabled. In this state of affairs I chose to redirect those with JS disabled to Google Maps with the search performed then they all the same get directions. This is done using PHP to evaluate the class and redirect to Google Maps. At the top of your HTML folio insert this code:

<?php   //settings      $TO    = "1450 Jayhawk Blvd #223 Lawrence, KS 66045"; //company accost    //end settings    //they seem to have JS disabled, let'southward redirect them to   //Google Maps and prefill the query   if($_POST['submit']) {     $FROM  = $_POST['street'] . " " . $_POST['metropolis'] . ", " . $_POST['state'] . " " . $_POST['zip'];     $LOC   = $_POST['language'];      $url   = "http://maps.google.com/maps?hl=".urlencode($LOC)."&q=from:".urlencode($FROM)."+to:".urlencode($TO)."&ie=UTF8";      header("Location: " . $url);   } ?> ...

First we have a settings cake again which only has one variable to ready, $TO. This is similar to what nosotros did in JavaScript for toAddress, only we need the same string in PHP too. Next we have an if statement to cheque for POSTed data which means our course was submitted. Now we grab the form values and place them in a cord with spaces and store that in a variable, $FROM. Then nosotros store the language value to $LOC, more on this later on. The $url variable will agree the cord representing the query URL to Google. Notice that we url-encode our values so they safely travel on the redirect. The final line of code uses PHP headers to redirect the user to Google.

Optional: Add Multi-Language Support

As a business you want to reach out to as many people as possible and part of that process is supporting multiple languages. In Google Maps supporting other languages comes at no extra cost to united states.

Beginning open up your HTML folio and insert the following lawmaking between your form tags.

... <select id="language" name="linguistic communication">   <option value="en" selected>English</pick>   <selection value="fr">French</selection>                     <choice value="de">German</pick>   <option value="ja">Japanese</selection>   <choice value="es">Spanish</choice> </select> ...

Of course if you want to remove any languages just delete the choice tag for it, yous can also modify the default by moving the selected attribute.

Moving to js/application.js, we need to brand just ii changes. Starting in the overlayDirections() function afterward nosotros create the string fromAddress add this to grab the selected value from the language select box and save information technology to our linguistic communication variable.

... var language  = certificate.getElementById("language").options[certificate.getElementById("linguistic communication").selectedIndex].value; ...

Next, add an argument to the gdir.load() function, this takes an options set. In our case we only need to declare locale so it knows the proper language and units for the turn-by-turn directions.

... gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": language }); ...

Annotation: Nosotros already included this in the PHP redirect and if you want to disable this just statically prepare $LOC.

... $LOC = 'en' ...

Decision

That is all we need for this amazing feature, and I hope y'all learned a bit about Google Maps forth the way. I challenge you as developers to proceed to find interesting ways to integrate maps in to your applications. Anytime a model is location enlightened, y'all should question if your project has a use for visual representation on a map. Thanks for reading; as always, I am here to help in the comments or on Twitter (@noahhendrix).

• Follow usa on Twitter, or subscribe to the NETTUTS RSS Feed for more daily spider web development tuts and manufactures.

Noah is a Computer Science student at the Academy of Kansas. His interests include web development in PHP/MySQL and Ruby on Rails. He obsessively follows Tech Startups and has been known to have his ain entrepreneurial ambitions. His development environment of choice is Mac OSX using a combination of TextMate and Coda. Find out more about him on twitter (@noahhendrix) or facebook.com/noahhendrix.

stallingsloord1997.blogspot.com

Source: https://code.tutsplus.com/tutorials/turn-by-turn-directions-with-the-google-maps-api--net-5620

Share this post