谷歌地图js api地图未在wordpress中加载答案

【问题标题】：Google maps js api map not loading in wordpress谷歌地图js api地图未在wordpress中加载
【发布时间】：2016-08-18 22:24:47
【问题描述】：

我将一个页面从一个独立的 html 页面移到了 wordpress 的 php 模板中。该页面中有一个不再加载的谷歌地图。它在 css 中设置为 100% 的高度，但是当页面加载时，它是 0px，当我检查源时，我没有看到所有的地图文件。这是我的来源在 wordpress 页面上的样子。

以及它在原始网站上的样子。

脚本在页脚之前加载，直接在模板页面中，尽管我尝试将它们移到 footer.php 文件中，但没有改变任何内容。

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/resources/js/home.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=MYAPIKEY&callback=initMap" async defer></script>

我知道这对于在 Wordpress 中加载可能并不理想，但是放置一个临时页面是一项紧急工作，所以我真的没有时间以正确的方式实现所有内容。这是我在 home.js 中的 JS

var markers = [],
        map,
        openingTimeline = new TimelineLite(),
        neighborhoods = [
          {lat: 40.037745   ,   lng:    -75.539315  },
            {lat:   33.678238   ,   lng:    -112.101291 },
            {lat:   43.592121   ,   lng:    -116.19333  },
            {lat:   32.638644   ,   lng:    -97.304323  },
            {lat:   45.403618   ,   lng:    -122.562171 },
            {lat:   33.857066   ,   lng:    -117.903592 },
            {lat:   43.615218   ,   lng:    -116.200036 },
            {lat:   45.052629   ,   lng:    -92.806624  },
            {lat:   44.871993   ,   lng:    -93.425385  },
            {lat:   36.81239    ,   lng:    -76.065197  },
            {lat:   41.611046   ,   lng:    -90.57509   },
            {lat:   32.78   ,   lng:    -96.8   },
            {lat:   32.993987   ,   lng:    -97.053279  },
            {lat:   46.817458   ,   lng:    -96.86393   },
            {lat:   36.351651   ,   lng:    -94.180028  },
            {lat:   41.573418   ,   lng:    -90.564322  },
            {lat:   33.047885   ,   lng:    -97.0606    },
            {lat:   31.204645   ,   lng:    121.480034  },
            {lat:   22.286931   ,   lng:    114.141124  },
            {lat:   43.596035   ,   lng:    -116.176386 },
            {lat:   33.081626   ,   lng:    -96.831755  },
            {lat:   41.985225   ,   lng:    -88.007874  },
            {lat:   32.78   ,   lng:    -96.8   },
            {lat:   41.660091   ,   lng:    -86.26071   },
            {lat:   39.949476   ,   lng:    -91.397037  },
            {lat:   38.583003   ,   lng:    -121.514606 },
            {lat:   37.69727    ,   lng:    -121.9331   },
            {lat:   39.583579   ,   lng:    -104.857137 },
            {lat:   38.951881   ,   lng:    -76.834091  },
            {lat:   29.724601   ,   lng:    -95.54848   },
            {lat:   43.59849    ,   lng:    -116.177244 },
            {lat:   37.698696   ,   lng:    -121.928664 },
            {lat:   45.403618   ,   lng:    -122.562171 },
            {lat:   47.620012   ,   lng:    -122.17501  },
            {lat:   33.184634   ,   lng:    -97.099463  },
            {lat:   36.346182   ,   lng:    -94.187043  },
            {lat:   38.758384   ,   lng:    -90.453725  },
            {lat:   42.011992   ,   lng:    -71.050855  },
            {lat:   38.602137   ,   lng:    -90.400849  },
            {lat:   38.95972    ,   lng:    -76.714415  },
            {lat:   34.005726   ,   lng:    -118.151419 },
            {lat:   41.133795   ,   lng:    -104.825084 },
            {lat:   32.923811   ,   lng:    -96.798133  },
            {lat:   36.365584   ,   lng:    -94.21815   },
            {lat: -37.832379, lng: 144.960433}
        ];

$(document).ready(function($) {

    // Start opening animation
    openingTimeline
    // show body
    .set('body', {opacity: 1})
    // fade show Why Ivie & Tagline
    .staggerFrom('#why-ivie, #tagline', 0.7, {y: -20, opacity: 0, ease:Sine.easeInOut}, 0.4, "+=1")
    .add("showMap", "+=1.5")
    //  hide text
    .to('#why-ivie, #tagline', 0.5, {y: 40, opacity: 0}, "showMap")
    //  hide overlay
    .to('.overlay', 0.5, {autoAlpha: 0}, "showMap+=0.5")
    .from('#map-slider', 0.4, {opacity: 0, onComplete: function(){
        dropPins()
    }}, "showMap+=0.5")
    .from('#slider', 0.5, {marginTop: '-20px', opacity: 0}, "+=1.5")
    ;

});

function initMap() {

    // Disallow drag on mobile
    var isDraggable = $(document).width() > 480 ? true : false;

  map = new google.maps.Map(document.getElementById('map'), {
    scrollwheel: false,
    draggable: isDraggable,
    streetViewControl: false,
    styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
  });

  // Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
  map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))

}

// Animate pins dropping
function dropPins() {
  for (var i = 0; i < neighborhoods.length; i++) {
    addMarkerWithTimeout(neighborhoods[i], i * 20);
  }
}

// Animate pins dropping
function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP,
      icon: '/wp-content/themes/ivie2014/resources/img/marker.png',
    }));
  }, timeout);
}

// Fade items into view on scroll
$(document).ready(function() {

    TweenLite.set('.animate-me', {y: 40, opacity: 0})

    /* Every time the window is scrolled ... */
    $('body').scroll( function(){

        /* Check the location of each desired element */
        $('.animate-me').each( function(i){

            var bottom_of_object = $(this).offset().top + 100;
            var bottom_of_window = $('body').scrollTop() + $('body').height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){
                TweenLite.to($(this), 1, {y: 0, opacity: 1})
            }

        });

    });

});

除了 google api 中丢失的文件之外，没有控制台错误或其他任何明显的错误。我还记录了 home.js 中所有函数中的一些文本，它们肯定会被调用。我一直在想我的 API 密钥一定有问题，但我已经创建了两次新的，问题没有改变。旧的 API 密钥在我们从中提取此页面的其他站点上运行良好。

【问题讨论】：

您是否尝试在您的functions.php 中使用wp_enqueue_script()？你设置优先级了吗？
我没有尝试将脚本排入队列。就像我说的那样，我没有太多时间来设置它们。但是，我确实知道首先加载 home,js 文件。我尝试以另一种方式切换它，但出现错误“initMaps 不是函数”
有谁知道新的 API 密钥是否需要时间才能生效？也许我的钥匙太新了？
我认为这不是问题所在。您是否尝试过使用 async 或 defer 值？
我试过删除它们，如果你是这个意思，没有效果，

标签： javascript php wordpress google-maps

【解决方案1】：

检查以下内容：

确保地图的父 div 已确定高度以使高度 100% 起作用或尝试设置静态高度，例如 height: 400px;
最好使用wp_enqueue_script 加入谷歌地图库
确保地图已加载如下内容：

google.maps.event.addListenerOnce(map, 'idle', function(){ console.log("map loaded"); });

如果由于某种原因地图出现故障，请在加载 google.maps.event.trigger(map,'resize') 后尝试强制重绘地图。

我希望这些都会有所帮助。

【讨论】：