Using google maps API for driving directions

-
This is a bit different than my usual blog postings but I think it will help a lot of people.  I recently have found a need to generate a Google Map with driving directions based on some customer input.  After a few hours looking over some javascript API's I found a very simple solution on Google.com itself.  There are a few different versions of the API and this solution uses version 2.0.  I believe the current version is 3.0.  I have no clue when if ever they will deprecate the API but it could happen.  They also state if you call this service more than 2,500 times a day you will get banned so don't abuse the service.  My use is light at best maybe once or twice a day.  I have found it to be fairly fast and light weight.

UPDATE!!

Looks like Google wants you to have a key to use the maps. You will need to signup for a key here:

http://code.google.com/apis/maps/signup.html

It takes a few seconds and you will need to add the key to the query string used.

Now onto the code!

It just takes some HTML and JavaScript.



<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=YOUR_KEY_HERE"
      type="text/javascript"></script>
    <script type="text/javascript">
    function gup( name )
    {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
       
        if( results == null )
            return "";
        else
            return results[1];
    }
   
    // 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: gup('origin') to: ' + gup('destination') + "'");
    }
   
    function printMap() {
        var button = document.getElementById("buttonPrint");
        button.style.visibility ='hidden'; //hide
        print();
        button.style.visibility ='visible'; // show  
    }
   
    </script>
  </head>

  <body onload="initialize()">
    <input type="button" value="print" id="buttonPrint" onclick="printMap();" />
    <div id="route" style="width: 480px; height:320px; border; 1px solid black;" />
    <br/>
    <div id="map_canvas" style="width: 480px%; height: 480px; border: 1px solid black;" />
    <br/>
  </body>
</html> 


Let's look at the HTML, we have 2 divs.  One for the map and one for the instructions.  I have them arranged  in vertical order so they can be printed.  You can lay them out however you want.

Now there are three JavaScript functions initialize, gup, and printMap. Initialize is the big one and creates the map using the Google Map API. The directions.load is what loads the directions from the origin to the destination. Now these values are passed in along the query string and are parsed using the gup function. The print map simply hides the print button and sends the page to the printer.


Now let's look at a quick example, assuming we've named our file map.html.


server.com/map.html?origin=&UTdestination=NV


Will give us a map from Utah to Nevada. You can enter full or partial address in standard JSON format. If your addresses have spaces you will need to ensure that the URL is fully encoded for this to work. I use asp.net so Server.UrlEncode is your friend.


You can read more about the different APIs directly from Google.com


http://code.google.com/apis/maps/index.html

And below is an image of the map generated above


Comments

Post a Comment

Popular posts from this blog

String.Replace vs Regex.Replace

-
Image
I recently ran into a situation where I had to do some string manipulation. I had to replace some bad text with valid text. All this had to do with creating valid xml element names. So we had to string white space and some other invalid characters and replace them with valid xml element formatting. To do this we ended up using the Regex.Replace static method. Simply because there was some complexity involved that would have entailed using more then 1 String.Replace call when we can do it all with one regular expression. This caused some discussion about how heavy the regex class is and when to use it. I decided to do some testing and these are my results. First the code static void Main( string[] args ) { // this is our test value string testValue = "This is a test string"; int count; // run the regex replace DateTime regexStart = DateTime.Now; for( count = 0; count < 10000000; count++ ) { string newValue = Regex.Replace( testValue, ...
Read more

C# Producer Consumer using Rabbit MQ

-
So I've been learning about the different message queuing systems and discovered rabbit MQ, an open source and very popular message queuing system. I've created a very basic producer/consumer system that sends a message to a rabbit MQ queue. Producer/Consumer is pretty simple, you have two systems a producer that writes to a queue and a consumer that reads from a queue. This is desirable because it splits responsibility and allows for scalability. The code below is going to assume you have a rabbit MQ instance installed on your local machine. You can get rabbit MQ here:  https://www.rabbitmq.com/ Now the code is broken down into 3 parts, the main program, the producer, and the consumer. This is a basic example so its using old school threading rather than the new async/await .net prefers. But this is just to show how to use rabbit MQ in C# and to demonstrate a producer/consumer example. You will need to make sure your project has the rabbit MQ client nuget package installed...
Read more

C# Form Application in Kiosk Mode/Fullscreen

-
Sometimes you need to have a C# windows form application run in full screen mode.  Like you see on a kiosk at a mall or some stand alone machine.  It's fairly easy you just need to set some of the properties on the Form either in it's OnLoad method or directly in the designer. In the OnLoad method of the main Form set these values, or again set them directly in the designer. this.MaximizeBox = false; this.TopMost = true; this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; this.WindowState = System.Windows.Forms.FormWindowState.Maximized;
Read more