Een Google Map met bedrijfslogo en routeplanner op basis van jQuery

Joor Loohuis, 30 september 2010, 11291 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: , , , , ,

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.

Creative Commons License Op dit werk is een Creative Commons Licentie van toepassing.
Social networking: Tweet dit artikel op Twitter Geef dit artikel door op LinkedIn Bookmark dit artikel op Google Bookmark dit artikel op Yahoo! Bookmark dit artikel op Technorati Bookmark dit artikel op Delicious Deel dit artikel op Facebook Digg dit artikel op Digg Zend dit artikel naar to Reddit Geef dit artikel een duim omhoog op StumbleUpon Zend dit artikel naar Furl

Talkback

reageer op dit artikel

Re: Een Google Map met bedrijfslogo en routeplanner op basis van (Eddie, 2010-11-02 14:39 CET)
Werkt bij mij niet....
Re: Een Google Map met bedrijfslogo en routeplanner op basis van (Joor Loohuis, 2010-11-02 17:34 CET)
> Werkt bij mij niet....

Dat is niet helemaal verhelderend ;)

Kan je een URL doorgeven van de Google Map die niet werkt?

Joor
Re: Een Google Map met bedrijfslogo en routeplanner op basis van (Jeroen, 2010-12-04 10:19 CET)
Is er ergens en complete versie te vinden van de volledig HTML?
Re: Een Google Map met bedrijfslogo en routeplanner op basis van (Joor Loohuis, 2010-12-04 14:59 CET)
> Is er ergens en complete versie te vinden van de volledig HTML?

Ik heb een voorbeeld opgezet op http://projects.hackvalue.nl/route/jquery.php

Daarbij kwam ik erachter dat mijn JavaScript code niet werkte met het HTML voorbeeld waar ik naar refereer. De bovenstaande JavaScript is aangepast zodat die daar wel voor werkt. Dat neemt waarschijnlijk ook de bovenstaande klacht weg.
Re: Een Google Map met bedrijfslogo en routeplanner op basis van (roy, 2011-06-07 20:18 CEST)
HELP

Zowel de jQuery als de prototype laten geen markers zien?

Hoe kan dit? Ik zoek me helemaal gek maar kan het niet vinden.

Please... Help