A Google Map with company logo and travel directions

Joor Loohuis, August 24, 2009, 19396 views.

A Google Map is a nice attribute for a company website. In the blink of an eye visitors can see where you are located. The posibility for a prospective customer to get travel directions is a very useful addition. Using the company logo to indicate the exact location adds the finishing touch. All this is actually quite simple to set up, as this article shows.

Tags: , , , , ,

Most company websites have a little map on the page with the contact information, showing the location of the company. But to really make this map useful for this particular purpose, there should be an option for the visitor to get travel directions from their location. With Google Maps this proves to be quite simple. The finishing touch is added by replacing the simple default location marker with a more stylized image, for example one that is based upon the company logo. With a little knowledge of HTML, JavaScript and CSS, setting this up is light work.

Google Maps key

The first thing that needs to be done, is to request a 'Google API key', if you don't already have one for your domain. It costs nothing, but you need this key to add a Google Map to your website. You can obtain a key from the Google website, the Google Maps API documentation to be specific. Most of the information you see there can safely be ignored, but be sure to read the terms and conditions if you haven't done so before. For the rest, we're mainly interested in the actual key. Back it up somewhere. For the rest, it needs to be added to the header of the HTML page that will contain the Google Map:

  <script src="http://maps.google.com/maps?file=api&v=2&key=KEY" type="text/javascript"></script>

Of course you need to replace 'KEY' with the actual key you received from Google, in the form of a fairly long string of characters. If at a later stage you receive an error while loading the page that the key is incorrect, make sure this line is correctly formatted.

HTML

The HTML we need to set up the map and the travel directions is simple:

<div id="gmap" class="geo" title="52.0938091,5.0918734"></div>
<h2>Get travel directions</h2>
<p>
  <form id="routeform">
    Your starting point (address, city):
    <input type="hidden" value="Loco@52.0938091,5.0918734" name="routeto" id="routeto"/>
    <input type="text" name="routefrom" id="routefrom"/>
    <input type="submit" value="show directions"/>
  </form>
</p>
<div id="gdirections"></div>

This HTML snippet consists of three parts:

  • A div, here with an id 'gmap', will contain the actual map. We use the title attribute to store the coordinates of the location that we want to show on the map. There are various ways of finding these. In a previous article we already showed an easy way of using Google Maps to determine the coordinates of a location. Here we're using the location of our company office.
  • There has to be a form to give the visitor a means of entering the starting point of the trip. Of course Google Maps also needs a destination to determine the directions, and for this we use the coordinates we also use form the map. As an esthetic feature, we can also add the name of the destination to the 'routeto' field, as we have done here.
  • Finally, there is an empty div in which travel directions will be placed when available, which has an id 'gdirections'.

CSS

The Google Maps API handles most of the presentation of the map and the travel directions. We just need to be sure that the element containing the map has dimensions. Of course, various design tricks can be applied, but we'll leave that to the designers.

 #gmap {
    height:360px;
    width:480px;
}
 #gdirections {
    width:480px;
}

Marker

To add a custom marker in stead of the default, somwehat boring, red balloon, you need a suitable image. That is fairly easy to create in an application such as PhotoShop or the Gimp, but there are a few requirements. Ideally, you create a PNG image with a transparent background. The dimensions of the image are entirely up to you, as long as it fits the map. You can create something based on the company logo, or a little balloon in company colors. The image does need an 'anchor point', so that it is clear where the marker points. Take note of the pixel coordinates of the anchor point with respect to the top left corner, you'll need them. If you add a drop shadow effect to the image, the end result is even better.

JavaScript

You can directly copy the code below to a file, which we will call directions.js:

// directions.js: Google Map with travel directions
document.observe('dom:loaded', function() {new GoogleMap();});
 
var GoogleMap = Class.create({
    initialize: function(el)
    {
        // Google map
        if ($('gmap'))
            this.loadMap();
    },
 
    // load Google map
    loadMap: function()
    {
        if (GBrowserIsCompatible()) {
            document.observe('unload', GUnload, false);
            // coordinates
            var coords = $('gmap').title.split(',');
            var point = new GLatLng(parseFloat(coords[0]), parseFloat(coords[1]));
            // display map
            var map = new GMap2($('gmap'));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.enableScrollWheelZoom();
            map.setCenter(point, 15);
            // add marker
            var myIcon = new GIcon();
            myIcon.image = "/images/mymarker.png";
            myIcon.iconSize = new GSize(69, 49);
            myIcon.iconAnchor = new GPoint(9, 48);
            map.addOverlay(new GMarker(point, myIcon));
            // add directions
            var directions = new GDirections(map, $('gdirections'));
            $('routeform').observe('submit', function(e)
            {
                var elm = Event.element(e);
                directions.load('from: ' + elm.routefrom.value
                    + ' to: ' + elm.routeto.value);
                Event.stop(e);
            });
            // remove end marker if directions are displayed
            GEvent.addListener(directions, 'addoverlay', function() {
                var last = directions.getMarker(directions.getNumRoutes());
                map.removeOverlay(last);
            });
        }
    }
});

There are a few bits that need to be modified to get the marker right: the name of the file (myIcon.Image), the size of the image (myIcon.iconSize), and the coordinates of the anchor point (myIcon.iconAnchor). To get everything working, all you need to do is load the JavaScript into the page that will contain the map, by adding a few more headers after the header loading the Google Maps API:

  <script src="/js/prototype.js" type="text/javascript"></script>
  <script src="/js/directions.js" type="text/javascript"></script>

The end result is a map wich a custom location marker, and the posibility for prospective customers to obtain travel directions to your location. An example of how it works can be found on the contact page of the HPS Industrial website, which happens to be in Dutch, but the functionality should be evident.

Social networking: Tweet this article on Twitter Pass on this article on LinkedIn Bookmark this article on Google Bookmark this article on Yahoo! Bookmark this article on Technorati Bookmark this article on Delicious Share this article on Facebook Digg this article on Digg Submit this article to Reddit Thumb this article up at StumbleUpon Submit this article to Furl

Talkback

respond to this article