Streaming live at 10am (PST)

Problem embedding custom Google Map


#1

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)


#2

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>


#3

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


#4

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


#5

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


#6

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