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

any console output? I don´t know about that component, but are sure that this is correct `api-key="{{apiKey}}"` ? — el solo lobo, Aug 30 '16 at 06:34
Tricky thing there's no console or any errors to work on @elsololobo — Isaiah Jan Caracol Navasquez, Aug 30 '16 at 07:34
Well I tried the on-google-map-ready event where it logs 'map ready' and it was fired showing the message on the console. But still a grey screen picture. — Isaiah Jan Caracol Navasquez, Aug 30 '16 at 07:38
try invoking resize on the google-map component. When the view is hidden and then shown, the map shows blank for me so I explicitly call resize after the animation to get the map to show. — getbuckts, Aug 30 '16 at 16:38
Tried invoking it the moment map loads up. Changes nothing :( still a grey picture @getbuckts — Isaiah Jan Caracol Navasquez, Aug 30 '16 at 22:50
I tried working with responsiveness and suddenly it showed up, it only triggered after resizing, any ideas? @elsololobo — Isaiah Jan Caracol Navasquez, Aug 30 '16 at 23:35

score 1 · Answer 1 · edited Aug 20 '17 at 12:24

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.

google-maps web component display blank

1 Answers1