google maps now showing when you initialize in a display none div

Question

I am initializing a google maps in a display none div and something is wrong, I only see a grey square

<div style="display:none;"  id="divMap">
     <div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">test</button>

but when i remove style="display:none;" it works

I have created a fiddler https://jsfiddle.net/ka8nywrg/2/ you can test it from here. maps is shown when you press the button

what should i do to prevent this situation?

code snippet (from posted fiddle):

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

function showMap(){

document.getElementById("divMap").style.display = 'block'

}

/* 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;
}

<div style="display:none;"  id="divMap">
<div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">show map</button>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Possible duplicate of [Google Maps Display:None Problem](http://stackoverflow.com/questions/4700594/google-maps-displaynone-problem) — Daniel B, Dec 14 '16 at 13:50

score 0 · Answer 1 · answered Dec 14 '16 at 13:56

It is preferred to call the resize method of Maps API V3 on the map when there is a change with respective to the map. The map needs to be rendered again.

google.maps.event.trigger(map, 'resize');

This should help you! whenever you're toggling the display:none property just call the above function too!

score 0 · Answer 2 · answered Dec 14 '16 at 14:15

You need to do two things:

call google.maps.event.trigger(map, 'resize'); to tell the map the div has changed size.
re-set the center of the map once the div's size has been determined:

map.setCenter(mapCenter);

proof of concept fiddle

code snippet:

var map;
var mapCenter = {
  lat: -34.397,
  lng: 150.644
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: mapCenter,
    zoom: 8
  });
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter()
  })
}

function showMap() {

  document.getElementById("divMap").style.display = 'block'
  google.maps.event.trigger(map, 'resize');
  map.setCenter(mapCenter);

}

/* 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;
}

<div style="display:none;" id="divMap">
  <div id="map" style="width:300px; height:300px;"></div>
</div>
<button onclick="showMap();">show map</button>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

google maps now showing when you initialize in a display none div

2 Answers2