Google Maps v3 Not loading on iPad - Button loading, but map just blue

Question

I use Google Maps v3 to geocode the addresses on the site, and it works fine in all browsers, with the exception of apparently mobile devices. More specifically, right now I'm just trying to fix this for iOS devices (iPad / iPhone / iPod Touch).

Downloading the map application itself is loading because I can see the Google logo, the "Terms of Use" link, the "Map" and "Satellite" buttons, and even the small street icon (which, by the way, is grayed out).

Below is a screenshot of what the map looks like on an iPad. Can someone point me in the right direction what could be causing this or how to debug it on iOS devices?

Thanks!

---

EDIT

Below is the main part of the code used to render the map.

function renderMap(elem, lat, lng) { lat = (null == lat || undefined == lat) ? -14.397 : lat; lng = (null == lng || undefined == lng) ? 120.644 : lng; var latlng = new google.maps.LatLng(lat, lng); var map = new google.maps.Map( document.getElementById(elem.attr('id')), { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } ); try { var marker = new google.maps.Marker({ map: map, position: latlng }); } catch (err) { MAP_ERRORS.push(err); } } function initialize() { var msie7 = (navigator.appVersion.indexOf('MSIE 7.') == -1) ? false : true; if (true != msie7) { $('#my-content-div' + ' > .gmap').each(function(index) { // these are hidden divs that contain these values var lat = $(this).parent().find('.lat').html(); var lng = $(this).parent().find('.lng').html(); renderMap($(this), lat, lng); }); } } initialize(); 

---

EDIT 2

I think I may have just discovered a real problem. It looks like the iPad is trying to convert latent latitude into a phone number. I used the JS trick to view the page source on the iPad and specifically for latitude (I think because it is a positive number). Safari turned it into a link! The source is as follows:

 <!-- iPad source --> <span class="hidden lat"> <a href="tel:[phone]">36.783760070801</a> </span> 

And in all other browsers where it works , the source looks like this: should :

 <!-- Firefox 10.0.2 source (CORRECT) --> <span class="hidden lat">36.783760070801</span> 

Any new ideas?

Answer 1

After you finally looked at the source of the page on the iPad, I was able to display the problem on a hidden link to the latitude that iPad Safari converted to a phone number. I searched for qaru and found this: fooobar.com/questions/21521 / ...

 <meta name="format-detection" content="telephone=no"> 

And it is fixed.

Thank you all for your help!