theme conflict with google maps / zoom freezes WordPress
- SOLVED
A customer of mine uses the theme [[LINK href="http://www.thinkupthemes.com/themes/minamaze/"]]Minamaze Pro[[/LINK]] which produces a strange conflict with my mapping plugin [[LINK href="https://www.mapsmarker.com"]]Maps Marker Pro[[/LINK]].
As you can see on [[LINK href="http://test.mapsmarker.com"]]http://test.mapsmarker.com[[/LINK]], there are 3 maps on frontend with different basemaps (from left to right): Google, OpenStreetmap, Bing Maps.
If you try to zoom out more than 3 times on the Google map, the map freezes and zooming further or back does not work anymore.
On the maps using OpenStreetMap and Bing in contrast, zooming works flawlessly. The issue was tested and reproduced in latest Firefox, Chrome and IE11 (all on Win7).
The browser console isnt showing any javascript error (PHP error log is also empty), I also tried temporarily disabling all theme´s javascript, but with no success.
Any idea what is causing this strange behaviour is really appreciated!
thx!
Answers (1)
Kyle answers:
Is your leaflet-core.js up to date? It looks like this was a discussed issue on their git [[LINK href="https://github.com/Leaflet/Leaflet/commit/9a2399ee500cfa24efd320e44c68ebf1c4109d78"]]https://github.com/Leaflet/Leaflet/commit/9a2399ee500cfa24efd320e44c68ebf1c4109d78[[/LINK]] [[LINK href="https://github.com/Leaflet/Leaflet/issues/2021"]]https://github.com/Leaflet/Leaflet/issues/2021[[/LINK]]
It also works again if you click the marker, so if you need a temp hack you could write a js timeout function that simulates in instant hit every 200ms or so to keep it from freezing.
Robert Seyfriedsberger comments:
thx - leaflet-core.js uses the latest stable leaflet version 0.7.3; for me it rather seems like a theme conflict, as that issue had never been reported before (and leaflet 0.7.3 has been used for months now with lots of users using Google as their basemap). temp hack is not really an option here though...
Kyle comments:
Based on what I was reading on git and other leaflet error reports is that it is an overall error that only comes up in very specific situations -- i.e. it could be a plugin issue that has only arisen in this theme because of the specific set of instances used in the theme, rather than the theme itself. See what I am getting at?
The two primary solutions I am seeing in the community, are setting
zoomAnimation: false
or creating a 'polyline'
var googleMapsLayer =new L.Google('ROADMAP');
L.polyline([[0, 0], ]).addTo(map);
I would try recreating the issue (getting permission on their site to make a test page where you can recreate the issue in private, or a copy of their theme) and then trying both above. Then perhaps adding a 'troubleshoot' checkbox to map output options, not sure how your plugin is generating these exactly, but for example if you have a shortcode you could put a parameter that sets animation to false (e.g [map animation="false"] ) that then will adjust the js accordingly, same scenario with the polyline if that proves to be the error. Then just drop a 'help' line somewhere in your plugin or documentation (e.g. "in specific scenarios with more than one map on a page at a time, google map's animation feature may freeze, set animation to false to prevent this error" )
That is my best thought on the subject. Like you said there are no php or js errors, so I'm just going with my gut that it is related to these leaflet conflicts we are seeing elsewhere in specific cases rather than the theme itself.
Robert Seyfriedsberger comments:
thanks for your research - we followed another approach as the user´s theme had other several issues too....