Wie dynamisch benutzerdefinierte Google-Map in WordPress?

Question

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBm0uh_VRDYSFOnLewPnlmHrgiErw7GI6U"></script> 

in html:

<div id="map-canvas"></div> 

in main.js Datei:

(function(window, mapster) { 

// Map Options 
var options = mapster.MAP_OPTIONS, 

element = document.getElementById('map-canvas'), 

// Map 
map = Mapster.create(element, options); 
map.zoom(18); 

map.addMarker({ 
    lat: 37.791350, 
    lng: -122.435883, 
    draggable: true, 
    icon: 'images/map-icon.png' 

}); 

} (Fenster, window.Mapster || (window.Mapster = {})));

Wie man diese Art von Google Map in WordPress dynamisieren?

Answer 1

Ich nehme an, dass Sie unter "dynamisch" die Möglichkeit verstehen, die Längen- und Breitengradwerte zu ändern. Sie können dies erreichen, indem Sie diese beiden Variablen als Optionen speichern (z. B. indem Sie Felder auf der Registerkarte "Einstellungen" hinzufügen) und diese dann lokalisieren, wenn Sie Ihr main.js-Skript in die Warteschlange stellen. Wenn Sie Ihr Skript einreihen können Sie es die Optionen als solche übergeben:

wp_register_script('mainJs', get_template_directory_uri() .'/js/main.js'); 
wp_localize_script('mainJs', 'MapData', array(
     'lat' => get_option('googleLat'), 
     'lng' => get_option('googleLng'), 
    ) 
); 
wp_enqueue_script('mainJs'); 

Dann werden Sie in der Lage sein, die MapData Variable über Ihren JavaScript-Code als solche zuzugreifen:

map.addMarker({ 
    lat: MapData.lat, 
    lng: MapData.lng, 
    draggable: true, 
    icon: 'images/map-icon.png' 
}); 

Weitere Informationen finden Sie in der wp_localize_script Dokumentation.