Googleマップが完全にロードされていません

Question

Googleマップが動作していません私はすでにこのコードを行っています。しかし、別のプロジェクトで同じコードを使用している場合、そのコードは機能しません。緯度の長い値は問題ありません。

<div class="row"> 
 
<div class="col-md-12"> 
 
    <div id="googleMap" style="height: 354px; width:200px;"></div> 
 
</div> 
 
</div> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWT14OcdohKHZ1i-BmHEETzm6DUskY8Cg" type="text/javascript"></script> 
 
<script> 
 
     var lat = '<?php echo $lat?>'; 
 
     var long = '<?php echo $longi?>'; 
 
      var myCenter = new google.maps.LatLng(lat, long); 
 
      var marker; 
 

 
      function initialize() 
 
      { 
 
       var mapProp = { 
 
        center: myCenter, 
 
        zoom: 12, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }; 
 

 
       var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 

 
       var marker = new google.maps.Marker({ 
 
        position: myCenter, 
 
        animation: google.maps.Animation.BOUNCE 
 
       }); 
 

 
       marker.setMap(map); 
 
      } 
 

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

 
     }); 
 
</script>

Answer 1

掲載のコードは、私が含まAPIからasync deferを削除した場合に動作します：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWT14OcdohKHZ1i-BmHEETzm6DUskY8Cg" type="text/javascript"></script> 

（あなたがそれらを削除するか、または含まれ、削除に&callback=initializeを追加する必要がありますどちらか負荷時にが実行されるinitialize）

BT W - あなたはまた、構文エラー、余分な});を持っている）

var lat = 42; 
 
var long = -72; 
 
var myCenter = new google.maps.LatLng(lat, long); 
 
var marker; 
 

 
function initialize() { 
 
    var mapProp = { 
 
    center: myCenter, 
 
    zoom: 12, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myCenter, 
 
    animation: google.maps.Animation.BOUNCE 
 
    }); 
 

 
    marker.setMap(map); 
 
} 
 

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWT14OcdohKHZ1i-BmHEETzm6DUskY8Cg" type="text/javascript"></script> 
 

 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div id="googleMap" style="height: 354px; width:200px;"></div> 
 
    </div> 
 
</div>