Google Maps Api Key erstellen

Am 22. Juni 2016 ist im Google Geo Developers Blog zu lesen, dass Änderungen an der Google Maps Api erfolgen. Die wohl wichtigste Änderung ist, dass ein Aufruf der API mit API-Key nun zwingend notwendig ist.

We no longer support keyless access (any request that doesn't include an API key). Future product updates are only available for requests made with an API key . API keys allow us to contact developers when required and help us identify misbehaving implementations.

Google Geo Developer Blog: Update am Google Maps APIs Standard Plan

Einige Siquando Anwender berichteten bereits von Fehlermeldungen wie: „Auf dieser Seite konnte kein Google Maps-Element angezeigt werden. Bitte wenden Sie sich an den Websiteadministrator. Wenn Sie der Administrator dieser Website sind, überprüfen Sie die JavaScript-Konsole oder informieren Sie sich auf der folgenden Seite über die Fehlerbehebung: http://g.co/mapsJSApiErrors”

In der Konsole wird das Ganze noch etwas präsiziert: „Google Maps API error: Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error”

Die Api Anfrage erfolgt also ohne Schlüssel, weshalb Sie statt der dargestellten Map wahrscheinlich eine Warnung oder auch einen leeren Bereich sehen werden.

Die ersten Benutzer melden bereits dass die Google Map als Eyecatcher im Design Bootstrap 3 oder Vertika für Siquando Web 8 nicht mehr angezeigt werden, darum werden wir in wenigen Tagen Updates der Designs im Kundenkonto bereitstellen.

Um einen Schlüssel anfordern können benötigen Sie ein Google Konto. Für die Google Maps Standard API die im Browser (per Javascript) aufgerufen wird ist ein Browserschlüssel erforderlich, den Sie unter „Schlüssel für JavaScript API anfordern” generieren können.

• Klicken Sie dafür einfach auf die blaue Schaltfläche „SCHLÜSSEL ANFORDERN”.
• Zunächst muss ein Projekt erstellt werden, für das Ihre Anwendung registriert werden soll. Klicken Sie dafür bitte direkt auf „Weiter” .
• Im darauffolgenden Fenster klicken Sie nun direkt auf „Erstellen” .
• Im geöffnetem Overlay-Fenster wird Ihnen nun bereits der Schlüssel mitgeteilt, kopieren Sie sich nun den Key und sichern Sie ihn. Anschließend bestätigen Sie einfach mit „Ok”
• Im nächsten Fenster klicken Sie nun auf Browserschlüssel 1 und vergeben einen aussagekräftigen Namen. Damit die Schlüssel übersichtlich bleiben empfiehlt sich hier den Domainnamen der Seite zu verwenden, auf der die Map später dargestellt wird. In meinem Beispiel ist das „web2date-designs.de”. Das zweite Feld „Anfragen von diesen HTTP-Referrern (Websites) annehmen” ist optional, und muss von Ihnen nur ausgefüllt werde, wenn Sie sicherstellen möchten dass wirklich nur Sie diesen Schlüssel verwenden können. Das Beispiel ist hier eine gute Vorlage.
• In manchen Fällen wird neben der „Google Maps JavaScript API” auch die „Google Maps Geocoding API” um diese zu aktivieren klicken Sie bitte links auf Übersicht und klicken bei Google Maps Api auf „Mehr”.
• Klicken Sie nun auf „Google Maps Geocoding API” und im sich öffnendem Fenster auf „Aktivieren”.
• Nutzen Sie die statische Map in Siquando Pro Web aktivieren Sie bitte auch „Google Static Maps API”

Sollten Sie eines der Designs Vertika oder Bootstrap 3 für Siquando Web oder Shop 8 verwenden, steht Ihnen zur Eingabe der API-Schlüssels in der aktuellen Version eine erweiterte Eigenschaft bereit. Diese finden Sie unter Datei Website- & FTP-Eigenschaften Reiter Erweitert im Bereich Eyecatcher (GoogleMap-Einstellungen).

Siquando Pro Web Anwender müssen hingegen eine, oder zwei Dateien auf dem Server anpassen. Öffnen Sie dafür die Datei „classes/plugins/ngpluginparagraph/ngpluginparagraphgooglemaps/ngpluginparagraphgooglemaps.php” und ersetzen in Zeile 65

$this->javaScripts ['googlemaps'] = 'https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false';
durch
$this->javaScripts ['googlemaps'] = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.9&sensor=false';

YOUR_API_KEY ersetzen Sie natürlich durch den von Ihnen generierten Schlüssel.

Speichern Sie die Datei und kopieren Sie sie nun wieder auf den Server. Die dynamische Karte sollte nun bereits nach einem erneuten Aufruf der Seite wieder wie gewünscht funktionieren.

Nutzen Sie die statische Map, öffnen Sie bitte die Datei „classes/plugins/ngpluginparagraph/ngpluginparagraphgooglemaps/tpl/static.tpl” und ersetzen den kompletten Inhalt der Datei durch

<img src="http://maps.googleapis.com/maps/api/staticmap?center={$latitude},{$longitude}&amp;zoom={$zoom}&amp;size={$width}x{$height}&amp;maptype={$maptypestatic}&amp;markers=color:red%7C{$latitude},{$longitude}&amp;sensor=false{$scale}&amp;key=YOUR_API_KEY" alt="" />

YOUR_API_KEY wird erneut durch Ihren API-Schlüssel ersetzt. Speichern Sie anschließend die Datei und laden Sie sie wieder auf Ihren Server.