Google Maps HTML responsive for websites

Question

I am building a website on wix.com and I added a map with google maps. My code is as follow:

<iframe width="950" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJya9E14i2xUcRLWzbVXjmqMg&key=API_KEY&zoom=15" allowfullscreen></iframe>

On PC it looks good, but on mobile phones it looks like this:

How do I make it so that it adjusts size on mobile phone so that people don't have to use scroll bars, but also so that they can click the route and save button?

score 1 · Answer 1 · answered Aug 24 '17 at 18:25

1

Set the width to 100% so that it spans to the width of the phone without overflowing, then to handle it being too large on regular computers give it a max-width of 950.

<iframe width="100%" max-width="950" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJya9E14i2xUcRLWzbVXjmqMg&key=API_KEY&zoom=15" allowfullscreen></iframe>

answered Aug 24 '17 at 18:25

Tom Haynes

93
5

Thanks, but can I also use max-height with height 100% and make it so that the zoom is also responsive? – J.K. Harthoorn Aug 24 '17 at 19:16
You can use max-height yes, alternatively it might be worth looking up viewports so that you can get the dimensions of devices that the site is being used on and adapt it to that. – Tom Haynes Aug 24 '17 at 19:21
I'm afraid I don't know about the zooming, if it's not working by default then perhaps Google doesn't allow it through embeds – Tom Haynes Aug 24 '17 at 19:22
Max-height also isnt posible? – J.K. Harthoorn Aug 24 '17 at 19:38

Google Maps HTML responsive for websites

1 Answers1