javascript - Google Maps stops loading when the code is moved to my JS file from script tags in index.html

Question

My map worked fine when I had it in the script tags on my index page, however when I tried to move it to my js file so that I could use a variable in it, nothing worked.

Any help is appreciated, thanks

HTML

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD9utzeckd8pV-IwFik5jVgTtG84QhDjfI&callback=" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>

JavaScript

       var im = 'http://i.imgur.com/aCONaAI.png';


    function initMap(position) {
        var map = new google.maps.Map(document.getElementById('map'),
            mapOptions);
        var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
            zoom: 16,
            center: {
                lat: 43.4678683,
                lng: -79.7006069
            },
            mapTypeId: google.maps.MapTypeId.SATELLITE,

        }


        var userMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: im,
            scaledSize: new google.maps.Size(50,50)
        });
        var stageIcon = {
            url: 'http://s31.postimg.org/i1fox68uz/bathroomicon.png',
            scaledSize: new google.maps.Size(50,50)
        } 
        var stage1 = new google.maps.Marker({
            position: { lat: 43.469222,
                       lng: -79.698804},
            map: map,
            title: 'Stage 1',
            icon: stageIcon

        });
    }

Answer 1

When you use "defer" you need to use it on all the scripts that are dependent on each other. If you defer loading the Google Maps Javascript API, you need to defer the loading of the scripts that are dependent on it.

working example (your code)

HTML:

<div id="map"></div>
<script async defer type="text/javascript" src="scripts/SO_20160419.js"></script>
<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>

CSS:

html, body, #map {
  height: 100%;
  width: 100%;
}

Javascript (contents of scripts/SO_20160419.js):

var im = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
var default_position = {coords: {latitude:42, longitude: -72}};
function initMap(position) {
    if (!position) position = default_position;
    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var mapOptions = {
        zoom: 16,
        center: {
            lat: 43.4678683,
            lng: -79.7006069
        },
        mapTypeId: google.maps.MapTypeId.SATELLITE,
    }
    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    var userMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: im,
        scaledSize: new google.maps.Size(50,50)
    });
    var stageIcon = {
        url: 'http://maps.google.com/mapfiles/ms/micons/green.png',
        scaledSize: new google.maps.Size(50,50)
    } 
    var stage1 = new google.maps.Marker({
        position: { lat: 43.469222,
                   lng: -79.698804},
        map: map,
        title: 'Stage 1',
        icon: stageIcon
    });
}