Jump to content

How to make the gmap map responsive


NooseLadder
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...