InitMap Is Not A Function - Map Not Rendering. Google Maps API - JS
I am experiencing the well known issue initMap is not a function and I really don't see how to solve it. I've tried various methods recommended in other questions but none of them
Solution 1:
Two issues:
- Add the missing
</script>
tag - Change the order of the page load:
<div id="map-canvas"> </div>
<script src="script.js" defer async></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
Solution 2:
Try changing the order of the scripts from this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src ="script.js" />
To this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src ="script.js" />
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
So this way the initMap
function is defined before the GMaps api loads
Post a Comment for "InitMap Is Not A Function - Map Not Rendering. Google Maps API - JS"