Google Maps API Keys für den Filialfinder erstellen und einfügen - v0.4

Transkript

1 Google API Console Anmelden unter (Google Konto erforderlich) GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 1

2 Projekt erstellen Bevor eine API aktiviert werden kann, muss ein Projekt erstellt werden. Hier sollten Sie einen Namen vergeben, den Sie später leicht zuordnen können, falls Sie einmal mehrere Projekte haben (z.b. auf die geplante Website bezogen). GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 2

3 JavaScript API aktivieren klicken Sie auf die JavaScript API und wählen Sie anschließend oben den Punkt "aktivieren" (Anmeldedaten legen wir in einem späteren Schritt an) GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 3

4 Geocoding API und Directions API aktivieren Anschließend klicken Sie auf der linken Seite auf Bibliothek und wiederholen die Aktivierung für die Geocoding API und die Directions API (letzteres wird für Routenberechnung benötigt) GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 4

5 Google Places API Web Service Wenn Sie Ihren Benutzern bei der Eingabe des Standortes eine Auto-Vervollständigung durch Google anbieten möchten, Vorschläge für die eingegebene Adresse (ähnlich wie auf Google Maps), dann müssen Sie zusätzlich die "Google Places API Web Service" aktivieren GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 5

6 API Schlüssel für serverseitige Abfragen erstellen Klicken Sie anschließend auf der linken Seite auf Zugangsdaten und wählen Sie Anmeldedaten erstellen > API Schlüssel Schlüssel kopieren kopieren Sie sich diesen Schlüssel und wechseln Sie zum Joomla-Backend. Diesen Schlüssel verwenden wir für die serverseitige Geokodierung. Der Schlüssel kann nur mit Backend-Zugang eingesehen werden. Wenn Sie möchten und Ihnen die IP Ihres GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 6

7 Servers bekannt ist, und diese auch dauerhaft gleich bleibt, wäre eine Einschränkung auf Basis der IP möglich. GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 7

8 Server-Schlüssel im Backend einfügen Der soeben erstellte Server-Schlüssel kann nun kopiert und im Backend, in den Einstellungen des Filialfinders, in das vorgesehene Feld kopiert werden. GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 8

9 Browser-Schlüssel erstellen Jetzt möchten wir einen zweiten Schlüssel erstellen, den wir dieses mal einschränken werden. Er wird im Quellcode der Website einsehbar sein und könnte von anderen missbraucht werden. Schlüssel einschränken Als nächstes wollen wir nun unseren zweiten Schlüssel einschränken, so dass dieser nur über unsere Domain verwendet werden kann. Hier ist die Auswahl "HTTP-Verweis" GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 9

10 die richtige Wahl. Wenn es hier fehlerhafte Einstellungen gibt, wird die Umkreissuche nicht funktionieren und Karten können nicht angezeigt werden. Änderungen brauchen ein paar Minuten bis diese aktiv sind. Zu Testzwecken kann ein Key auch mal uneingeschränkt benutzt werden, aber sobald die Website produktiv ist, sollten hier die richtigen Daten eingetragen werden. Achten Sie darauf, dass auch Subdomains ( berücksichtigt werden müssen (in diesem Beispiel mit einem Platzhalter gelöst *.domain.de/*) - aber auch ohne Subdomain muss es in manchen Fällen funktionieren, deshalb diese beiden Einträge. Auch die Sternchen am Ende des Eintrages, nach dem Slash, sind wichtig. Kopieren Sie nun den Schlüssel und klicken Sie auf speichern. GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 10

11 GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 11

12 Schlüssel im Backend einfügen Der zweite Schlüssel kann nun im Backend in das vorgesehen Feld eingefügt werden (speichern der Änderungen nicht vergessen) Abschluss und Test In der Übersicht sollten Sie nun zwei API Schlüssel haben. Der eine mit Einschränkung (Verweis-URL), in Joomla als Browser-Key hinterlegt und den anderen als Server-Key ohne Einschränkung. Wenn Ihnen die IP Ihres Servers bekannt ist, empfehlen wir eine GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 12

13 Einschränkung beim "Server-Key" einzufügen, jedoch wechseln diese IPs bei manchen Hostern. Frontend testen Nach ein paar Minuten sollten nun die Keys funktionieren. Um die Funktion direkt zu testen können Sie beispielsweise im Backend auf den Punkt "Geokodierung" gehen. Dort sollten Sie dann eine Karte angezeigt bekommen. Wenn dies nicht der Fall ist empfiehlt es sich noch kurz zu warten. Falls es dann immer noch nicht geht können Sie die JavaScript Konsole Ihres Browser öffnen und nachsehen, ob Ihr Browser Fehler und Rückmeldungen von Google anzeigt, welche darüber Aufschluss geben können warum eine Karte nicht angezeigt wird. Dies geht z.b. ganz gut in den Chrome DevTools GOOGLE MAPS API KEYS FÜR DEN FILIALFINDER ERSTELLEN UND EINFÜGEN - V0.4 13