Gerelateerde artikelen
Een Google Map met bedrijfslogo en routeplanner op basis van jQuery
Joor Loohuis,
30 september 2010,
6580 views.
Ons artikel dat beschrijft hoe een Google Map met een bedrijfslogo en routeplanner op te zetten blijkt populair. Een vraag die we enkele keren hebben gekregen gaat over het gebruik van jQuery in plaats van Prototype, dus in dit artikel geven we de jQuery versie.
Tags: Google maps, JavaScript, jQuery, routeplanner, web, webdesign
Enige tijd geleden hebben we een artikel op deze blog gepubliceerd over het toevoegen van een Google Map men een bedrijfslogo en routeplanner aan een website, dat behoorlijk populair bleek. De code die we erbij gaven was gebaseerd op de Prototype JavaScript toolkit, maar aangezien jQuery waarschijnlijk de meest populaire JavaScript toolkit van het moment is, is het niet verbazend dat een deel van de feedback die we ontvingen ging over hoe de code te porteren naar jQuery. In dit kleine artikeltje geven we je de veranderingen ten opzichte van het oorspronkelijke artikel. Gelukkig betreffen die alleen de JavaScript, en het ontwerp en de HTML kunnen ongewijzigd blijven.
De eerste van de veranderingen is dat in plaats van Prototype nu jQuery moet worden geladen. In plaats van de regel
<script src="/js/prototype.js" type="text/javascript"></script>
moet je de volgende gebruiken:
<script src="/js/jquery.min.js" type="text/javascript"></script>
of, aangezien we toch al code gebruiken van de Google servers kunnen we net zo goed jQuery laden van het Google Content Delivery Network (CDN):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
De tweede verandering is een vervanging voor het script dat de routeplanner draait:
// directions.js: Google Map met routeplanner
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
$(window).unload(GUnload);
// coordinates
var coords = $('#gmap').attr('title').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: '
+ e.target.routefrom.value.replace(/(\d{4})\W+([A-Za-z]{2})/, "$1$2")
+ ' to: ' + e.target.routeto.value, {locale: 'nl_NL'});
});
// remove end marker if directions are displayed
GEvent.addListener(directions, 'addoverlay', function() {
var last = directions.getMarker(directions.getNumRoutes());
map.removeOverlay(last);
});
}
});
Dit voorbeeld is een beetje eenvoudiger opgezet dan de Prototype versie, maar het zou vrij eenvoudig moeten zijn om dit te integreren in je bestaande op jQuery gebaseerde code.
Update 4 december 2010: JavaScript aangepast zodat die werkt met de HTML die in het Prototype artikel staat.
Op dit werk is een Creative Commons Licentie van toepassing.
