fix map not showing up when first initialized without a height

[rbellens]

When the map is initialized and the element has no height (clientHeight=0), e.g. when one of the parents are not yet attached, the map will never show up. This is because google maps adds a position: relative to the style of the map element. Calling, the notifyResize will not help in this case. Forcing absolute position, fixes this problem (notifyResize is still needed).

[ebidel]

This shouldn't be needed. These styles are within shadow dom.

Can you post a jsbin that repos the issue you're seeing?

[Jookus]

In my webapp that commit just solved my problem with two google-map- elements inside of iron-pages. In that case the second element is always loaded without a height and even the functions resize() and notifyResize() do not help. Thank you!

Here is an example for that problem (without the api-code for google-map) https://plnkr.co/edit/UZF42lzeocb1h0S4xBNM?p=preview

[sebastianroming]

I have the same problem here. Could we merge and release that? Also I experience the same problem as @Jookus: The map is loaded after adding !important to the google-map.html file, but it's only shown grey:

After resizing (opening Chrome Developer tools is enough), the map is rendered correctly.

I already added the following, but nothing happens:

ready: function() {
    var map = this.$['map-element'];
    map.addEventListener('google-map-ready', function(e) {
        map.notifyResize();
        map.resize();
    });
 }

The event is fired, but nothing happens...

Even when I add a paper-button with onClick event, the map is rendered correctly afterwards:

<paper-button id='btn' on-click='_resizer'>resize</paper-button>
...
_resizer: function() {
    this.$['map-element'].resize();
}

[ebidel]

There's workarounds posted in https://github.com/GoogleWebComponents/google-map/issues/259#issuecomment-184753203 on how to resize the map with iron-pages. One good technique is to wrap <google-map> with a conditional <template is="dom-if"> and make the conditional bound to the select of the map page. That will prevent rendering issues and is also good for perf, since you're delaying the load of the api, the map, etc. on page load.