Hello, I was wondering how
to make my full width google maps
responsive. PAGE
Should it be set in a container?
I tried giving a width of 100% and a max-width
but that didnt work.
This is how I have it in my HTML:
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
You map looks fine to me! Maybe it is the centering of the map that is bothering you?
That’s the only possible issue I see. The map stays full width, but —
If you load the page wide you’ll see the map
LEFT - MIDDLE - RIGHT
and when you narrow the page instead of seeing
left - middle - right
you see
LEFT - MID
I’m not sure how much of a problem this is. Are many visitors in the habit of narrowing the page? Do they not know how to zoom / move the map image?
Just the same, it is a bit wonky I guess.
what I meant is making it responsive when you scale the browser
down. like for the map to scale according to the browser width
but I guess an option can be for people to just drag on the map too…
Well, to me it looks like the map container is responsive.
As for having the map itself appear differently I don’t know if that can be handled with media queries alone. I have a feeling JavaScript might be needed to change the GET variable values, if the API even has such a feature.
As I posted previously
Have you received complaints from visitors?
The div#map-canvas that holds the map has a fixed height of 500px. You could try the “intrinsic ratio” method and have height:0 and padding-top or padding-bottom 50%, to have the box resize the height of the map to half it’s width. As for the re-centering of the map, and maybe zooming out to contain all the pins, you need to check the fitBounds method of Google maps. Let me find a working example and get back to you.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.