[RESOLVED] Google Map Ignoring INIT Interaction

Design help Animations & Interactions
1

I have a Google Map element (not a Webflow Google Map Widget)

  • being created “on the fly” via the INIT of the page

The map is contained in a DIV that is positions off-screen.

In Preview mode… this works.

In Live mode… the init to reposition the element is ignored.

And also creates a weird display.

See Video:
http://quick.as/4ZyqTmg0

2

UPDATE:

Further testing indicates…

The INIT is NOT being ignore… but it does refuse to position the DIV correctly.

I added a rotate 90 degree on init… and it did it. The map appeared sideways

813×895 590 KB

3

UPDATE:

I used JQuery to

  • successfully move the DIV element 90% down the page (so I could see where it was)
  • after the Google Map element was created

However…

  • (after the Google Map element was created)
    — the DIV sat there @90% for a couple seconds
    ------ then… when the map element became visible
    ------ the entire DIV was shifted to original (wrong) position again.

So this appears to be something the with the visibility of the google map element.

When it becomes visible… it messes things up.

4

RESOLVED.

(In my setup… you may design it differently)

When you dynamically add / create a Google Map Element (not a Webflow Google Map Widget)

  • you have to position the parent container ABSOLUTE.

If you set to FIXED (which is what I did)… it (the map) will reposition the parent element.

Easy enough fix… pia to figure out.