How to Add a Google Direction Map to a Web Site

Just about everyone in today’s internet has either a Google, Bing or MapQuest map on their web page, and although this is a fine idea there have been several times when I want to know how to get there from where I live, work, or eat.  You are left with a couple of choices, you could try and copy and paste to Google map and then add a destination or you could zoom out and try and figure it out yourself. Why not add the ability for a user to enter in their address and then let them see driving directions from your site. Furthermore; if you wanted to capture the address that they are using you might find a pattern which might help target your advertising dollar. This article will walk you through the steps to add this to your site. Trust me it is not very difficult.

Before we get started let me mention that we are going to use a jQuery Google library called Gmap3. This script is great to use because it makes coding and configuration a lot easier than trying to read Google’s API maps directly.  This also works very nicely if you are already using jQuery in your web site. I had built a web site using version 3 but in writing this article I had to make some code changes because of Version 5.

Note: I have added the whole script to one page. If you are going to use it I would suggest that you follow best practices by splitting it up (Javasripts, CSS, and HTML all separate).

Here we go…..

Create a blank html page and replace this code with the page.


<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/gmap3/5.0b/gmap3.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {

        $('#map1').gmap3({
            marker: {
                latLng: [38.898748, -77.037684],
                options: {
                    draggable: true
                }

            },
            map:{
                options:{
                    zoom: 13
                }
            }
        })

        $('#btnmapit').click(function () {

            var address = $("#addressfrom").val()
            $("#map1").gmap3({
                getroute: {
                    options: {
                        origin: "1600 Pennsylvania Ave, Washington, DC.",
                        destination: address,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, callback: function (results) {
                            if (!results) return;
                            $(this).gmap3({
                                map: {
                                    options: {
                                        zoom: 13

                                    }
                                },
                                directionsrenderer: {
                                    divId:'test-panel',
                                    options: {
                                        directions: results,
                                        panelId: 'test-panel',

                                    }

                                },
                            });
                        }
                }
            });
        })
    })
  </script>

  <style>

        label{
        float: left;
        width: 120px;
        }

        input{
        width: 180px;
        margin-bottom: 2px;
        }

        .boxes{
        width: 1em;
        }

        #submitbutton{
        margin-left: 120px;
        margin-top: 5px;
        width: 90px;
        }

        br{
        clear: left;
        }

    </style>

</head>
<body>
<div id="map1"  style="width: 600px; height: 320px; border: 1px solid #777; overflow: hidden;"></div>
<div style="float:left; width:600px;margin-top:10px">
    <div id="addfrom" style="float:left;margin-left:30px">
        <label for="address">Address</label>
        <input id="addressfrom" type="text" name="address" value="" /><br />
        <div style="float:left; margin-left:75px">
            <img id="btnmapit" src="mapmyroute.png" />
        </div>
    </div>
    <div style="clear:both"></div>
</div>
<div id="test-panel"></div>
</body>
</html>

That’s it! (Simple isn’t it).

A couple of things to notice in this page.

  1. All the javascript libraries are using CDN’s for delivery.  (If you do not want this just download them yourself)
  2. The Google Map API does not contain a API Key.  (You might want to use one anyway.  You will get more statistics if you do)
  3. I am using addresses but you could easily change to Geocoding the addresses. (If you are using a database to look at areas where people are mapping to then geocoding is a little easier to use)

Let me know what you think and by the way head over to Arvixe and check out their hosting options.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , | Posted under 3rd Party Software, Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 8 = 64

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>