Makes maps responsive

Linked issue contains a fix for this - if anyone would like to knock up a patch that includes it, I'll accept it.

Patch sets max-width to none.

I understand why this works, and it is great that such a simple addition will enable a responsive map sizing.

However, wouldn't we get the same effect if we just set min-width, and didn't set either max-width or width? This would be easier code to understand, so unless there is a CSS-support quirk to do with min-width that we need to avoid, min-width would be preferable. Also going to need to make this configurable as not everyone will want a map that scales to fill the available space...

I will work on this soon, but if someone wants to get in first with an updated patch, ideally that you've tested cross-browser, you'll get attribution!

In my opinion, this is a feature request, not a bug report.

Marking #1678910: Support for responsive layouts as a duplicate of this issue, and updating title here.

Implementing this myself as proposed didn't work. I then noticed that IshaDakota's patch (which I didn't use) has invalid syntax in the CSS anyway, suggesting there is no way that the code base that patch was based on was actually achieving the desired result. I'm going to assume that the patch was based on just implementing what was claimed to work, without testing it.

I'm pretty sure the issue here is that a Google Map simply doesn't resize just because its surrounding div is changing as the viewport size changes. That being the case, this may be a lot more complex to implement than had been suggested.

Edit: It occurs to me that the original issue and patch weren't trying to make the map responsive, per se, just to stop the map breaking in the responsive layout it was embedded in. I don't see those original problems when testing in the Omega theme, so therefore am not seeing the fix. But it might still be that this is fixing something. I'll try Zen responsive and see...

OK. Initial commit fixes the rendering issues with the map controls in the Zen responsive layout. In fact, you can't add the max-width: none CSS property into the module code as it needs to be applied to the image supplied by Google, so instead I've added a CSS file that only loads on the map page, and which applies the necessary fix to the image. Further testing welcome but this should not break anything so after my own testing I've committed it to the 7.x-2.x-dev branch.

Note that with this fix the map itself is still a static size but just renders correctly, including the map controls, when inside the Zen responsive layout. I am still interested to add an option for the map to be fully responsive within a responsive layout, but this will depend on what Google provides at their end I suspect. And now that I actually understand the original problem the OP was discussing properly, I agree this was a bug report not a feature request! But we've moved it on to a feature request with the wider vision of making it fully responsive, so I'll keep that status now. :)

Following. Same issue/result needed but for the Omega responsive theme system. I would have implemented via css but the google image type doesn't seem to respond to height: auto which I would have used in conjunction with width: 100%.

Q

Subscribing to this, but I'd need responsive size for the Corolla theme (mean : Adaptive Theme subthemes).

This module is excellent BTW : perfect for simple websites without needs for complex mapping systems. Definitely fills a gap. Thanks.

I am also interested to have the locationmap in a responsive way. I think it would be a good option to have width and height to be set on a percentage base as well (as proposed here: https://drupal.org/node/2094063). This way the map will be responsive. Although if you resize the window without reload the map gets only cropped, this is not nice. But if you load the map on different devices with different screen size the map will fit responsive. So I think this is far better then fixed px width for responsive layouts.

+1

I've actually managed to make the map responsive as follows:

locationmap.css:

#locationmap_map {
}

-----

locationmap.module - I set the width to a percentage and the height to a fixed value.

function theme_locationmap_map($variables) {
  
   ...
 
  return ('<div id="locationmap_map" style="width: 90%; height: 500px"></div>');
}

---

locationmap.js - before the last if statement add the following event
This will center the marker on window resize

      google.maps.event.addDomListener(window, 'resize', function(){
        map.panTo(mapOptions.center);
      });

#locationmap_map {
}

Adding this to the CSS file does nothing, unless you are implying by this that existing content in the CSS file should be removed?

Submitting an actual patch against the module will make for a much clearer target to test against. See https://drupal.org/patch/submit

#11 worked for me.

I'm closing it because the issue was created a long time ago without any further steps.

if you still need it then raise a new one.
thanks