google-map does not render to its size when used in core-animated-pages when it is in secion 1+ about google-map

[bamnet]

Can you link to a sample which reproduces this?

[ebidel]

I believe the problem is related to the fact that the map's container is display: none initially. From here, the fix is:

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

Haven't tested, but we can bake something like this into the map element.

[ebidel]

Unfortunately, there's no good way to detect when the parent element of the map becomes visible. I got it working by polling if .offsetParent was set using rAF callbacks, but that's not ideal. If core-animated-pages were to fire an event, the client can call mapEl.resize() to ensure the map is displayed properly. That method already has the google.maps.event.trigger(map, 'resize'); trick.

In the general case, mapEl.resize() will adjust the map to display properly.

[sjmiles]

Fwiw, this is a common problem and we need to work out a way to inform downstream elements of these kind of changes. I'm reluctant to get into broadcasting, but I don't have any better ideas at the moment.

[addyosmani]

Are there perf implications of excessive broadcasting you're concerned of?

[ebidel]

We almost need a platform primitive to know if an element is in the render tree.

[ebidel]

core-animated-pages now fires the "core-animated-pages-transition-prepare" event when transitions occur: googlearchive/core-animated-pages@e18d5bf

This should do the trick:

animatedPagesEl.addEventListener('core-animated-pages-transition-prepare', function() {
  mapsEl.resize();
});

[ebidel]

@tobiashutterer we moved this to the GoogleWebComponents org and will be keeping the release version up to date more frequently. You'll get the latest when using the plain bower install GoogleWebComponents/google-map.

Closing this as the workaround is posted above for the original issue.

[phidias51]

I've noticed the same problem when embedding the map in a core-pages element or a core-collapse element. It looks like the map is being translated up and to the left, leaving grey space behind in its wake. The position is not centered in the middle of the map. Also, the map.resize() call is causing the original lat/longs to be shifted.

[Zippersk]

I have same problem with neon-animated-pages. I can't find som fire like neon-animated-pages-transition-prepare. Is there any solution to display map?

[atotic]

Pull #152 should have fixed this for neon-animated-pages. Have you tried #master

[Zippersk]

Install master verison helps! Thaks a lot. :)

[kingflurkel]

I still have this bug with neon-animated-pages.
I use this version: "google-map": "GoogleWebComponents/google-map#^1.0.0",
Any help / tips to get this working?

[atotic]

@kingflurkel if you have a test case, I can take a look

[kingflurkel]

EDIT / removed link to very unfinished work

[atotic]

Thanks.
google-map is not getting the iron-resize event. I'll have to dig in to
find out why.

On Thu, Jul 9, 2015 at 11:08 AM, Michael Thuy [email protected]
wrote:

http://actaanbod.bitballoon.com/
Click on the location icon. So I have google-map within
iron-animated-pages.
Code:

https://github.com/A-StadLabs/activiteitenaanbod/tree/master/app/elements/a-activiteitenstage

https://github.com/A-StadLabs/activiteitenaanbod/blob/master/app/elements/a-locatie/a-locatie.html

—
Reply to this email directly or view it on GitHub
#33 (comment)
.

[kingflurkel]

Maybe because google-map is in another custom-element, which is in iron-pages?

[atotic]

The problem is in the neon-animated-pages. Because map is inside a custom element, it does not get a notification that it has been shown. Iniside neon-animated-pages:

      this.resizerShouldNotify = function(element) {
        return element == selectedPage;
      }
      this.notifyResize();

This should probably be: if element is selectedPage, or its parent is a selected page.

[atotic]

This issue was moved to PolymerElements/neon-animation#57