We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum


Thread tagged as: Addons, Discussion, Forum

Responsive Maps Code

I was very frustrated with trying to get the code to work with responsive maps I was trying to follow the code on the docs page https://docs.grabaperch.com/templates/field-types/map/

I wanted to write and say the solution seems to be found here http://forum.grabaperch.com/forum/07-09-2015-responsive-map .

As soon as I implemented some of the code suggestions above the responsive map worked. So I am suggesting that the responsive map section in the docs section be re-written to include the code in the post from Chris Comben. As soon as I implemented his code suggestions the responsive maps worked perfectly for me.

Matt Holovach

Matt Holovach 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Which part of that thread solved your problem?

Pretty sure it was the height reference. But specifically I liked his full code example and I pretty much copied it into my work. Also Max-width: none vs max-width: auto. Also, I'm not trying to be critical I just think it would be helpful if someone else was trying to accomplish the same thing I was to see it in docs section.

div.map {
display: block;
width: 100%;
margin-bottom: 40px; 
.cmsmap {
width: 100%;
.cmsmap img {
max-width: none;

<div class="">
<div class="map"><perch:content id="map" type="map" label="Location" zoom="10" /></div>
<div class="cf"></div>

When I followed the docs the map would flash on-screen then disappear.

I found that I had to leave the height attribute in the template for it to work.

<perch:content id="map" type="map" height="300" label="Address" zoom="15" />


I'm wondering if it work either your way or my way. The height attribute I'm specifying is in the CSS while you are specifying it in the template? I don't know for sure, but I definitely believe the height is an issue when you are doing a responsive map. It must be specified somewhere.

Prior to making the adjustments above I was getting the flickering and disappearing as well.