CODEWITHSUNDEEP
javascriptgoogle-mapsfirefoxgoogle-maps-api-3
Matthew Wright
Matthew Wright

Reputation: 1525

Embedded Google Maps tiles not loading in Firefox second page load until zoomed

I am embedding Google Maps for an interactive web application. The map loads fine in Chrome which makes sense. The map has a slightly annoying tile loading issue in Firefox.

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

In Firefox, the map always loads on first page load or page refreshed. When navigating to the same exact page (second page load?) from say the navbar, the is a high chance that the map tiles don't load like they should and you see gray tiles as shown below.

Moving the map up or down loads tiles above and below the initial map center but not the original map center.

The only way to trigger loading the gray tiles is to change the zoom.

I've tried using the zoom trigger with the following code but it doesn't always work. It also doesn't look the best to have the map zoom in and out every page load.

setTimeout(function() {
    internal.map.setZoom(internal.map.getZoom() + 1);

    setTimeout(function() {
        internal.map.setZoom(internal.map.getZoom() - 1);
    }, 200);
}, 200);

Is there a way to fix this without an annoying zoom hack?

I've copied the Google Maps basic sample page and added a link at the top that links to itself. This can be tested by saving as an html file and opening in Firefox, clicking the link several times.

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            /* Always set the map height explicitly to define the size of the div
            * element that contains the map. */
            #map {
                height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div style="height:5rem;text-align:center">
            <a href=".">Link reference (click me!)</a>
        </div>
        <div id="map"></div>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAa-o55aIMt4YC0mhPyp8WfGql5DVg_fp4&callback=initMap"
        async defer></script>
    </body>
</html>

Upvotes: 2

Views: 962

Answers (1)

koubin
koubin

Reputation: 607

Fixed in Firefox 68.0.2, so try the updated one.

Upvotes: 1

Related Questions