Google Maps op je Website

01/08/2006
Google Earth is een van de meest populaire software programmas van nu. Dit ligt aan de ene kant omdat het gratis is, maar ook vanwege de kwaliteit van de satellietfotos en de special effects tijdens het navigeren van stad naar stad. Om van dit programma te kunnen genieten moet je Google Earth downloaden. Dit programma wordt op je pc geďnstalleerd en haalt de satelliet afbeeldingen streaming van de vele servers van Google.

Wat veel mensen nog niet weten is dat je gratis van deze mapping diensten van Google gebruik kan maken. Dit betekend dat je de satellietfoto�s of een wegenmap van Google Maps mag gebruiken voor je eigen website zonder er voor te hoeven betalen. Als enige voorwaarde stelt Google dat je de dienst alleen gebruikt zonder commerciële doeleinden. Je mag de applicatie dus niet verkopen met het argument dat het zelf ontwikkeld is.

Bij bewired hebben we ook eens gekeken hoe eenvoudig het is om Google Maps toe te voegen aan een eigen webpagina. In dit artikel worden de stappen beschreven die resulteren in het volgende resultaat (zie hier) dat wij bereikt hebben na een half uurtje copy pasten van codes vanaf de site van Google Maps:



Stap1
De Google Maps JavaScript API zorgt er voor dat je Google Maps kunt plaatsen op je webpagina. Voordat je de API (application programming interface) kunt gebruiken moet je jezelf inschrijven voor een persoonlijke Api sleutel.



Geef als pad de folder waarin de webpagina staat met de Google Map. Staat de Google Map op een pagina die op de server in de folder "contact" staat, dan geef je als volgt het pad op: http:www.website.nl/contact.

Stap 2
Nadat je bent ingeschreven krijg je een unieke sleutel (een stuk JavaScript code) waarmee Google jou kunt identificeren. Tevens wordt een basiscode (The "Hello, World" of Google Maps) gegeven die je op je website kan zetten.

Als de code op je website wordt geplaatst dan wordt een 500 x 300 pixels grote kaart van Palo Alto, California weergegeven
Als je de pagina nu upload naar je server zul je de volgende pagina zien:



Stap3
Om de map te laten starten boven de gewenste locatie, bijvoorbeeld je eigen adres, meot je de centerpunt van de map instellen. Ook dit doe je via de bovenstaande basiscode. Hieronder is het betreffende stuk code onder de loop genomen:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

De coördinaten 37.4419, -122.1419 zoomen in op zoomlevel 13 op Palo Alto, California. Om je eigen plaats gecentreerd te krijgen moet je dus je de coördinaten van je eigen plaats invoeren. De Amsterdam Arena is bijvoorbeeld 52°18'56" latitude en 04°56'31" longitude. Deze wordt als volgt ingevoerd: (52.1856, 4.5631).

De coördinaten kun je opzoeken met een global positioning system (GPS) ontvanger. Je kunt Google Earth gebruiken om de coördinaten te zoeken. Als laatst kun je ook deze Engelstalige website bezoeken om coördinaten te vinden van steden die ook buiten de US liggen.

Stap4
Vervolgen kun je er voor kiezen om de map te voorzien van extra features zoals de onderstaande controls:



Of markeer vlaggen om je adres of belangrijke locaties aan te duiden:



De codes voor deze extra invoegtoepassingen zijn allemaal duidelijk beschreven op deze pagina: www.google.com/apis/maps/documentation.

Flash en Google Maps
Tegenwoordig wordt ook veel geëxperimenteerd met Flash 8 en Google Maps. Een groot voordeel is dat Flash meer visuele vrijheid biedt dan de huidge xhtml output. Een paar voorbeelden zijn hieronder opgesomd:

• G-mapper van A3D die gebruikt maakt van G Map V 1.0 van afcomponents.com.
• flashearth.com

door: benjamin van rossum

overige artikelen

reacties 22