Greetings,

Is there anyway to easily make the map responsive without resorting to javascript? Thanks

CommentFileSizeAuthor
#6 IPGV&M new Google Maps option.png124.07 KBrdeboer

Comments

pyxio’s picture

pyxio commented

Hi,

Is there no way to achieve this? For example the default map height at 300px fills up the entire screen of a mobile phone. If I try to use percentage as a height the map disappears. I am unable to override default map height in css to use media queries because the height is added inline with js. I appreciate any advice on this. Thanks.

pyxio’s picture

pyxio commented
Status: Active » Closed (fixed)

I solved this problem by commenting out line 21 of ip_geoloc.module:
//define('IP_GEOLOC_MAP_DIV_DEFAULT_STYLE', 'height:300px');

and then I was able to use media queries in my css to control map height across different devices. Hope this helps somebody else. Cheers

pyxio’s picture

pyxio commented

Just wanted to add that by commenting out that line produces the following notice....

Notice: Use of undefined constant IP_GEOLOC_MAP_DIV_DEFAULT_STYLE - assumed 'IP_GEOLOC_MAP_DIV_DEFAULT_STYLE' in ip_geoloc_plugin_style_map->render() (line 119 of /var/www/mysite/sites/all/modules/ip_geoloc/views/ip_geoloc_plugin_style_map.inc).

doesn't appear to be harmful at all.... a fix to suppress that would be nice though.

rdeboer’s picture

rdeboer
Location Melbourne
commented
Status: Closed (fixed) » Active

Nice work, drupalstrap.
Came across this accidentally, as the issue was closed by the original poster. Closed issue don't show up by default.
Reopening so that I'm reminded to look into this a bit more.
Rik

mr. chips’s picture

mr. chips commented

Exactly the same thing here. Thanks drupalstrap! Note that remming out line 21 then requires you to set a height or the map won't show. I used:

div#ip-geoloc-map-of-view-my_module-my_view{
    height: 300px;
}

for all of my media queries, just changing the height accordingly.

rdeboer’s picture

rdeboer
Location Melbourne
commented
Title: Responsive map » Responsive Google map
Assigned: Unassigned » rdeboer
Status: Active » Fixed
StatusFileSize
new IPGV&M new Google Maps option.png124.07 KB

You can achieve drupal_strap's trick more elegantly in 7.x-1.25 not by changing code, but simply entering a space for the Map style (CSS attributes).

As Mr.Chips notes above, you then must set the height of the map through CSS in any .css file included with your theme. Otherwise the map will not show at all.

For 7.x-1.26 (7.x-1.x-dev for now) I checked in a mod that allows you to enter <none> to achieve the same effect.

See the top option in the screenshot below.

New IPGV&M option for Goolgle maps

Finally, whether you specify a height or not through the IPGV&M configuration, something like this will always override it:

div#ip-geoloc-map-of-view-VIEW-DISPLAY {
    height: 180px !important;
}

Rik

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

xaa’s picture

xaa commented

hi Rik, thanks for the trick. Unfortunately force the height with !important is not ok for the fullscreen mode.

xaa’s picture

xaa commented

added a class .leaflet-fullscreen-on:

div#ip-geoloc-map-of-view-VIEW-DISPLAY.leaflet-fullscreen-on{
  height: 100% !important;  
  width:100% !important;
}
rdeboer’s picture

rdeboer
Location Melbourne
commented

Thanks xaa. You are right.
Yes, at the time the CSS in #6 was suggested there was no fullscreen mode yet!

xaa’s picture

xaa commented

I notice the view ID changes everytime the view format map settings are edited.

Here is my new css to target the maps : 

.context-xxx .ip-geoloc-map div.leaflet-container{
  height: XXXpx !important;
  width: 100% !important;
}
.context-xxx .ip-geoloc-map div.leaflet-container.leaflet-fullscreen-on{
  height: 100% !important;
  width: 100% !important;
}