I have a question (actually two) that I haven't found the answer to pouring through various chats/forums. I'm in the process of launching a new responsive template for our website...which includes several Google Maps mashups. An example of a "test" page that is running currently off the new template code can be found here: http://www.mapformation.com/aboutus/clients/mashupnew.htm
On PCs and inside Chrome, Firefox, and most browsers, I've tested numerous sample pages, and just about everything is working properly. However, on the iPhone, iPod, and iPad (at least), I'm having two problems:
- z-index issues (I think). Menus will be placed behind other page elements (such as the Google Mashup window). ONLY on those Apple products I mentioned, not on any other products I have tested so far.
- pinch/tap issue. On an iPad, if one visits the above page and tries to click/tap/??? on a location in the State of Georgia, as one example, Google will re-center the map somewhere over the Atlantic Ocean, Venezuela, anywhere except a more-detailed view within Georgia (like it is supposed to). Again, works fine/great on Windows, and in Chrome, Firefox, etc. on a Mac desktop/laptop. But on the Mac iOS on portable devices? Google seems to be taking users through a "worm hole."
Any idea what might be causing these issues? I'm really here for help with #2, as #1 is probably more of a simple CSS issue that I haven't gotten to the bottom of (which is what lead me here). Although I haven't gotten #1 working yet either, so if someone could humor me if they have an idea for fixing it, I would be very appreciative. FWIW, the css which governs the above page can be found at: http://www.mapformation.com/templates/css/style.css
Thanks in advance for any help anyone might be willing to offer! - Derek