Google Maps Doesn't Load Sometimes

Question

I have an embedded map created using the Maps API on my website. It will load at university 9/10 times, but will never load at home. Is there a way to fix this so that it will always load.

Here is the script it is using:

                    <script>
                function initMap() {
                var pointer = {lat: 53.827369, lng: -1.594245};
                var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 14,
                center: pointer
                });

                var marker = new google.maps.Marker({
                position: pointer,
                map: map,
                title: 'Leeds Beckett University "Headingley Campus"'
                });

                var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '<\/div>'+
                '<h1 id="firstHeading" class="firstHeading">Leeds Beckett University<\/h1>'+
                '<div id="bodyContent">'+
                '<p class="maptext">Leeds Beckett University is a public university in Leeds, West Yorkshire, with campuses in the city centre and Headingley. The university’s origins can be traced to 1824, with the foundation of the Leeds Mechanics Institute<\/p>' +
                '<p class="maptext"><b>Postcode:<\/b> LS1 3HE<\/p>'+
                '<\/div>'+
                '<\/div>';

                var infowindow = new google.maps.InfoWindow({
                content: contentString
                });


                marker.addListener('click', function() {
                infowindow.open(map, marker);
                });

                }

                </script>

The "map" div is already included in my HTML.

Answer 1

It seems your issue is because you're not calling initMap, at least from the code you provided. Can you give more insight on the issue?

$(document).ready(function() {
    initMap();
});