Adjusting Google Map Size

Support
#1

I’m looking to fill an entire column/row with a map. It seems the iframe height and width are ignored.

#2

Hi There,

Thanks for writing in! Could you please provide us with the link to your referenced page, so that we can assist you accordingly.

Thanks!

#3

Sure. Here ya go: http://181.224.153.154/~capacitr/lackey
Currently I’ve added a background image as a placeholder for the map.

#4

Hello @Capacitron,

Thanks for asking. :slight_smile:

Please remove/adjust ( max-width: 500px;) values in following custom CSS code.

.el59.x-frame {width: 100%; max-width: 500px; font-size: 16px; background-color: #ffffff;}

Thanks.

#5

Thanks. But there seems to be 2 instances of class el159.x-frame and index #165 seems to be the master
(index):169
.el59.x-frame {
width: 100% !important;
max-height: 400px;
font-size: 16px;
background-color: #ffffff;
}

AS WELL AS:
(index):165
.el59.x-frame {
width: 100%;
max-width: 500px;
font-size: 16px;
background-color: #ff

#6

Hello There,

Thanks for updating in!

Please remove the maximum width and set it to 100%. Find the “Frame” tab.

Hope this helps.

#7

Awesome. Thanks. I completely missed that “Frame” tab on the Map Element.
However, now it appears that setting frame parameters interferes with other unrelated Sections. For instance Elements are no longer showing and the footer is totally gone. I removed all Global CSS just to remove additional variables.

#8

Hello There,

Thanks for updating in! Please double check the iframe. Would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#9

Done. Secure Note Above.

#10

Hello There,

I was able to logged in and just I suspected, the iframe code is broken.

The correct code should be:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3202.2861889229575!2d-121.92388968437761!3d36.61949728554968!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzbCsDM3JzEwLjIiTiAxMjHCsDU1JzE4LjEiVw!5e0!3m2!1sen!2sus!4v1514498122269"></iframe>

There might be other codes removed from the code. Please go to the Google Maps and get the map embed code again. Please share it in your next reply so that we can test it in our local testing server as well.

And by the way, I noticed that you are hosted in SiteGround. Could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Hope this helps.

#11

Good catch! Yep it works now.
Yeah I’m aware of the SG Plugin etc. Are you suggesting to disable it permanently or simply when trying to diagnose problems?

#12

Hey There,

You may disable it temporarily. Once your done with editing and ready launch the live site, you can turn it on again. Just remember that if the site displays odd, purge the site cache and it should display perfect again.

Hope this helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.