Question

我将一个页面从独立的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中加载它，但是建立一个临时页面是一项繁忙的工作，所以我没有时间以正确的方式实现所有内容。这是我在家里的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密钥在我们从中提取此页面的其他网站上正常工作。

Answer 1

检查以下内容：

确保地图的父div已确定高度，以使高度100％正常工作或尝试设置静态高度，例如height: 400px;
最好使用wp_enqueue_script将Google地图库排入队列
确保地图上载的内容如下：

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

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

我希望其中任何一个都有帮助。

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

1 个答案: