A Google Map with company logo and travel directions using jQuery

Joor Loohuis, September 19, 2010, 8251 views.

Our article describing how to set up a Google Map with a company logo and travel directions proves to be popular. One question we've received a few times involves using jQuery in stead of Prototype, so in this article we provide the jQuery version.

Tags: , , , , ,

Some time ago we published an article on this blog about adding a Google Map with a company logo and travel directions, which proved to be quite popular. The code we provided was based on the Prototype JavaScript toolkit, but since jQuery is probably the most popular JavaScript toolkit at the moment, it's not surprising that a good part of the feedback we received was about how to port the code to jQuery. In this little article we provide you with the changes relative to the original article. Fortunately, these only affect the JavaScript, and the design elements and the HTML can remain unchanged.

The first of the changes is that in stead of Prototype, jQuery should be loaded. In stead of the line

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

you should use

  <script src="/js/jquery.min.js" type="text/javascript"></script>

or, since we're using code loaded from the Google servers, we might as well load jQuery from the Google Content Delivery Network (CDN):

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
  type="text/javascript"></script>

The second change is a replacement for the script running the directions:

// directions.js: Google Map with travel directions
$(document).ready(function()
{
    if (GBrowserIsCompatible()) {
        $(window).unload(GUnload);
        // coordinates
        var coords = $('#gmap').attr('location').split(',');
        var point = new GLatLng(parseFloat(coords[0]), parseFloat(coords[1]));
        // display map
        var map = new GMap2($('#gmap')[0]);
        map.addControl(new GLargeMapControl3D());
        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')[0]);
        $('#routeform').submit(function(e)
        {
            e.preventDefault();
            directions.load('from: ' + this.routefrom.value
                + ' to: ' + this.routeto.value);
        });
        // remove end marker if directions are displayed
        GEvent.addListener(directions, 'addoverlay', function() {
            var last = directions.getMarker(directions.getNumRoutes());
            map.removeOverlay(last);
        });
    }
});

This example is set up a little simpler than the Prototype version, but it should be simple to integrate it into your existing jQuery based code.

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

Re: A Google Map with company logo and travel directions using j (Mark Bowen, 2011-06-17 22:18 CEST)
Sorry to respond to this post so long after it was originally written but it is an excellent Google directions script and I'd love to get it working with jQuery instead of the Prototype version just because I'm using jQuery everywhere else on a site that I'm creating and so the two unfortunately aren't mixing nicely.

I have the Prototype version working fine but tried the changes mentioned in this post but the map just doesn't show no matter what I do.

Was just wondering if anyone knew of any reason as to why this might be?

Thank you in advance for any help on this and thank you for posting such an excellent tutorial in the first place.

Regards,

Mark Bowen
Re: A Google Map with company logo and travel directions using j (Mark Bowen, 2011-06-17 23:11 CEST)
Hoorah!!

Just figured it out by looking at the jQuery directions.js javascript. It was looking for a location attribute but there isn't one in the HTML code. I added in location="" instead of title="" and it all started working.

Javascript isn't my strong point so I didn't notice this right away.

Once again, thanks for such a great tutorial.

Best wishes,

Mark
Re: A Google Map with company logo and travel directions using j (Daniel, 2012-06-20 19:38 CEST)
This is one of the worst how-to article I ever read.

It doesn't work until you figure it out that you have to change the "title" of the gmaps div to "location".

The icon marker doesn't show up, no matter how I define its url (relative to the directions.js /relative to the root).

It is really sad that there aren't other gmap directions tutorials (that are understandable to someone who isn't an expert in js).