将 google maps api 添加到 wordpress 主题

Question

我整个上午都在搜索，不想问这个问题，我被困住了，我不能再浪费时间了，所以我提前为这个问题道歉，但我需要帮助。

我正在尝试在我的 wordpress 主题中实现谷歌地图，我一直在关注附加的链接

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_basic_html_page

这是非常基本的，我在大约 2 分钟内完成了这个，但我正在尝试添加一个位置标记，你知道的，一个红色标记，旁边有名字。

我也不知道谁来加快加载时间。

我使用以下方法在functions.php中加载google api

wp_enqueue_script('google_maps_api', 'https://maps.googleapis.com/maps/api/js');
wp_enqueue_script( 'google_maps_api' );

这是目前我页脚中的查询

jQuery(document).ready(function($) {
function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var myLatlng = new google.maps.LatLng(51.7710638, -0.44211749999999483);

    var map_options = {
        center: myLatlng,
        zoom: 16,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
    });
    var map = new google.maps.Map(map_canvas, map_options, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
}); 

地图显示虽然加载缓慢，但标记根本不显示

Answer 1

您必须先定义地图，然后才能添加标记。至于加快加载速度，我认为这是不可能的。当您通过google.maps.event.addDomListener(window, 'load', initialize); 添加自己的侦听器时，您可以将代码从jQuery(document).ready(function ($) { 函数中取出

jQuery(document).ready(function ($) {
    function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var myLatlng = new google.maps.LatLng(51.7710638, -0.44211749999999483);

        var map_options = {
            center: myLatlng,
            zoom: 16,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // First define the map and then add the marker.
        var map = new google.maps.Map(map_canvas, map_options);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Hello World!'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
});