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:

1. Add the missing </script> tag
2. Change the order of the page load:

<divid="map-canvas"></div><scriptsrc="script.js"deferasync></script><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>

Solution 2:

Try changing the order of the scripts from this

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous"></script><scriptsrc ="script.js" />

To this

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><scriptsrc ="script.js" /><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script><scriptsrc="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