Google Maps Javascript API not loading reliably

Question

I have a page which displays a google map however the page does not consistently load the map especially when navigating to the page from an href in another page. I am running it on Chrome on Desktop and on Android and the problem is persistent on both platforms.

I've tried to remove the async and loading the api after I call my script however it has not helped to solve the consistency.

This is my HTML file with my API key removed

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Locations</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg fixed-top ">
    <!--Collapse button-->
    <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#main-navigation"
            aria-controls="navbarSupportedContent20" aria-expanded="false" aria-label="Toggle navigation">
        <div class="animated-icon1"><span></span><span></span><span></span></div>
    </button>
    <div class="collapse navbar-collapse" id="main-navigation">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link font-weight-bolder" href="index.html">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bolder" href="about.html">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link font-weight-bolder" href="#">Gallery</a>
            </li>
        </ul>
    </div>
</nav>
<div id="map-container" class="map-container">
</div>
<script src="../jquery-3.4.1.js"></script>
<script src="../bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="js/js.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=**I PUT MY KEY HERE**&callback=initMap" defer></script>
</body>
</html>

This is my Javascript file

$(function () {
   function initMap() {
       var center = new google.maps.LatLng(35.898541, 14.451447);
       var giuseppis = new google.maps.LatLng(35.948172, 14.428273);
       var rubino = new google.maps.LatLng(35.899200, 14.512016);
       var mezzodi = new google.maps.LatLng(35.896713, 14.510441);

       var mapCanvas = document.getElementById('map-container');
       var mapOptions = {
           center: center,
           zoom: 12,
           styles: [
               {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
               {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
               {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
               {
                   featureType: 'administrative.locality',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#d59563'}]
               },
               {
                   featureType: 'poi',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#d59563'}]
               },
               {
                   featureType: 'poi.park',
                   elementType: 'geometry',
                   stylers: [{color: '#263c3f'}]
               },
               {
                   featureType: 'poi.park',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#6b9a76'}]
               },
               {
                   featureType: 'road',
                   elementType: 'geometry',
                   stylers: [{color: '#38414e'}]
               },
               {
                   featureType: 'road',
                   elementType: 'geometry.stroke',
                   stylers: [{color: '#212a37'}]
               },
               {
                   featureType: 'road',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#9ca5b3'}]
               },
               {
                   featureType: 'road.highway',
                   elementType: 'geometry',
                   stylers: [{color: '#746855'}]
               },
               {
                   featureType: 'road.highway',
                   elementType: 'geometry.stroke',
                   stylers: [{color: '#1f2835'}]
               },
               {
                   featureType: 'road.highway',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#f3d19c'}]
               },
               {
                   featureType: 'transit',
                   elementType: 'geometry',
                   stylers: [{color: '#2f3948'}]
               },
               {
                   featureType: 'transit.station',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#d59563'}]
               },
               {
                   featureType: 'water',
                   elementType: 'geometry',
                   stylers: [{color: '#17263c'}]
               },
               {
                   featureType: 'water',
                   elementType: 'labels.text.fill',
                   stylers: [{color: '#515c6d'}]
               },
               {
                   featureType: 'water',
                   elementType: 'labels.text.stroke',
                   stylers: [{color: '#17263c'}]
               }
           ],
           disableDefaultUI: true,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       var map = new google.maps.Map(mapCanvas, mapOptions);

       var markerImage = '../assets/marker.png';

       var marker = new google.maps.Marker({
           position: giuseppis,
           map: map,
       });

       var marker2 = new google.maps.Marker({
           position: rubino,
           map: map,
       });

       var marker3 = new google.maps.Marker({
           position: mezzodi,
           map: map,
       });

       var contentString = '<div class="info-window">' +
           '<h3>Giuseppi\'s Bar & Bistro</h3>' +
           '<div class="info-content">' +
           '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
           '</div>' +
           '</div>';

       var contentString2 = '<div class="info-window">' +
           '<h3>Rubino</h3>' +
           '<div class="info-content">' +
           '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
           '</div>' +
           '</div>';

       var contentString3 = '<div class="info-window">' +
           '<h3>Mezzodi</h3>' +
           '<div class="info-content">' +
           '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
           '</div>' +
           '</div>';

       var infoWindow = new google.maps.InfoWindow({
           content: contentString,
           maxWidth: 400
       });

       var infoWindow2 = new google.maps.InfoWindow({
           content: contentString2,
           maxWidth: 400
       });

       var infoWindow3 = new google.maps.InfoWindow({
           content: contentString3,
           maxWidth: 400
       });

       marker3.addListener('click', function () {
           infoWindow3.open(map, marker3);
       });

       marker2.addListener('click', function () {
           infoWindow2.open(map, marker2);
       });

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

   google.maps.event.addDomListener(window, 'load', initMap());
    $(document).bind("projectLoadComplete", initialize);
});

The website is live on this url: https://michaeldiacono-e9629.firebaseapp.com/

On your live page, I see Uncaught ReferenceError: google is not defined on this line: google.maps.event.addDomListener(window, 'load', initMap()); — geocodezip
– geocodezip, Commented Sep 20, 2019 at 13:24

evan · Accepted Answer · 2019-09-22 16:21:58Z

You are getting this error:

Uncaught (in promise) "initMap is not a function"

Because your initMap function is scoped within jquery's document.ready so you are asynchronously calling a global function that is never found as it's in fact not globally defined. The method only gets executed (and hence your map does load most times) because you call it again in your onload dom listener inside jquery's document.ready.

You can fix this in multiple ways, e.g. by placing this method in global scope, loading the Maps API synchronously, lazy loading it... Most recommended approach is to use a callback.

Check out related threads:
Google maps API can't find a callback defined in $(document).ready
Moving google maps api code to separate file + jquery

Hope this helps you.

Collectives™ on Stack Overflow

Google Maps Javascript API not loading reliably

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related