How to make the gmap map responsive

[NooseLadder]

I'm using the GMAP module to display a Google map. I'm using the default display method <?php echo $page->map; ?>.

I would like to have the map resize responsively. Any ideas how to go about this. Would I have to manually code the map?

[diogo]

I never used this module, but assuming that it creates an iframe, this could do the trick http://stackoverflow.com/questions/12676725/responsive-iframe-google-maps-and-weird-resizing

[Martijn Geerts]

The same trick as fluid video see link diogo. ( the same trick ryan lately have added to videoEmbed )

or: http://css-tricks.co...dWidthVideo.php

here's the original I think: http://www.alistapar...tios-for-video/

[NooseLadder]

Hi and thanks for the replies. The module didn't seem to produce an iframe, so I resorted to adding the code provided by Google Maps (iframe).

I also used the method from the CSS-Tricks article (Thanks Martijn). The css as follows:

.map_container {
position:relative;
padding-bottom:56.25%; /* 16:9 */
padding-top:25px;
height:0;
max-width:90%;
margin:0 auto;
}
.map_container iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

HTML

<div class="map_container">
<iframe> ---Google code here-- </iframe>
<!-- end .map_container --></div>

This makes the map responsive in my desktop browsers but when I view on a mobile (I tried a HTC Wildfire and Blackberry) the map is displayed at full dimensions, so you have to scroll horizontally and vertically. I'm not sure if this is due to the code or to Google maps?

[Martijn Geerts]

have you set the viewport in the header ?

if not, this one works for me:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

[NooseLadder]

Thanks Martijn, but I have already set that. The rest of the site scales as required, it's just the Google map that is a problem. As I said earlier, the map scales on my desktop pc when I resize the browser but when displayed on a mobile device it doesn't.

[Adam Kiss]

Hey there,

reading through the module (just briefly), it seems that this module uses preferred method of gmaps - drawing inside DIV (not sure if it's canvas or some div structure).

Anyway, when we at Bonetics implemented this (http://bonetics.com/contact/), we've used one relative DIV as a wrapper, which had one 100%x100% absolute div child with id #google-maps (for example). Now, the div you draw the maps into is the absolute one, and you apply responsive resize to the relative one.

Hope that helps.

[DaveP]

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio describes a method that works.

[Adam Kiss]

http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio describes a method that works.

Yeah, but technically you most often don't want to have the same aspect ration because of different content techniques you can use while being responsive: e.g. you may want to have mobile contact consist of map+address, or you can have map as large as one screen and address as another one. For instance

[NooseLadder]

Anyway, when we at Bonetics implemented this (http://bonetics.com/contact/), we've used one relative DIV as a wrapper, which had one 100%x100% absolute div child with id #google-maps (for example). Now, the div you draw the maps into is the absolute one, and you apply responsive resize to the relative one.

@adamkiss Thanks for the reply. I had a look at your map on bonetics.com, I like the way you styled it btw, for some reason it (the map) doesn't seem to resize either in a browser or on a mobile device (I quickly checked using an HTC Wildfire 240 x 320px). Edit: I see that the rest of the site resizes down to 320px but below that it reverts to a larger screen display.

So checking the map at 320px I still get the scrolling problem with your map that I also have on the one I have implemented.