Problem embedding custom Google Map

Hi everyone,
I have made a custom google map on my site which i have put in with the embed tool- it looks great on a desktop but when i switch to iPad, or phone view the map spans the whole page and i cant seem to use my div to squash it. Im guessing its because the size is set within the embed code but obviously if i change the code to make the map small enough for phone view then it looks too small on the desktop. Anyone got any ideas how to work around this?
Thanks!
Romily

https://preview.webflow.com/preview/lcaxoxo?preview=3a46f86bf1fd17435444d32009a3669a


Here is my public share link: LINK
(how to access public share link)

In the embed code for Google Maps, change the width to 100%. Then you can drop the map in a div block inside Webflow, allowing you to control the width for all breakpoints. :smile:

What you have:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2356.3172125025526!2d-1.5353899340537902!3d53.80163898007694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795c11ed87c837%3A0x78678b8b2585b1e!2sRegent+St%2C+Leeds%2C+West+Yorkshire+LS2+7QA!5e0!3m2!1sen!2suk!4v1455270132132" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

What you need:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2356.3172125025526!2d-1.5353899340537902!3d53.80163898007694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795c11ed87c837%3A0x78678b8b2585b1e!2sRegent+St%2C+Leeds%2C+West+Yorkshire+LS2+7QA!5e0!3m2!1sen!2suk!4v1455270132132" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

1 Like

have you tried using the native Map component instead of pasting in code?

1 Like

Can’t believe I haven’t noticed that, @PixelGeek! Love it!

1 Like

just realised i forgot to say thank you to everyone! problem solved. thank you!!!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.