当代码从 index.html 中的脚本标签移动到我的 JS 文件时，Google 地图停止加载

Question

当我在索引页的脚本标签中使用它时，我的地图工作正常，但是当我尝试将它移动到我的 js 文件以便我可以在其中使用变量时，没有任何效果。

任何帮助表示赞赏，谢谢

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

看看这个 ->小提琴

var map;
(function() {
    'use strict';
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });

        document.add
    }
    initMap();
})();

Answer 2

当您使用“defer”时，您需要在所有相互依赖的脚本上使用它。 如果延迟加载 Google Maps Javascript API，则需要延迟加载依赖它的脚本。

工作示例（您的代码）

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（脚本/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
    });
}