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 https://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

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Which part of that thread solved your problem?
Matt Holovach

Matt Holovach 0 points

4 years ago

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%;
height:400px;
margin-bottom: 40px; 
}
.cmsmap {
width: 100%;
height:400px;
}
.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>
</div>
Andy Clark

Andy Clark 0 points

4 years ago

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" />
Matt Holovach

Matt Holovach 0 points

4 years ago

Andy,

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.