Related articles
A Google Map with company logo and travel directions using jQuery
Joor Loohuis,
September 19, 2010,
3072 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: Google maps, JavaScript, jQuery, travel directions, web, webdesign
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.
