most map plugins break my theme navigation?! WordPress
- REFUNDED
I'm using a wordpress theme called Anan. If I add google maps to pages or posts using the majority of map plug-ins, the slide-in-out navigation (menu) on the left of the page breaks.
http://mydiamond-a.com/?page_id=72
iPhone
http://www.youtube.com/watch?v=12SU5P7lRSY
iPad
http://www.youtube.com/watch?v=N6vjdCftG3s
It only happens in safari on snow leopard on a Mac or on an iphone/ipad. The navigation disappears as the mouse touches it.
I'm currently using the geolocation and geo-mashup plug-ins and would prefer not to have to change them as they seem to do exactly what I need (apart from the above issue)
Any help appreciated
Andy
Answers (3)
Mariano Pereyra answers:
I haven't tested on a MAc (No way I can do that :) ) but it seems that the problem is the events you are using. On a normal browser, the menu displays on mouse over, and the mini menu dissapears. On the iPhone, you have to actually click the menu. You need to change the way the events fire the menu, so it fires as well when clicking in the menu, and the a tag there points to the main page, so that's why the site loads when clicking it (You need to link to "#" or similar)
Andy Pearson comments:
but the menu works on all of the other pages when viewed on the iphone/ipad, it's only the pages with maps on them that break the menu.
here's a couple of youtube vids to show the problem:
iPhone
http://www.youtube.com/watch?v=12SU5P7lRSY
iPad
http://www.youtube.com/watch?v=N6vjdCftG3s
Dylan Kuhn answers:
I think we need a Safari layout guru. Using the Elements debugger I can make the menu appear by adding style="display:none;" to the map div or any of its parents, but no changes I've tried will display both at once.
Dylan Kuhn comments:
I think I've tracked it to line 306 of screen.css:
z-index: 999;
remove that line and the menu shows up, but underneath the map. No values that would put it over the map seem to work. There may some clues to a fix [[LINK href="http://stackoverflow.com/questions/5305680/mac-safari-5-0-4-bug-when-using-google-maps-api"]]here[[/LINK]].
Andy Pearson comments:
Wow, that looks pretty cool, although it's pretty much dutch to me!! How do I get instructions how to fix it then? I don't really want to give someone access to my site. If I knew which files were the problem could i upload them somewhere? Sorry if this comes across as a bit vague.
:)
Dylan Kuhn comments:
I couldn't get any of the fixes I linked to work, so about the best I can offer is to use the theme editor to edit the css/screen.css file, adding this hack to the end:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari hack */
#menu_wrapper { z-index: auto !important; }
}
That would still fail to put the menu on top of the map in Safari, but at least it should appear.
Abdessamad Idrissi answers:
..Or try the [[LINK href="http://wordpress.org/extend/plugins/wp-geo/"]]WP Geo[[/LINK]] plugin; it is one of the best map plugins and doesn't ruine your page layout.
Andy Pearson comments:
I don't think it supports geotagging. I need something that pulls location data from the iPhone and creates a corresponding map below the post.