Dit is hoe u de Google Maps API gebruikt screencast

Dus uw klant e-mailt u en vraagt: "Kunt u een van die flitsende kaarten op mijn contactpagina plaatsen, zodat gebruikers ons gebouw daadwerkelijk kunnen zien vanuit het perspectief van een satelliet?". U heeft vaak Google-kaarten gebruikt, maar er is slechts één probleem: u hebt geen idee hoe u de API moet gebruiken. Haal je lepel maar eruit en graaf erin!

* Klik op de schakelaar op het hele scherm.

Stap 1: verkrijg een unieke API-sleutel

Als u de broncode die bij dit artikel wordt geleverd, zou downloaden, zou u merken dat dit niet werkt op uw website. De reden is dat Google vereist dat alle gebruikers een unieke 'API-sleutel' krijgen voor elke site die Google-kaarten implementeert.

Nooit bang zijn. Het is 100% gratis en het duurt ongeveer dertig seconden om je aan te melden. Ga eerst naar de aanmeldingspagina van Google en voer de URL van uw website in. Maak je geen zorgen over het toevoegen van een specifiek pad. De root-URL bevat elke pagina die deel uitmaakt van dat domein. Ga akkoord met de algemene voorwaarden en klik op "API genereren".

Dat is het! De pagina waarnaar u bent doorgestuurd bevat uw unieke sleutel en een voorbeeldpagina - om als een spoedcursus te dienen. Je sleutel ziet er ongeveer zo uit:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

U zult ook een scriptpad vinden dat er als volgt uitziet:

De jouwe zal anders zijn dan de mijne omdat het je eigen specifieke sleutelwaarde zal bevatten. Kopieer dit en plak het in het kopgedeelte van uw document.

U kunt de koppeling naar de API-documentatie toevoegen aan uw favorieten. Je zult er ongetwijfeld naar refereren als je vaardigheden vordert.

Stap 2: uw HTML instellen

Voor de eenvoud zullen we een lay-out met onbewerkte botten maken. Voeg het volgende toe binnen het body-element van uw document.

In een echte wereldsituatie moet je de stijl naar een extern bestand verplaatsen (zoals ik deed in de video). De hoogte- en breedtewaarden worden door de API gebruikt om de dimensies van uw kaart te bepalen. Maak je geen zorgen, er zal niets worden afgeknipt.

Stap 3: Javascript

Voeg vervolgens het volgende toe aan uw Javascript-bestand. Bekijk het een beetje en ga dan verder.

 $ (function () // wanneer het document klaar is om te worden gemanipuleerd. if (GBrowserIsCompatible ()) // als de browser compatibel is met Google Map's var map = document.getElementById ("myMap"); // Ontvang div element var m = nieuwe GMap2 (kaart); // nieuwe instantie van de GMap2-klasse en doorgeven op onze div-locatie m.setCenter (nieuwe GLatLng (36.158887, -86.782056), 13); // doorgeven op breedtegraad, lengtegraad en zoomniveau. else alert ("Uw browser is niet waardig."););

Om deze code regel voor regel te nemen:

• Wanneer het document klaar is om te worden gemanipuleerd, voert u de code binnen. Dit is een jQuery-syntaxis, maar jQuery is niet vereist. Je kunt ook gewoon een "onLoad ()" -attribuut toevoegen aan je lichaamsdeel - hoewel dit rommelig is.
• Als de browser van waaruit de gebruiker de kaart opent niet compatibel is met de API, laat dan een waarschuwing zien (zie onderaan). Anders voert u de code uit.
• Maak een variabele met de naam "map" en vertel deze om de div te vinden die de kaart zal bevatten.
• Maak vervolgens een variabele met de naam "m" en maak deze gelijk aan een nieuw exemplaar van de klasse "GMap2". Geef tussen de haakjes de "map" -variabele door die u zojuist hebt gemaakt
• Stel ten slotte een middelpunt in zodat de kaart weet wat te laten zien. Hiertoe maken we een nieuw exemplaar van de klasse "GLatLng" en geven we de waarden voor de breedte- en lengtegraad door. Je kunt hierheen gaan om de juiste waarden te pakken. In mijn geval heb ik de coördinaten in mijn woonplaats gezet. Hierna kunt u optioneel een zoomniveau invoeren - dat ik heb ingesteld op de standaard '13'.

Deze code geeft u alleen een basiskaart die volledig geschikt is voor uw behoeften. Als u echter ook de functies "zoom" en "kaartmodus" wilt implementeren, leest u verder.

Stap 4: Onze kaart verfijnen

Er zijn letterlijk tientallen functies die u aan uw kaart kunt toevoegen. We zullen er een paar bespreken. Eerst zullen we een zoombalk implementeren waarmee gebruikers stapsgewijs kunnen in- of uitzoomen.

 m.addControl (nieuwe GLargeMapControl ())

Hier nemen we onze kaart en voegen we een nieuwe controle toe met de naam "GLargeMapControl".

Laten we vervolgens een functie toevoegen die de gebruikers in staat stelt om te kiezen welke kaartmodus ze willen: Normaal, Satellietweergave of een hybride.

 var c = nieuwe GMapTypeControl (); // schakel kaartmodi m.addControl (c);

• Maak een variabele met de naam "c" en maak deze gelijk aan een nieuw exemplaar van de klasse "GMapTypeControl".
• Voeg een nieuw besturingselement toe en geef 'c' door.

Als u uw browser ververst, ziet u dat de gebruiker nu de optie heeft om zijn weergavemodus te kiezen. Maar wat als u de standaardmodus wilt instellen? In dergelijke gevallen zou u "setMapType" gebruiken.

 m.setMapType (G_SATELLITE_MAP);

Bij het definiëren van de standaardmodus hebt u drie keuzes.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Je bent klaar!

Dat was niet zo moeilijk, toch? Er zijn een paar specifieke klassenamen die u moet onthouden, of noteer deze voor latere referentie. Maar anders dan dat, is het opvallend eenvoudig om zo'n geavanceerde kaart in uw websites te implementeren.

Voor jou, sjabloonkunstenaars, waarom zou je dit niet implementeren in een van de thema's die je verkoopt op ThemeForest?

Een paar dagen geleden hebben we een tutorial geplaatst die laat zien hoe je veel API's kunt combineren - inclusief Google maps. Maar velen van u wisten niet genoeg om te beginnen. Hopelijk helpt dit. Nadat je je hoofd rond deze API hebt gewikkeld, kun je jezelf wat hoofdbrekens besparen en de hulp inroepen van een PHP-klasse met de naam Phoogle? Ik denk dat het het beste is om eerst de juiste weg te leren, maar nu dat je ... een paar hoeken hebt gesneden! Zie je volgende week.

Extra bron

• 

  Een mashup maken door 3 verschillende API's te combineren

  In deze zelfstudie leert u hoe u een mashup van drie verschillende API's maakt, inclusief integratie met Google Maps.

  Bezoek artikel

• Abonneer u op de RSS-feed en de videofeed voor meer dagelijkse webontwikkelingen, tuts en artikelen.