Can someone please take a quick look at my code and assist with fixing the issue of google maps not loading randomly? I've looked at many threads here and have tried a lot of things but still no results. Thank you!

Map container on page:

 <div id="google-map" class="" data-latitude="34.0090633" data-longitude="-118.49310960000003" data-wow-duration="" data-wow-delay=""></div>

Script at bottom of page:

<script async defer
src=";callback=initMap">
</script>

script in external .js file:

var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 14,
        scrollwheel: false,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
    var contentString = '';
    var infowindow = new google.maps.InfoWindow({
        content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize_map);

Can someone please take a quick look at my code and assist with fixing the issue of google maps not loading randomly? I've looked at many threads here and have tried a lot of things but still no results. Thank you!

Map container on page:

 <div id="google-map" class="" data-latitude="34.0090633" data-longitude="-118.49310960000003" data-wow-duration="" data-wow-delay=""></div>

Script at bottom of page:

<script async defer
src="https://maps.googleapis./maps/api/js?key=AIzaSyBGNUW5a8iPwxyRu2Jakd88oXm9ZhIcJSQ&callback=initMap">
</script>

script in external .js file:

var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
    var myLatlng = new google.maps.LatLng(latitude,longitude);
    var mapOptions = {
        zoom: 14,
        scrollwheel: false,
        center: myLatlng
    };
    var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
    var contentString = '';
    var infowindow = new google.maps.InfoWindow({
        content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
    });
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize_map);

• javascript
• java
• google-maps

• 3 "Tried lots of threads" - for example? What did you try? Which posts did you look at? What was the result? – EJoshuaS - Stand with Ukraine Commented Apr 30, 2017 at 3:35
• 3 possible duplicate – user7627726 Commented Apr 30, 2017 at 4:11

1 Answer 1

This is probably happening because you are using

<script async defer

Your script starts executing while the google script hasn't been loaded. It runs sometimes because it bees a probability game. When your google script loads early it works - when it does not, the page breaks.