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.
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
Post a Comment