Google Maps 100% width (using Inline frame)

Hi! I’m trying to get an inline frame with a google maps location to 100% width, but can’t seem to get it done. Is it even possible?

Hi jesseltje,

Hmm, could you give some more details on how you’d like the Google Maps location to resize to 100% width? If you’d like the iframe to resize to 100% of the browser’s width, you can add a “Set Size” interaction to the page’s OnPageLoad or OnWindowResize to set the size of the Inline Frame widget to [[window.width]]. If you’re able to post your RP file here for me to test, that should also give me a better idea of what you’re trying to build. Ty!

Hi Jane,

Thank you for your reply and your help. I’ve added my RP file. You can find the Google Maps above the footer.opzet.rp (27.0 MB)

Hi jesseltje,

Thanks for posting that! I see the problem now. It looks like the page is set to center-align, so the dynamic panel containing the Google Maps iframe is always starting at the center of the page. Using back color or image inside the DP wouldn’t help either, as I’m assuming you want the Google Maps content dynamic.

While this isn’t the best option, one solution is to:

  1. Set the page to left-align.
  2. Set the dynamic panel to “Fit to Content” (so that the container always resizes to its content).
  3. Resize the iframe to [[window.width]] on load of the page.
  4. Encompass all content on the page, except for the iframe DP, into a group (right-click > “Group”).
  5. Move the Group to ([[window.width/2 - target.width/2]], [[target.y]]) OnPageLoad/OnWindowResize.

What this is doing is essentially "center"ing the page, by moving all content on the page to the center, depending on the width of the browser window and the width of the group. The iframe would be excluded from this center interaction so that it fills the entire browser window, even without the “100% Wide” setting selected.

I’ve attached an edited version of your file to demonstrate this. Hopefully that helps!

opzet_EDIT.rp (27.0 MB)

Jane, thank you so much. It works exactly like i needed it to. Thank you!

That’s not the final solution, because on the big screens you’ll disproportion:

I see! Does anybody have a solution for this problem?

Hi jesseltje,

The edited file should work on bigger screen sizes - it just won’t look pretty/fluid when resizing the browser window to the bigger size. After resizing the browser window, try refreshing the page and you’ll see that the OnPageLoad/OnWindowResize takes care of moving the content to the center of the page.

If you’d like the prototype to center fluidly on window resize, then I may suggest center-aligning the page as before and then adding a static Google Maps image in replace of the iframe. As you’ve found, there isn’t a way to move content on a center-aligned page to (0, y) without removing the center-align (or pinning the DP), but hopefully this helps a bit!