google-maps web component display blank

Question

I'm using the google-maps web component in Polymer and followed the example:

<google-map latitude="7.1907"
                longitude="125.4553"
                api-key="{{apiKey}}"
                on-google-map-ready="mapReady"></google-map>

with the style:

google-map {
  width: 100%;
  height: 200px;
  display: block;
}

but it displays like this:

I tried working with the responsiveness and every time the screen changes the maps loads, any ideas or solutions? Thanks

Answer 1

Got the solution now. I used the google-map component resize() method, according to the documentation:

Explicitly resizes the map, updating its center. This is useful if the map does not show after you have unhidden it.

I never hide the map, but I used iron-pages (so it does hide the map) and the map-ready function was called for the first time but the page where the map is placed is currently hidden at that current point (that's why it won't show anything). So I tried refreshing the map after the iron-page will show the page where the map is located.