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


my map worked fine when had in script tags on index page, when tried move js file use variable in it, nothing worked.

any appreciated,

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

when use "defer" need use on scripts dependent on each other. if defer loading google maps javascript api, need defer loading of scripts 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     }); } 

Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -