google map is not loading completely - google-maps

Question

google maps not working i have already done this code. but when i am using the same code in another project its not working. the lat long values are fine.
<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

The posted code works if I remove the async defer from the API include:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWT14OcdohKHZ1i-BmHEETzm6DUskY8Cg" type="text/javascript"></script>
(you should either remove them, or add a &callback=initialize to the include and remove the addDomListener that runs initialize on load)
BTW - you also have a syntax error, an extra });)
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>