Doesn't render correctly if hidden during loading.

[Zachary Moshansky]

I have an SPA with roughly the following structure:

• neon-animated-pages
  • neon-animatable web component
    • paper-card
      • google-map

If the google-map page is not selected while loading, it fails to render correctly.

By sheer luck I resized the window discovering that it fixed the issue.

Possible Workarounds

(active is a property that is changed to true when the page is selected).

<template is="dom-if" if="[[active]]">
  <google-map latitude="{{_lat}}" longitude="{{_lng}}" fit-to-markers single-info-window>
  ...

or

_activeChanged: function(active) {
  this.$$('google-map').resize();
}

[Eric Bidelman]

Related to #33 (comment), googlearchive/core-animated-pages#10, PolymerElements/iron-pages#13, and others.

Both of those workarounds are the recommended approach when the map does not size itself properly at load time.