WordPress erweiterte benutzerdefinierte Felder Google Map API-Schlüssel

Ich habe ein Problem beim Laden von Google Maps mit dem Advanced Custom Field Plugin. Ich mache alles wie in der Anleitung auf der Plugin-Seite hier https://www.advancedcustomfields.com/resources/google-map.
Ich füge das Google-Map-Feld in ACF hinzu, aber auf der Seite, auf der es sein sollte, erscheint es für eine Sekunde und verschwindet dann mit der Aufschrift „Ups! Etwas ist schief gelaufen. Diese Seite hat Google Maps nicht korrekt geladen. Siehe die JavaScript-Konsole für technische Details.” (siehe Screenshot). Die Konsole sagt, dass ich den Google-API-Schlüssel festlegen muss. Ich denke, ich muss auch einige Zeichenfolgen in der .js-Datei aus der ACF-Anweisung ändern, aber ich weiß nicht, welche. Vielleicht könnte jemand helfen.
Danke im Voraus.
Bildschirmfoto

ACF hat die aktualisiert Google Maps-Dokumentation

Muss man erstmal Holen Sie sich einen Maps-API-Schlüssel und stellen Sie sicher, dass Sie die folgenden APIs aktivieren:

• Maps-JavaScript-API
• Geocodierungs-API
• Places-API

Registrieren Sie dann den API-Schlüssel in Ihrer functions.php

Bei Verwendung von ACF free

function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Bei Verwendung von ACF pro

function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}

add_action('acf/init', 'my_acf_init');

In meinem Fall musste ich das Feld löschen und neu erstellen, damit es korrekt gespeichert wird.

Eine Lösung könnte darin bestehen, die functions.php in Ihrem Template zu bearbeiten

//TODO: fix api key for advanced custom field
add_action('acf/fields/google_map/api', function($api){
$api['key'] = '<YOUR_API_KEY>';
return $api;
});

oder Sie können meinen Artikel für eine vollständige Lösung überprüfen

fügen Sie diese Zeile in Ihr Skript ein..ersetzen Sie sie durch Ihren Schlüssel..

<script src="https://stackoverflow.com/questions/38282612/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
<script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

Ich habe ein paar verschiedene Lösungen für dieses Problem gefunden, aber bevor ich erkläre, was zu tun ist, möchte ich mich daran erinnern, dass Sie einen Google Maps-API-Schlüssel erhalten. ich folgte diese Anleitung weil ich das Listify-Thema verwende, aber ich bin mir ziemlich sicher, dass sie Ihnen unabhängig von Ihrem Thema helfen können.

Hier meine Lösungen:

Frontend

Irgendwo (ich schätze in deinem functions.php oder hinein your-awesome-widget.php) sollten Sie eine Zeile wie diese haben

wp_enqueue_script( 'googlemaps_api' );

oder

wp_enqueue_script( 'googlemaps' );

Die Lösung, die ich gefunden habe, besteht darin, den Schlüssel in der Skriptregistrierung hinzuzufügen, bevor er auf diese Weise in die Warteschlange gestellt wird

wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?key='.$YOUR_API_KEY, false, '3');

wp_enqueue_script('googlemaps');

Backend

Dieser ist schnell und total schmutzig, weil ich gelesen habe, dass der ACF-Support bereits an der offiziellen Lösung arbeitet, also ist das für mich kein Problem, wenn es wird durch ein Plugin-Update gelöscht.

Öffnen Sie diese beiden Dateien:

• advanced-custom-fields/js/input.min.js

• advanced-custom-fields/js/input.js (theoretisch ist diese nutzlos, wenn Sie die .min-Version verwenden)

Dieser Codeabschnitt wird in jeder Datei zweimal wiederholt:

google.load('maps', '3', { other_params: $.param(self.api), callback: function(){ …

Ändern Sie diese beiden Vorkommen, indem Sie den Schlüssel auf diese Weise als Abfragezeichenfolge hinzufügen

other_params: $.param(i.api) + 'key=YOUR_API_KEY', callback …

Et voilà! Es sollte funktionieren.

Die offizielle Seite zum Thema ist hier

Ich hoffe hilfreich gewesen zu sein!

Mit der aktuellen Version (4.4) von ACF finden Sie die functions.php in der von Ihnen verwendeten Vorlage und fügen diese am Ende des Codes hinzu:

function my_acf_google_map_api( $api ){
    $api['key'] = 'YOUR_API_KEY';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

Ändern Sie „YOUR_API_KEY“ in Ihren von Google generierten API-SCHLÜSSEL.