Fehler: Problem Google Maps wird nicht angezeigt

Michael's Avatar

Michael

27 Jun, 2016 07:51 AM

Produkt: Tao Contao
Contao-Version: 3.5.13
Browser und Browserversionen: alle

Hallo,

bei der Nutzung von GoogleMap mit TextBoxen erhalte ich einen JavaScript-Fehler:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-m...

Hoster ist in diesem Fall 1und1.

Gibt es dazu eine Lösung?

VG,
Michael Girbig.

  1. Support Staff 1 Posted by RockSolid Theme... on 27 Jun, 2016 08:43 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Tritt dieser Fehler auch in der Live-Demo des Themes auf?

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by info on 27 Jun, 2016 09:46 AM

    info's Avatar

    Hallo!

    vielen Dank für die schnelle Antwort.

    Ich baue gerade eine neue Seite für einen Kunden (Entwurfsphase): [link redaktionell entfernt]

    Normalerweise hoste ich nichts bei 1und1. Bei meinen eigenen Servern hatte
    ich dieses Problem noch nicht. Das Problem schein ein generelles mit Google
    Maps zu sein, da auch andere Erweiterungen wie dlh_googlemaps nicht
    funktionieren (habe ich gerade getestet).

    Viele Grüße,
    Michael Girbig.

  3. Support Staff 3 Posted by RockSolid Theme... on 27 Jun, 2016 01:09 PM

    RockSolid Themes's Avatar

    Wir konnten den Fehler auf Ihrer Website nachvollziehen. Er hängt anscheinend mit einer Änderung der Google-Maps-API zusammen, demnach alle neuen Websites (die nach dem 22. Juni die Google Maps API erstmals verwenden) einen API-Key von Google benötigen.

    Bitte erstellen Sie einen kostenlosen API-Key auf der Seite https://developers.google.com/maps/documentation/javascript/ rechts oben über den Button „Schlüssel anfordern“.

    Anschließend können Sie das Template templates/tao/rsce_tao_info_map.html5 bearbeiten und den API-Key an die URL //maps.googleapis.com/maps/api/js?sensor=false&callback=rsce_tao_info_map_init mit &key=... anfügen.

  4. 4 Posted by pixelbine on 30 Jun, 2016 07:33 PM

    pixelbine's Avatar

    Hi,
    ich erstelle gerade eine neue Seite mit dem Theme Oneo. Habe einen API-Key erstellt. Wie binde ich diesen nun ein? Das Template von Oneo scheint etwas anders aufgebaut.
    templates/oneo/rsce_oneo_info_map.html5
    script.src = '//maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMap_<?php echo $this->id ?>';

  5. Support Staff 5 Posted by RockSolid Theme... on 01 Jul, 2016 06:18 AM

    RockSolid Themes's Avatar

    Der Key-Parameter kann grundsätzlich an jeder Stelle dieses sogenannten Query Strings an oder eingefügt werden. Wichtig ist am Anfang oder in der Mitte, dass der nächste Parameter wieder mit einem & verbunden wird. Wenn man den &key... am Ende anfügt kann am wenigsten schiefgehen.

    Sowohl (am Ende)

    script.src = '//maps.googleapis.com/maps/api/js?sensor=false&callback=initializeGoogleMap_<?php echo $this->id ?>&key=IHRKEY';
    

    Als auch (am Anfang)

    script.src = '//maps.googleapis.com/maps/api/js?key=IHRKEY&sensor=false&callback=initializeGoogleMap_<?php echo $this->id ?>';
    

    würden funktionieren.

    Das gilt für alle Themes und deren Templates mit Map. Es wird ein Theme-Update folgen, das es überall erlaubt den Key bequem im Backend einzutragen. Die beschriebene Anpassung gilt dennoch für alle vor diesem Update heruntergeladenen bzw. installierten Themes (ein Theme-Update ist NICHT erforderlich).

  6. 6 Posted by pixelbine on 01 Jul, 2016 09:41 AM

    pixelbine's Avatar

    Hallo,
    tip top, hat alles bestens geklappt. Vielen Dank für die schnelle Antwort.
    Gruß Sabine

  7. 7 Posted by Micha on 08 Jul, 2016 07:02 PM

    Micha's Avatar

    Es gilt noch zu erwähnen das es nur funktioniert wenn man neben der Google Maps JavaScript API auch die Google Maps Geocoding API aktiviert. Den Parameter sensor=false kann/sollte man laut Google entfernen.

  8. Support Staff 8 Posted by RockSolid Theme... on 11 Jul, 2016 05:59 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihren Hinweis.

    Ja, abhängig von der verwendeten Map müssen die APIs „JavaScript API“, „Geocoding API“ und „Static Maps API“ aktiviert werden.

  9. 9 Posted by Julia on 13 Jul, 2016 02:38 PM

    Julia's Avatar

    Hallo,

    ich habe das gleiche Problem, benutze ebenfalls das Theme oneo. Ich habe die API jetzt erstellt und an die entsprechende Stelle gestellt. Allerdings funktioniert es noch nicht. Wie kann ich nun noch die „JavaScript API“, „Geocoding API“ und „Static Maps API“ aktivieren?

    Grüße Julia

  10. Support Staff 10 Posted by RockSolid Theme... on 14 Jul, 2016 07:23 AM

    RockSolid Themes's Avatar

    Nachdem Sie den API-Schlüssel erstellt haben können Sie in der Google Developer Console unter „API Manager › Google APIs › Google Maps APIs“ die benötigten APIs aktivieren und unter „API Manager › Aktivierte APIs“ nachsehen welche bereits aktiviert sind.

  11. 11 Posted by Julia on 14 Jul, 2016 11:44 AM

    Julia's Avatar

    Vielen Dank für die schnelle Hilfe.
    Jetzt funktoioniert es ohne Probleme.

    Grüße Julia

  12. 12 Posted by Simon on 02 Aug, 2016 07:43 AM

    Simon's Avatar

    Hallo alle zusammen,

    Ergänzung zum Kommentar von RockSolid:
    "Anschließend können Sie das Template templates/tao/rsce_tao_info_map.html5 bearbeiten und den API-Key an die URL //maps.googleapis.com/maps/api/js?sensor=false&callback=rsce_tao_info_map_init mit &key=... anfügen."

    >> Hier muss man hinter dem API-Key noch "&markers"hinzufügen, dann klappt es auch beim TAO-Template.

    Beste Grüße,
    Simon

  13. 13 Posted by Jens on 19 Oct, 2016 05:53 AM

    Jens's Avatar

    Hallo an alle,

    ich habe ein ähnliches Problem unter Tao mit dem "Google Map mit Textboxen". Ich habe meine Homepage unter einer Domain live zusammengebaut und dort funktioniert die Google Map bestens und sie wird angezeigt. Bei der Provider-Aufschaltung mit zwei weiteren Domains wird die Homepage zwar dargestellt, aber dort funktionieren die Google Maps komischerweise nicht.
    Zum Testen: funktionierend www.brothanek.com/kontakt.htm, nicht funktionierend www.eandp.de/kontakt.htm und www.e-and-p.de/kontakt.htm
    Ich habe das dumpfe Gefühl, dass ich irgendwo noch die "neuen" Domains bei Contao oder in diesem Modul eintragen muss...

  14. Support Staff 14 Posted by RockSolid Theme... on 19 Oct, 2016 08:59 AM

    RockSolid Themes's Avatar

    Wir konnten den Fehler auf Ihrer Website nicht reproduzieren, die Google Map wird auf allen drei Domains korrekt angezeigt.

  15. 15 Posted by Jens on 19 Oct, 2016 11:32 AM

    Jens's Avatar

    Der Fehler konnte auch nicht mehr reproduziert werden, weil ich wenige Minuten vorher die wie oben beschriebene Lösung mit dem Einoperieren eines selbst erstellen API-Keys in die rsce_tao_info_map.html5 durchgeführt habe – welches die Heilung brachte.
    Mittlerweile habe ich die Google Map sogar noch an dieser Stelle weiter so gestylt bekommen, dass es jetzt insgesamt gut aussieht. Alles bestens! Übrigens danke, dass sich das Rocksolid-Team so kümmert und jedem Fehler auf den Grund gehen möchte.

  16. 16 Posted by Karin Lutz on 15 Feb, 2017 08:42 AM

    Karin Lutz's Avatar

    Ich verwende Contao 3.5.21 und LUXE. Inzwischen ist ja im Backend ein Feld für die Eingabe des API Schlüssels ergänzt. Ich habe den API Key erstellt, im Backend eingefügt. In der Konsole im Browser erscheint die Fehlermeldung "Grafik konnte nicht geladen werden".
    Bei Google habe ich alle APIS aktiviert. Muss hier noch irgendwas anderes freigeschalten werden?
    Beim Testen der Seite vor wenigen Wochen wurde die Karte korrekt angezeigt, ohne API Key, nur mit Eingabe der Adresse. Wo kann hier noch der Fehler liegen? Unterschied: inzwischen läuft die Internetseite nicht mehr auf der temporären Domain, sondern auf der richtigen: http://www.cafe172.at/ und es sind inwischen die kompletten Seiteninhalte befüllt. - Kann es sein, dass eins der beiden Tripadvisor Widget hier zwischenfunkt?

  17. 17 Posted by Karin Lutz on 15 Feb, 2017 08:48 AM

    Karin Lutz's Avatar

    Ich ergänze: das deaktivieren der beiden Tripadvisor-Widgets hat keine Änderung gebracht.
    Die Google Map auf der Seite Kontakt wird korrekt angezeigt (Eingabe der Adresse). Bin ratlos...

  18. Support Staff 18 Posted by RockSolid Theme... on 15 Feb, 2017 09:52 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Stellen Sie bitte sicher, dass die „Static Maps API“ aktiviert ist und die Domain www.cafe172.at für die Verwendung des Keys hinzugefügt wurde.

  19. 19 Posted by Karin Lutz on 15 Feb, 2017 10:25 AM

    Karin Lutz's Avatar

    Static Maps API ist aktiviert. Die Domain kann ich nur hinzufügen, wenn die Seite auf SSL (https:) läuft. Oder habe ich das falsch verstanden?

  20. Support Staff 20 Posted by RockSolid Theme... on 15 Feb, 2017 11:00 AM

    RockSolid Themes's Avatar

    Das haben Sie vermutlich falsch verstanden. Sie können beliebig viele Domains hinzufügen (auch als HTTP-Verweis-URLs oder HTTP-Referrer bezeichnet). Ob HTTP oder HTTPS sollte dabei keine Rolle spielen.

  21. 21 Posted by Karin Lutz on 15 Feb, 2017 11:07 AM

    Karin Lutz's Avatar

    Danke. Ich bin den Anweisungen gefolgt. Allerdings hat es 10 Minuten gedauert, bis die Domain angezeigt wurde. Weiters habe ich jetzt noch bei den Anmeldedaten eine Schlüssel-Einschränkung angelegt (HTTP).
    Trotzdem wird noch kein Google Maps Plan auf der Internetseite angezeigt?

  22. Support Staff 22 Posted by RockSolid Theme... on 15 Feb, 2017 12:48 PM

    RockSolid Themes's Avatar

    Google meldet auf Ihrer Website nach wie vor: „This API project is not authorized to use this API.“.

    Bitte senden Sie uns Screenshots der folgenden Bereiche der Google Developer Console: „Google APIs › API Manager › Zugangsdaten › API Schlüssel bearbeiten › Schlüsseleinschränkung“ und „Google APIs › API Manager › Dashboard › Aktivierte APIs“.

  23. 23 Posted by Karin Lutz on 16 Feb, 2017 07:33 AM

    Karin Lutz's Avatar
  24. Support Staff 24 Posted by RockSolid Theme... on 16 Feb, 2017 08:33 AM

    RockSolid Themes's Avatar

    Auf Ihrem Screenshot der aktivierten APIs ist die „Google Static Maps API“ nicht zu sehen. Bitte aktivieren Sie diese API.

    Falls der Fehler weiterhin besteht versuchen Sie es bitte mit *.cafe172.at/* als HTTP-Verweis-URL.

  25. 25 Posted by Karin Lutz on 16 Feb, 2017 09:19 AM

    Karin Lutz's Avatar

    Vielen Dank! Die Google Static Maps API habe ich vor 50 min aktiviert (ohne URL-Signatur-Secret). Und kurz danach auch die genannte Domain als Verweis-URL eingetragen. Siehe Screenshots. Funktioniert immer noch nicht?!
    Soll ich das URL-Signatur-Secret aktivieren? Wenn ja: wo trage ich im Contao Backend den Secret-Schlüssel ein? Habe dazu leider nichts gefunden, deshalb deaktiviert.
    Was mich irritiert: auf der Seite Kontakt http://www.cafe172.at/kontakt.html funktioniert die Darstellung auch ohne API Code tadellos, nur in der Fußzeile nicht. Was ist der Unterschied zwischen diesen beiden Modulen?

  26. Support Staff 26 Posted by RockSolid Theme... on 16 Feb, 2017 03:04 PM

    RockSolid Themes's Avatar

    Soll ich das URL-Signatur-Secret aktivieren?

    Nein, die URL-Signatur sollte nicht nötig sein.

    Was mich irritiert: auf der Seite Kontakt http://www.cafe172.at/kontakt.html funktioniert die Darstellung auch ohne API Code tadellos, nur in der Fußzeile nicht. Was ist der Unterschied zwischen diesen beiden Modulen?

    Bei der Kontakt-Seite handelt es sich um eine Google Map die über <iframe> eingebunden ist. Die Map in der Fußzeile ist eine Grafik-Datei die über die Google Static Maps API generiert wird.

  27. 27 Posted by Karin Lutz on 16 Feb, 2017 03:43 PM

    Karin Lutz's Avatar

    Es funktioniert! Wunderbar! Habe allerdings nichts mehr geändert - es hat wohl einfach nicht die genannten 5 Minuten, sondern 24 Stunden gebraucht, bis der Code von Google freigeschalten wurde. Danke für die Hilfe!

  28. 28 Posted by Jens Pielawa on 05 Jan, 2020 07:12 PM

    Jens Pielawa's Avatar

    Ich steige durch die APIs bei Google noch nicht durch: mit Tao habe ich die Google Map mit Textbox mit einer API versehen, zusätzlich auch noch sicherheitshalber im Template. Auch die obigen Tipps meine ich befolgt zu haben. Die Google Map zeigt sich dennoch nicht. Mein Verdacht: ich baue die Seite neu unter einer Subdomain.
    http://contao.messezimmer-laatzen.com/de/messen.html
    Kann der Fehler darin liegen, dass APIs nicht unter einer Subdomain laufen? Ich möchte die Map natürlich zum Laufen kriegen.

  29. Support Staff 29 Posted by RockSolid Theme... on 06 Jan, 2020 02:35 PM

    RockSolid Themes's Avatar

    In der JavaScript-Konsole auf Ihrer Website wird folgende Fehlermeldung angezeigt:

    Geocoding Service: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac