Google Maps toevoegen aan je website

Google Maps op je website in je eigen stijl

Zoals vele van jullie wellicht al weten ben ik zelf een ontzettende fan van Google. Buiten het feit dat ik het een enorme uitdaging vindt om websites hoog te laten scoren in de organische resultaten probeer ik ook met enige regelmaat mij verder te verdiepen in de verschillende API's die Google te bieden heeft. In dit maandelijkse blog zal ik steeds een nieuw onderwerp of onderdeel van een Google API verder uitlichten en middels een kleine mini tutorial laten zien hoe het werkt.

 

Het onderwerp van vandaag: Google Maps toevoegen aan je website

Bijna iedere website heeft wel ergens op de website een landkaart, of een deel ervan staan, om aan de bezoekers te tonen waar ze zich in de wereld bevinden. In sommige gevallen wordt er alleen een screenshots gebruikt, in andere gevallen wordt al daadwerkelijk Google Maps zelf ingeladen. Jammer genoeg zit er niet altijd een pin-point in waar ze zich nu echt bevinden en wanneer deze er wel in zit is dit vaak de standaard pin-point van Google zelf. Erg jammer, want juist met de Google Maps API is het mogelijk om je eigen logo erin te zetten en dit zelfs uit te breiden met dichtsbijzijnde bushalte, station of parkeerplaats.

Om Google Maps toe te voegen aan je website zijn een aantal stappen nodig:

  • Google API key
  • De coordinaten van je locatie
  • De map toevoegen aan je website
  • De marker (of zoals bij hem bij ons noemen, de beachflag) op de kaart zetten
  • Eventueel kun je hier je eigen beachflag van maken
  • Informatie in de infobox zetten

 

Google Maps API key

De laatste versie van de Google Maps API is alweer versie nummer 3. We gaan dan ook van deze versie gebruik maken aangezien de oude versies binnenkort niet meer worden ondersteunt. Het eerste wat je nodig hebt is de Google Maps API key.

 

De coordinaten van je locatie

De meeste mensen weten niet hun eigen longtitude en latitude code van Google maps van hun locatie uit het hoofd. Je kunt deze gemakkelijk vinden door je eigen adres in te voeren op deze website. In een latere tutorial zal ik meer vertellen hoe je ook door middel van je adres deze gegevens gemakkelijk op kunt vragen bij Google zodat je ze niet steeds extern hoeft op te vragen. (Maar je kunt je afvragen hoe vaak je gebouw zichzelf verplaatst)

 

De map toevoegen aan je website

Je hebt een Google Maps API code en je weet waar je bedrijf zich bevindt op de kaart. Dan is het nu tijd om de kaart ook daadwerkelijk toe te voegen aan je website. Hiervoor zijn een aantal stappen nodig.

1. In het <head></head> gedeelte van je website, daar waar ook je <meta> gegevens staan, voeg je het volgende stukje code toe:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Het stukje met sensor=false mag op false worden gezet. Dit hoeft alleen op true op het moment dat er met bijv. GPS een positie kan worden bepaald.

 

2. Maak een algemene javascript file aan voeg de volgende code hier aan toe

function initialize() {
  var latlng = new google.maps.LatLng(51.305666, 5.756539);
  var settings = {
   zoom: 12,
   center: latlng,
   mapTypeControl: true,
   mapTypeId: google.maps.MapTypeId.ROADMAP}
};

Wat gebeurd hier nu allemaal:

  • Als eerste wordt er een vaiabele aangemaakt latlng die gevuld wordt met een Google.Maps.LatLng object waarbij de opgegeven cooradinaten het midden van je map voorstellen.
  • zoom:12 staat voor de diepte waarin je wilt inzoomen in de map. 0 betekend laat de hele wereld zien en 21 is op gebouw niveau.
  • center: latlng hiermee wordt de map gecentreerd op het gemaakt latlng object
  • mapTypeControl: true: De zaken om de map mee in te zoomen, te veranderen van type etc. staan nu aan. Je kunt er nog een twee optie aan toevoegen mapTypeControlOptions om te specificeren welke controls je wilt tonen aan je bezoeker
  • mapTypeId: google.maps.mapTypeId.ROADMAP - ROADMAP is zoals je gewend bent om Google maps te zien. Andere opties hier zijn SATELITTE, TERRAIN en HYBRID

De laatste stap die hier nog niet beschreven staat is het aanmaken van een google maps object met de bovenstaande instellingen en koppelen aan een element in je HTML code. Hiervoor voeg je de volgende regel code toe, direct na ROADMAP}
var map = new google.maps.Map{document.getElementById("google_map"), setting};

3. De code wordt pas uitgevoerd nadat de initialize functie wordt aangeroepen. Het gemakkelijkste is om deze in de <body> tag te zetten - <body onload="initialize()">. Je kunt er ook voor kiezen om deze middels jQuery in een $(document).ready() te zetten en alleen te laten aanroepen wanneer er ook daad werkelijk een element is met als id "google_map".

4. Creeer een element (<div>) met als id "google_map". Geef deze met CSS een hoogte en een breedte mee, en als het goed is zie je nu een google maps landkaart, gecentreerd op je eigen adres.

Tags: Webdesign, Tips en Tricks

Wil je meer informatie?

Neem contact met ons op, de koffie staat klaar!

Contact opnemen