Op de meeste sites bevindt zich ergens in de site (meestal op de contact pagina) een plannetje om de gebruiker te tonen waar je bedrijf zich bevindt. Hiervoor kan je gebruik maken van een "Google Map". Onze Umbraco sites maken voortaan gebruik van de nieuwe Google Maps DataType package voor Umbraco 4.7 en latere versies. Wat houdt dit nu concreet in?

Deze package maakt gebruik van de allerlaatste versie van de Google Maps API, namelijk versie 3!

Wat is er nu zo goed aan versie 3 t.o.v. versie 2?
Eerst en vooral zijn er een hoop functionele verbeteringen:

• De snelheid voor het inladen van een map is er opmerkelijk op vooruit gegaan.
• Ondersteuning voor mobiele browsers zoals Google's Android en Safari op iPhone.
• Bespaart je tijd, want je hebt geen API-key meer nodig! Vroeger moest je een nieuwe API key genereren wanneer een site live ging, aangezien de API key zich baseerde op het domein. Vanaf nu verleden tijd!
• Het is nu ook mogelijk om gedetailleerde routebeschrijvingen te laten genereren en te tonen op de kaart. Een route van punt A naar punt B via verschillende stoppunten is nu perfect mogelijk.

De hele API werd op basis van MVC (Model View Controller) opgebouwd en alles werd onder de namespace google.maps geplaatst. Zo werden er eveneens enkele namen van functies gewijzigd. vb.) GMap2 werd google.maps.Map

Voorbeeld implementatie in umbraco:

• Download en installeer deze package.
• Maak een veldje aan op de pagina waar je het plan wilt tonen van het type GoogleMapsPoint.
• Laadt volgende scripts in binnen de template:

<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script src="/scripts/goMap.js"></script>

<script>
      $(function() { 
      $("#map").goMap({ 
        markers: [
      { latitude: 51.222678,longitude: 4.4245883, title: 'Webs', html: { content: '<font face="verdana" size="3">Webs</font><br /><font face="verdana" size="1">Sint-elisabethstraat 38a<br />2060 Antwerpen</font>', popup:false },zoom: 16}
    ], maptype: 'ROADMAP',icon: '../images/apartment.png',
      }); 
    
      $.goMap.fitBounds();
    }); 
    </script>
<div id="map" class="map mapSmall"></div>

Zoals je in bovenstaande code kan zien wordt de functie goMap aangeroepen met als parameters: de hoogtegraad, breedtegraad, titel van de popup bij het klikken op het pinnetje, de html die getoond moet worden in de popup, of de popup default zichtbaar moet zijn, maptype en indien je een ander icoontje wilt dan het default pinnetje geeft je dit mee d.m.v. "icon".

Meer weten? Surf dan naar deze site. Hier vind je alle documentatie die je nodig hebt om te starten!

Weet je nog interessante features en/of voordelen aan deze API versie? Laat het ons weten in de comments!