google map не загружается полностью

Question

google maps not working Я уже сделал этот код. но когда я использую тот же код в другом проекте, он не работает. длинные значения латинского алфавита в порядке.

<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

Опубликованный код работает, если я удалить async defer из API включает:

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

(вы должны либо удалить их, или добавить &callback=initialize к включать и удалить addDomListener, который работает 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>