POI Infowindow in 2.38.4

[shawkins]

Hi Chris,

The latest release you are working on is a great step forward and opens up some interesting possibilities.

However, I’m having some problems with the POI infowindow for mashups in 2.38.4.

1. The width of the infowindow is about 95% of the map viewport. The sides of the window clip either to the right or left depending on the location of the POI. Can the window be resized?

2. When featured images are used in the window, the first time they are opened, the height of the window is too small and you get scroll bars on the widow. The second time the widow is opened, the height is properly set to the height of the thumbnail.

3. There doesn’t seem to be any padding applied to the thumbnail so the excerpt buts up against the thumbnail.

4. I can’t seem to turn off the Zoom link.

You can see the problems at:

http://randomimages.ca/nblog/trip-overviews/bulgaria-spring-2012-trip-overview/

Thanks for your help and good luck with the new release,

Stephen

[Chris]

Hi Stephen,

Thanks for letting me know about these issues:

1)  Google sets the width and height of the infoWindow automatically to fit the content.  If you have a lot of content it will make a big infoWindow.  You can try disabling the map zoom/pan controls so it will fit the map, or you can override the infowindow style to give it a hint about how big it should be.  For example, to limit the window to 200px width:

.mapp-iw {  max-width: 200px; }

The release notes for 2.38.4 explain how to set custom CSS.

2) On some of the POIs it looks like the image was inserted manually into the POI body rather than as a thumbnail, and it seems like the HTML is not be valid.  For example, “Melnik” has this in the body:

<img src='http://randomimages.ca/nblog/wp-content/uploads/2012/06/Melnik07.jpg' width=150px>

There’s no height (so Google can’t figure out how big it is) and the dimensions should be in quotes:

<img src='http://randomimages.ca/nblog/wp-content/uploads/2012/06/Melnik07.jpg' width='150px' height='150px'>

The same thing also happens with images inserted as thumbnails, like “Melnik to Kovachevitsa”.   I think this is because WordPress writes out the thumbnail dimensions with any ‘px’ (for pixels) and Google doesn’t like that.  Your theme also has CSS to set the image size to ‘auto’, which may cause a conflict.  You could try remove this from the theme’s style.css:

body .content img {max-width: 100%; height: auto; width: auto ....

Or, you could add a width and height to the style ‘mapp-thumb’ which is applied to the thumbnails:

.mapp-thumb {  width: 150px !important;  height: 150px !important; }

3.  I’ve updated the CSS in version 2.38.5 to include an ‘!important’ modifier on the padding, I think this will fix the padding issue.

4.   There’s a setting on the MapPress settings screen to let you pick which links to use, have you tried unchecking ‘zoom’?

[shawkins]

Hi Chris,

Thanks for the quick response.

1) Your CSS suggestion fixed the infowindow size issue.

2) The old manual links to the thumbnails were removed but the problem remained as you thought it might as WordPress does indeed leave out the px in the width and height settings. Setting the .mapp-thumb style as you suggested fixed the problem.

3) The padding issue is resolved in 2.38.5

4) The ‘zoom’ issue remains in 2.38.5. The ‘zoom’ and ‘direction to’ boxes don’t stay unchecked after ‘Save Settings’.

Thanks again,

Stephen

 

[Chris]

Hi,

I fixed #4 – I didn’t see it initially because it only happened if you selected NO links.

I didn’t bother to create a new version for the fix.  Just download 2.38.5 again and install or overwrite your existing files and it should work.

Thanks again for letting me know!

[Author]

Posts