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:

<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