jquery - Google Map fails to load on the first time and sometimes on refresh -
so added google map website. on first page load - not load. when refreshing - not load well.
code:
html:
<div id="map"> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgfzhoseeamdoygbf13fyquitwlaqgxvsngt4=" crossorigin="anonymous"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=aizasydkxmtyiezepn8e6eulm9efzcixv960j2s&callback=initmap"> </script> <script src="script.js"></script>
jquery:
function initmap() {}; $(document).ready(function () { initmap = function() { var mylatlng = { lat: 40.1511, lng: -2.150609 }; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 16, center: mylatlng, disabledefaultui: true, styles: [ .... ] }); var marker = new google.maps.marker({ position: mylatlng, map: map, title: '........', }); } });
p.s. google function in separate "script.js" file.
get rid of $(document).ready
nonsense (as long script.js
appears after <div id="map"></div>
that's matters).
the real problem weird initmap
declaration (you declare first, redeclare inside $(document).ready
.
so script.js
should this:
var initmap = function() { var mylatlng = { lat: 40.1511, lng: -2.150609 }; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 16, center: mylatlng, disabledefaultui: true, styles: [ .... ] }); var marker = new google.maps.marker({ position: mylatlng, map: map, title: '........' }); }
all this, , pop open console when load make sure don't see error messages.
Comments
Post a Comment