Maps not loaded correctly

[mremkes]

I've setup a WordPress site with a commercial theme (Simple Themes - Breeze) and TNG 11. Everything seems to work okay except for the maps. They're either not or partially displayed. I suspect it has something to do with the order the JavaScripts are loaded but I really don't know how to solve it. Reason that I believe it's caused by a JavaScript conflict is that when I use the direct TNG url it works okay. Also switching to another theme solves the problem.

Example 1: Map on a person page

Partially displayed (try to move the map): http://www.genealogie-remkes.nl/onderzoek/getperson.php?personID=I232&tree=remkes

Displayed: http://www.genealogie-remkes.nl/tng/getperson.php?personID=I232&tree=remkes

Example 2: Place map

Not displayed: http://www.genealogie-remkes.nl/onderzoek/placesearch.php?psearch=Leek%2C+Groningen%2C+Nederland

Displayed: http://www.genealogie-remkes.nl/tng/placesearch.php?psearch=Leek%2C+Groningen%2C+Nederland

Another observation is that the buttons on the map are messed up when it doesn't display properly.

 

Any thoughts?

Regards,

Marcel

[theKiwi]

47 minutes ago, mremkes said:

Example 1: Map on a person page

Partially displayed (try to move the map): http://www.genealogie-remkes.nl/onderzoek/getperson.php?personID=I232&tree=remkes

 

This map works fine for me - it displays seemingly correctly, and I can "grab" it with the hand and move it around.

47 minutes ago, mremkes said:

Example 2: Place map

Not displayed: http://www.genealogie-remkes.nl/onderzoek/placesearch.php?psearch=Leek%2C+Groningen%2C+Nederland

This map displays as expected and behaves as expected.

Have you tried a different browser, or clearing your browser cache?

Roger

 

[mremkes]

Roger,

I did clear the browser cache. I tried on two different computers with three different browsers (IE 11, Edge, FireFox) and the result is the same.

Regards,

Marcel

[theKiwi]

 I clicked those links with Safari on the current Mac OS X 10.11.4 and the pages opened and worked as expected.

On Chrome the first one doesn't work, and the JavaScript console says

placesearch.php?psearch=Leek%2C+Groningen%2C+Nederland:109 Uncaught TypeError: $(...).prettyPhoto is not a function

So where is "prettyPhoto" coming from - is it a part of the theme? Or is it a plug in you've added separately?

If you Google "prettyPhoto is not a function" you'll find plenty of other people with the same issue.

Maybe you can live without whatever it is that prettyPhoto is trying to do.

Roger

[mremkes]

I saw that error too, so I disabled PrettyPhoto within the theme. I just took the hard way by deleting suspicious files from the theme until I found the file that caused it It was not a JavaScript but a CSS file... After some debugging I discovered that the following block was causing the trouble:

#content img,
img.scale-with-grid,
.entry-content img,
.entry-summary img,
.comment-content img,
.widget img,
.wp-caption {
  max-width: 100% !important;
  height: auto;
}

The max-width: 100% !important; is causing the issue. When I remove that line the maps are working okay.

 

Marcel

[mremkes]

Now that I found root cause, I saw that I'm not the only one. It has all to do with how web designers like to develop responsive themes. So instead of disabling the line, the final solution is adding the following line to my theme custom stylesheet:

#eventmap img { max-width: none!important; }

 

Marcel