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.