POI popup window is not big enough for content

[LakesMarketing]

Hi Chris,

Please can I ask about the popup poi window. I’ve inserted a thumbnail and a couple of lines of text and if I click on the icon on the map the window that pops up is not big enough to contain all the information. If I click on it again then the map shifts up and the poi window sizes correctly.

Here is the screen shot of the problem:

http://countrysidetimes.com/wp-content/uploads/Capture.png
This is on the webpage:

http://countrysidetimes.com/historic-homes

Thanks,

Nick

[LakesMarketing]

Hi Chris,

Any ideas why the pop up poi info window is not big enough to contain the image and text when you first click on it?

Anyone else have this problem?

Thanks

Nick

[Chris]

Hi Nick,

I tried the URL but it looks OK to me using IE9.  What browser are you using?

Some things to try:

– upgrade to the latest version (2.38.7).

– clear your browser’s cache (in case there’s some older javscript)

– when specifying image sizes, include ‘px’, i.e. style=”width:100px;height:100px”

If that doesn’t help let me know and I’ll look again.

[Chris]

Hi Nick,

It can be tricky to get google to resize them properly.  The first thing is to make sure your map is large enough (the window is limited to a % of the map size).

If that’s not the issue, could you please get the latest beta?  It should fix the issue but if not please post or send me a URL where I can see the problem.

http://mappresspro.com/betas

 

 

[LakesMarketing]

Hi Chris,

Thanks for having a look. Yes … your’e right it works for me as well in IE … but not in Chrome or FireFox. I’ve used px in the html code.

I’m currently using beta version 2.38.6 PRO

When I click on my account this looks like the latest version … do I need to go somewhere else to get the 2.38.7 version?

Thanks

 

 

[Chris]

Hi,

I realized I hadn’t published 2.38.7 yet, I’ll publish it today.  I also did some more testing on your site.

Images are loaded asynchronously so Google needs to ‘guess’ how big they’ll be using the CSS settings in the page.  I think the site’s theme is applying this CSS to all the images:

div.bkp-frame img, div.bkp-frame-wrapper img, div.page-bkp-frame-wrapper.gallery img{ max-width: 100%; height: auto; }

The images all have the html attributes for height/width, but Chrome & Firefox seem to ignore them.  Instead they use the CSS settings, and then it can’t determine the size of the images until they’re downloaded.

The result is that the first time you open the infoWindow, you see the image sized wrong.  The second time, the image is cached and the browser can figure out how big it is.

Here’s some suggestions:

1) Specify a CSS style or class with width and height for every image.  That should take precedence over the theme (but it may be a pain with many images).  For example:

<img src='http://whatever' style='width:100px;height:100px' />

2) Or, apply CSS width/height to ALL images in infowindows by adding this to your theme’s style.css (assuming they’ll all be the same size):

div.mapp-iw img {   width: 100px; height: 100px; }

3) Finally, you can download 2.38.7 when it’s available and try the ‘infoboxes’ setting.  Those are custom infoWindows that can extend outside the edges of the map and they may work better for sizing this content.

[LakesMarketing]

Chris .. you rock!

Thank you … will try 2.38.7 tomorrow … off to bed here in the UK.

If that doesn’t work I’ll add a single CSS style to the map image … thanks.

[LakesMarketing]

Hi, the new beta adds a scroll bar but sits all content in the info window.

I’ve tried the css class for the image as you suggested above … which worked great.

thanks

[Author]

Posts