Googleマップjs api mapがワードプレスで読み込まれない

Question

私はスタンドアロンのHTMLページからwordpressのためのPHPテンプレートにページを移動しました。このページにはロードされていないGoogleマップがあります。 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> 

私はこれはおそらく、ワードプレスでこれをロードするための理想的ではないですけど、一時的なページを我慢するラッシュの仕事ですので、私は本当にすべての正しい方法を実施する時間がありません。ここでhome.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}) 
      } 

     }); 

    }); 

}); 

での私のJSだ何のコンソールエラー、またはGoogleのAPIから不足しているファイルのほかに目立った何か他のものはありません。私はまた、home.jsのすべての関数内からいくつかのテキストをログに記録しており、間違いなく呼び出されています。私は自分のAPIキーに何か間違っていると思っていますが、私は問題を変更することなく新しいキーを2回作成しました。古いAPIキーは、このページを取得した他のサイトで正常に動作します。

Answer 1

次のことを確認します。

1. マップの親divの高さがheight: 400px;

2. より良い使用を仕事や静的高さなどを設定してみてくださいする高さにするために100％に決定したことを確認してください

012： wp_enqueue_scriptのようなものがロードされ

3. ライブラリGoogleマップをエンキューマップを確認します

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

   <オール開始=「4」>
4. てみ力何らかの理由でマップがグリッチされている場合、負荷google.maps.event.trigger(map,'resize')後にマップを再描画します。

これらのいずれかが役立ちます。