Google maps API not working, map only shows after I resize or refresh the page?

Question

The resize event does not work for me.

Basically only a gray box loads up initially, it is only when I refresh or resize the browser that the map then loads fully .

The code I am using is given below for the maps:

<script>
    function initMap() {

        var center1 = {
            lat: 51.258426,
            lng: -1.361344
        };
        var londoneye = {
            lat: 51.503331,
            lng: -0.119543
        };
        var bigben = {
            lat: 51.500726,
            lng: -0.124629
        };
        var tower = {
            lat: 51.508139,
            lng: -0.075939
        };
        var ss = {
            lat: 51.449164,
            lng: -2.608417
        };
        var windsor = {
            lat: 51.483907,
            lng: -0.604435
        };
        var stone = {
            lat: 51.178895,
            lng: -1.826215
        };
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 8,
            center: center1
        });

        var map1 = new google.maps.Map(document.getElementById('map1'), {
            zoom: 14,
            center: londoneye
        });

        var map2 = new google.maps.Map(document.getElementById('map2'), {
            zoom: 14,
            center: bigben
        });

        var map3 = new google.maps.Map(document.getElementById('map3'), {
            zoom: 14,
            center: tower
        });

        var map4 = new google.maps.Map(document.getElementById('map4'), {
            zoom: 14,
            center: ss
        });

        var map5 = new google.maps.Map(document.getElementById('map5'), {
            zoom: 14,
            center: windsor
        });

        var map6 = new google.maps.Map(document.getElementById('map6'), {
            zoom: 14,
            center: stone
        });

        var boundary = new google.maps.Map(document.getElementById('boundary'), {
            zoom: 8,
            center: center1
        });

        var cityCircle = new google.maps.Circle({
            strokeColor: '#000000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.1,
            map: boundary,
            center: center1,
            radius: 100000
        });

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

        var marker12 = new google.maps.Marker({
            position: londoneye,
            map: map1
        });

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

        var marker22 = new google.maps.Marker({
            position: bigben,
            map: map2
        });

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

        var marker32 = new google.maps.Marker({
            position: tower,
            map: map3
        });

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

        var marker42 = new google.maps.Marker({
            position: ss,
            map: map4
        });

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

        var marker52 = new google.maps.Marker({
            position: windsor,
            map: map5
        });

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

        var marker62 = new google.maps.Marker({
            position: stone,
            map: map6
        });


        var marker1content = '<b><font color="black">London Eye</font></b>'
        var marker2content = '<b><font color="black">Big Ben</font></b>'
        var marker3content = '<b><font color="black">Tower of London</font></b>'
        var marker4content = '<b><font color="black">SS Great Brtain</font></b>'
        var marker5content = '<b><font color="black">Windsor Castle</font></b>'
        var marker6content = '<b><font color="black">Stonehenge</font></b>'

        var infowindow1 = new google.maps.InfoWindow({
            content: marker1content
        });

        var infowindow2 = new google.maps.InfoWindow({
            content: marker2content
        });
        var infowindow3 = new google.maps.InfoWindow({
            content: marker3content
        });
        var infowindow4 = new google.maps.InfoWindow({
            content: marker4content
        });
        var infowindow5 = new google.maps.InfoWindow({
            content: marker5content
        });
        var infowindow6 = new google.maps.InfoWindow({
            content: marker6content
        });


        marker1.addListener('click', function() {
            infowindow1.open(map, marker1);
        });
        marker2.addListener('click', function() {
            infowindow2.open(map, marker2);
        });
        marker3.addListener('click', function() {
            infowindow3.open(map, marker3);
        });
        marker4.addListener('click', function() {
            infowindow4.open(map, marker4);
        });
        marker5.addListener('click', function() {
            infowindow5.open(map, marker5);
        });
        marker6.addListener('click', function() {
            infowindow6.open(map, marker6);
        });
    }
</script>

I have looked at the browser console and there are no errors.

As I said before, I have also tried the resize function as mentioned by all the other similar threads.

Edit: I have also added the CSS below as per request, each id then corresponds to a div.

#map {
        height: 400px;
        width: 100%;

          margin: 0 auto;
          margin-top: 10%;   
       }

     #map1{

        height: 400px;
        width: 100%;

          margin: 0 auto;
          margin-top: 10%;
         }

     #map2{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
            }
      #map3{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
        }

     #map4{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
        }

     #map5{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
          }

     #map6{
        height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;
          }

     #boundary{

       height: 400px;
        width: 100%;
          margin: 0 auto;
          margin-top: 10%;  
          }

Might need to see your html and css that sizes the maps. Also for good debugging purposes...comment out everything but one map..get that one working and then apply to others. Which you may have already thought of or done. — user1628733, Jul 27 '17 at 18:21
I have the same issue, here is a video: https://youtu.be/CGxR21h5WBQ Turn subtitles on. The console is on "verbose" mode. — Mr.Web, Sep 07 '17 at 09:33
@JorgeValle here is the HTML: https://jsfiddle.net/x6L72jbg/2/ — Mr.Web, Sep 08 '17 at 08:58
@Mr.Web For me, your code is working. Can you display the html part, please? — SphynxTech, Sep 08 '17 at 15:54
@Azzie the map in [your fiddle](https://jsfiddle.net/x6L72jbg/2/) [works for me](https://jsfiddle.net/geocodezip/x6L72jbg/3/) if I add the CSS posted in your question and fix the loading of the API. Please provide a [mcve] that demonstrates the issue you are asking about (**in the question itself**) — geocodezip, Sep 11 '17 at 16:53
how you invoke your `initMap()` function? how you included google maps lib? — Ivan, Sep 14 '17 at 08:55

score 2 · Answer 1 · answered Sep 09 '17 at 09:19

I tested this way too much and I found out it depends on some other script that stops the map rendering as well as other renderings.

It is probably a script that uses the window.resize method and the problem solves if you remove the custom resize script (ie: Bootstrap or theme resize js script)

The temporary solution I found is to fire a window resize once the map has loaded, something like:

var upd = setInterval(function(){
    window.dispatchEvent(new Event('resize'));
    clearInterval(upd)
}, 2000)

user1628733 · Answer 2 · 2017-07-28T12:07:35.897

0

I took your javascript and css; used my own api key and html layout and all maps loaded just fine. I would recommend you put an alert/console.log into your initMap function to verify you are getting into this function call.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
    /*Your CSS Here*/
    /*#map {

    }
    ...*/
</style>
<script type="text/javascript">
    //initMap function Here
    //function initMap() {
    //    //Code
    //}
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=[API-Key-No-Brackets]&callback=initMap"> //Add Your API Key
</script>

</head>
<body>
<div id="map"></div>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>
<div id="map4"></div>
<div id="map5"></div>
<div id="map6"></div>
<div id="boundary"></div>
</body>
</html>

edited Jul 28 '17 at 12:07

answered Jul 27 '17 at 19:36

user1628733

156
1
8

how would i put that? could you please show me how to write it in code format? – Azzie Jul 27 '17 at 20:13
yes i have already done that , i have already got the initmap() function and inside is the code for the maps – Azzie Jul 28 '17 at 16:22
i have also restarted the code and also produced a new API key but the result is still the same – Azzie Jul 28 '17 at 16:40

score 0 · Answer 3 · answered Mar 12 '18 at 22:12

0

I find some very simply solution.... just change "async" to "sync".... i googled hours and found only discusion like this... than i tried changed to "sync"... And it WORKS!!!

answered Mar 12 '18 at 22:12

dishdx

1

score 0 · Answer 4 · answered Aug 25 '20 at 09:35

0

My solution was to init the map only when the div is shown. So I removed the init in the maps api url, and I called it manually after showing the map.

answered Aug 25 '20 at 09:35

johanvs

4,273
3
24
26

Google maps API not working, map only shows after I resize or refresh the page?

4 Answers4