WordPress不显示没有插件的对象GoogleMapsAPI

我有WordPress版本的网站。 5.1.1(OceanWP主题)。我使用GoogleMaps API在我的图书馆中创建了新模板(我从Google平台获得了正确的API密钥), 我为#map对象添加了CustomJS javascript函数initMap()和customCSS, 但所有对象google maps都未显示在网站http：//上wp.​​loxx.pl/?oceanwp_library=googlemapsplfr。在调试器和控制台中, 你可以看到该网站已正确加载, 并且可以在google api内部启动。

任何想法, 为什么这个疯狂的WordPress的不显示谷歌对象？

如果我从VS开发人员创建了简单页面, 那么一切都会顺利进行。

//我的模板中的HTML：

    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"> </script>

// CustomJS

    function initMap() { 
    var laender = "'FR', 'PL'";
                var breitengrad = 53.4708393;
                var laengengrad = 7.4848308;
                var zoomstufe = 4;
    var mapOptions = {
                        // How zoomed in you want the map to start at (always required)
                        zoom: zoomstufe, scrollwheel: false, draggable: true, // The latitude and longitude to center the map (always required)
                        center: new google.maps.LatLng(breitengrad, laengengrad), // New York

                        // How you would like to style the map. 
                        // This is where you would paste any style found on Snazzy Maps.
                        styles: [{"stylers":[{"hue":"#1382b9"}, {"saturation":45}]}, {"featureType":"water", "stylers":[{"color":"#74c7f1"}]}, {"featureType":"all", "elementType":"labels", "stylers":[{"visibility":"off"}]}, {"featureType":"administrative", "elementType":"labels", "stylers":[{"visibility":"on"}]}, {"featureType":"road", "elementType":"all", "stylers":[{"visibility":"off"}]}, {"featureType":"transit", "elementType":"all", "stylers":[{"visibility":"off"}]}]
                    };

      var mapElement = document.getElementById('map');          
    //mapElement.style.width = '1900px';
    //mapElement.style.height = '661px';


     // Create the Google Map using our element and options defined above
     var map = new google.maps.Map(mapElement, mapOptions);

     var world_geometry = new google.maps.FusionTablesLayer({
                      query: {
                        select: 'geometry', from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk', where: 'ISO_2DIGIT IN (' + laender + ')'
                      }, styles: [{

                          polygonOptions: {
                            fillColor: "#FF0039", fillOpacity: 0.3, strokeColor: "#FF0039", strokeWeight: "int", strokeOpacity: 0.4
                          }
                        }], map: map, suppressInfoWindows: true
                    });

                    var center;
                    function calculateCenter() {
                      center = map.getCenter();
                    }
                    google.maps.event.addDomListener(map, 'idle', function() {
                      calculateCenter();
                    });
                    google.maps.event.addDomListener(window, 'resize', function() {
                      map.setCenter(center);
                    });
               }

//自定义CSS

#map { height: 100%; } 
html, body { height: 100%; margin: 0; padding: 0; }

#1

请尝试将Google Map脚本放在标题部分, 然后再次检查, 可能会起作用