Question

I am using Google Maps v3 to geocode addresses on a site and it works fine in all browsers except, apparently, on mobile devices. More specifically, right now I am merely trying to fix it for IOS devices (iPad/iPhone/iPod Touch).

The map application itself appears to be loading because I can see the Google logo, the Terms of Use link, the Map and Satellite buttons, and even the little street view icon (which is grayed out by the way).

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

Thanks!

---

EDIT

Below is the core part of the code being 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 the real problem. It appears that the iPad is trying to convert the hidden latitude into a phone number. I used a JS trick to view the page source on the iPad and specifically for the latitude (I think because it’s a positive number) Safari converted it into a link! The source appears 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 it should:

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

Any new ideas?

Answer 1

After finally getting to view the page source on the iPad I was able to deduce the problem down to the hidden latitude link which iPad Safari was converting into a phone number. I searched Stack Overflow and found this: https://stackoverflow.com/a/227238/486233

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

And that fixed it.

Thanks to everyone for their help!