谷歌地图api v3未在地图中加载

Question

我有谷歌地图的问题，我试图设置一个普通的地图，但没有任何作品我得到的是这个图像：

这是我的代码：

(function ($) {
    var marker;
    var map;
    var iconBase = 'https://maps.google.com/mapfiles/ms/icons/';
    var infowindow;

    function initialize() {

        getCoordinate(function (location) {
            setUpMap(location.latitude, location.longitude);
        });


    }

    function setUpMap(lat, long)
    {
        var myLatlng = new google.maps.LatLng(lat, long);
        var mapOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeControl: false,
            streetViewControl: false,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        codeAddress();
    }
    function codeAddress()
    {
        //Resellers is a global varaible that holds all the resellers addresses
        Object.keys(resellers).forEach(function(key){
            var reseller = resellers[key];
            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(reseller.lat, reseller.lng),
                icon: iconBase + 'green-dot.png'
            });
            (function (marker) {
                // add click event
                google.maps.event.addListener(marker, 'click', function () {
                    if (infowindow) {
                        infowindow.close();
                    }
                    infowindow = new google.maps.InfoWindow({
                        title: key,
                        content: '<div style="color: black; height: 150px;">' + reseller.address + '</div>'
                    });
                    infowindow.open(map, marker);
                });
            })(marker);
            gmaerksp.push(marker);
        });
    }



    function getCoordinate(callback) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                var returnValue = {
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                };
                var location = returnValue;
              

                callback(location);
            }
        );
    }
    google.maps.event.addDomListener(window, 'load', initialize);

}(jQuery));

#map-canvas{
   width: 1200px;
   height: 600px;
}

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

而且我不知道为什么地图没有加载，标记正在加载它应该。但正如您所看到的，缩放工具也未正确加载。所以你们知道出了什么问题吗？我测试了更改div大小但仍然加载相同。

Answer 1

经过更多的调试，我找到了答案！似乎谷歌地图无法插入wordpress短代码。我不知道为什么，但是一旦我把它移到它自己的模板而不是它就像一个魅力。

因此，如果其他任何人遇到同样的问题，并在短代码中放置谷歌地图，请尝试从那里移出它，看看它是否有效。