Forum

Thread tagged as: Question

Google Map RWD

I have a Google map on my site and it works fine. If I change it to be responsive it momentarily appears then disappears.

The map template

<div class="cmsmap">
  <perch:content id="map" type="map" label="Address" zoom="15" />
</div>

The CSS

.cmsmap{
  width: 400;
  height: 300;
}

The config file


    define('PERCH_RWD', true);

If I inspect the (invisible) map I see the css has been removed

Any pointers appreciated.
Andy Clark

Andy Clark 0 points

  • 6 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Have you read the "Maps and Responsive layouts" section in the docs?

https://docs.grabaperch.com/docs/templates/attributes/type/map/
Andy Clark

Andy Clark 0 points

6 years ago

Yes Drew, I did, that's why I showed the template, css and config above. I'm missing something basic, I just don't know what Here is a link to let you see what I'm getting

If your site is responsive, you may want to make the map flexible. You can do this if Perch is in RWD mode.

  1. Add define('PERCH_RWD', true); to your perch/config/config.php file
  2. Remove the height and width from your map template tag
  3. Save you map
  4. Add CSS to your site to give the map container a default width and height (it gets given the class cmsmap) If you don’t follow that final step of giving the map a default width and height, nothing will display.

I can see the defaults that I added to the cmsmap are being removed by the inline styles

 <div id="dcmsmap3949-1" class="cmsmap" style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;"> etc etc
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Your CSS is missing units. I think you want:

.cmsmap{
  width: 400px;
  height: 300px;
}
Andy Clark

Andy Clark 0 points

6 years ago

Hi Drew, I had tried it with units previously, when I tried it with

.cmsmap{
  width: 400px;
  height: 300px;
}

a map was displayed, but it did not resize. It took up 400x300 on the page. However eventually I found that if I removed the width attribute then it resized to fit the container. So

.cmsmap{
   height: 300px;
}

works, with the sizes coming from perch / google maps at 100%=300px and the width at 100%=container size.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

So everything's resolved?
Andy Clark

Andy Clark 0 points

6 years ago

Well I thought it was last night at midnight when I tested in on my laptop, the map was resizing fine to fill the containing div. However, when I checked on my phone this morning the map was not resizing properly. So I've not had time to check it properly yet.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ok, let me know if you think it comes down to something Perch is doing.