4

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?

iPad screenshot of GMaps v3

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:36.783760070801">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?

Yes Barry
  • 9,514
  • 5
  • 50
  • 69
  • I reckon that's the eastern Atlantic Ocean at coordinates (0,0). But it's a bit difficult to debug a screenshot. Any chance of a link? Or some code and an example address? – Andrew Leach Mar 07 '12 at 07:40
  • Hey, thanks for the response and sorry about my tardiness to reply! Yeah I totally understand, unfortunately I can't post a link at this time but I will look into fishing out a snippet of the code. I'll post my edit when I have it. Again, thanks for helping! – Yes Barry Mar 07 '12 at 09:17
  • Obviously `var lat` and `var lng` are evaluating to zero. I don't think there's enough detail to determine why that should be, because it appears to depend on the page structure and data defined in HTML. An example online (eg in jsfiddle.net) would help [or would help me, at least!] – Andrew Leach Mar 07 '12 at 10:05
  • A link to the page in question please. – Shane Best Mar 07 '12 at 17:34

1 Answers1

6

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!

Community
  • 1
  • 1
Yes Barry
  • 9,514
  • 5
  • 50
  • 69