index.htmlのスクリプトタグからJSファイルにコードを移動すると、Google Mapsの読み込みが停止する

Question

インデックスページのスクリプトタグにマップを配置してもマップが正常に機能しましたが、私はそれで変数を使用することができたので、何も働いていませんでした。

すべてのヘルプは高く評価され、感謝

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

を延期するお互いに依存するすべてのスクリプトでそれを使用する必要があります。 Google Maps Javascript APIの読み込みを遅らせる場合は、それに依存するスクリプトの読み込みを遅らせる必要があります。

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（スクリプトの内容/ 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 
    }); 
} 

Answer 2

は、この1を見てください - あなたが使用する場合は ">fiddle

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(); 
})();