Een Google Map toevoegen aan een webpagina met API

In dit artikel wordt uitgelegd hoe u een Google-kaart met een locatiemarkering in uw webpagina invoegt. Dit proces omvat het verkrijgen van een speciale softwaresleutel van Google en het vervolgens toevoegen van het relevante JavaScript aan de pagina.

Een Google Maps API-sleutel verkrijgen

Om te voorkomen dat zijn servers worden gebombardeerd door verzoeken om kaarten en het opzoeken van locaties, beperkt Google de toegang tot zijn Maps-database. U moet zich als ontwikkelaar registreren bij Google om een ​​unieke sleutel te verkrijgen om de Application Programming Interface te gebruiken om gegevens op te vragen bij de Maps-servers. De API-sleutel is gratis, tenzij je intensieve toegang tot de servers van Google nodig hebt (bijvoorbeeld om een ​​web-app te ontwikkelen).

Om uw API-sleutel te registreren:

1. Ga naar de Google Cloud Platform-console en, nadat u bent ingelogd met uw Google-account, maakt u een nieuw project aan of selecteert u een bestaand project.

2. Klik Doorgaan met om de API en alle gerelateerde services in te schakelen.

3. Op de Inloggegevens pagina, ontvang een API sleutel. Stel zo nodig relevante beperkingen in op de sleutel.

4. Beveilig uw API-sleutel met behulp van best practices aanbevolen door Google.

Voeg het JavaScript in uw webpagina in

Plaats de volgende code in uw webpagina, in de BODY-sectie van het HTML-document:

// Initialiseer en voeg de kaartfunctie toe initMap() {
// De locatie van vlag var vlag = {lat: XXX, lng: YYY};
// De kaart, gecentreerd op vlag var map = new google.maps. Map( document.getElementById('kaart'), {zoom: 4, midden: vlag});
// De markering, gepositioneerd bij vlag var marker = new google.maps. Marker ({positie: vlag, kaart: kaart}); } src=" https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">

Wijzig in deze code het volgende:

• Vervangen vlag met een naam die verwijst naar de locatie die u vastzet. Houd het simpel en kort (zoals huis of kantoor of Parijs of detroit). Je kunt deze code laten lopen vlag zoals het is, maar het wijzigen van de naam ondersteunt het hergebruik van deze code op dezelfde pagina om verschillende kaarten in te sluiten.
• Vervangen XXX en YYY met de lengte- en breedtegraad, in decimalen, van de locatie van de markering op de kaart. U moet deze waarden vervangen om de kaart correct weer te geven. Een gemakkelijke manier om de lengte- en breedtegraad te vinden, is door Google Maps te openen en met de rechtermuisknop te klikken op de exacte locatie die u wilt markeren. Selecteer in het contextmenu Wat is hier? om de breedte- en lengtegraad te bekijken.
• Vervangen UW_API_KEY met de API-sleutel die u van Google hebt verkregen. Zet geen spaties tussen het gelijkteken en het ampersand. Zonder de sleutel mislukt de zoekopdracht en wordt de kaart niet correct weergegeven.

Optimale praktijken

Specificeer in de kop van uw HTML-document CSS-beperkingen voor de kaart, inclusief formaat, kleuren en paginaplaatsing.

Het kaartscript van Google bevat attributen zoals zoom en centrum die openstaan ​​voor wijzigingen door de eindgebruiker. Deze meer geavanceerde techniek wordt ondersteund door de ontwikkelaarsdocumentatie van Google.

Een Google Maps API is een waardevol bezit. De best-practice-instructies van Google bieden uitstekend advies om de sleutel te beveiligen tegen misbruik door anderen. Een goede beveiliging is vooral relevant als u een betalingssysteem voor API-toegang heeft opgezet, omdat u een hoge rekening kunt krijgen als uw inloggegevens worden gestolen. In het bijzonder het voorbeeld dat we hier hebben laten zien doet sluit de API-sleutel rechtstreeks in de code in - we hebben dit gedaan om de procedure te demonstreren. In een productieomgeving is het echter beter om omgevingsvariabelen voor de sleutel op te geven in plaats van de sleutel rechtstreeks in te voegen.