Die Google Maps API ermöglicht es Entwicklern, Karten von Google Maps in ihre Anwendungen zu integrieren. Hier ist eine Schritt-für-Schritt-Anleitung, wie man die Google Maps API einrichtet:
1. Google Cloud Platform (GCP) Konto erstellen
Falls noch nicht geschehen, registriere dich bei der Google Cloud Platform (GCP). Besuche console.cloud.google.com und erstelle ein Konto.
2. Neues Projekt erstellen
Nach der Anmeldung bei der GCP-Konsole:
- Klicke oben links auf das Projektauswahl-Menü.
- Klicke auf “Neues Projekt” und gib deinem Projekt einen Namen.
- Klicke auf “Erstellen”.
3. Abrechnung aktivieren
Für die Nutzung der Google Maps API muss die Abrechnung aktiviert sein:
- Gehe zu „Abrechnung“ im Menü auf der linken Seite.
- Richte ein Abrechnungskonto ein oder wähle ein bestehendes aus.
- Verknüpfe dein Projekt mit dem Abrechnungskonto.
4. Google Maps API aktivieren
- Gehe zum “API & Services”-Dashboard in der GCP-Konsole.
- Klicke auf „+ API und Dienste aktivieren“.
- Suche nach „Google Maps JavaScript API“.
- Klicke auf „Aktivieren“.
Wiederhole diesen Vorgang für andere benötigte APIs wie „Geocoding API“, „Places API“ usw.
5. API-Schlüssel erstellen
- Gehe zum „Anmeldedaten“-Bereich in der GCP-Konsole.
- Klicke auf „Anmeldedaten erstellen“ und wähle „API-Schlüssel“.
- Ein API-Schlüssel wird generiert. Kopiere diesen Schlüssel und bewahre ihn sicher auf.
6. API-Schlüssel sichern
Um deinen API-Schlüssel vor Missbrauch zu schützen:
- Klicke auf deinen API-Schlüssel im „Anmeldedaten“-Bereich.
- Unter „Einschränkungen“ kannst du den Schlüssel einschränken, z.B. auf bestimmte HTTP-Referrer oder IP-Adressen.
7. API-Schlüssel in deine Anwendung integrieren
Füge den API-Schlüssel in deinen HTML-Code ein:<!DOCTYPE html> <html> <head> <title>Google Maps API Beispiel</title> <script src="https://maps.googleapis.com/maps/api/js?key=DEIN_API_SCHLÜSSEL&callback=initMap" async defer></script> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> </head> <body> <div id="map" style="height: 500px; width: 100%;"></div> </body> </html>
Ersetze DEIN_API_SCHLÜSSEL mit deinem tatsächlichen API-Schlüssel.
8. Testen
Rufe deine Webseite auf und prüfe, ob die Google Maps Karte korrekt geladen wird.
Die Einrichtung der Google Maps API ist relativ unkompliziert, erfordert jedoch einige Schritte in der Google Cloud Platform. Mit dieser Anleitung kannst du schnell und einfach Karten in deine Webanwendungen integrieren und deinen Nutzern eine interaktive Kartenansicht bieten.
