I have encountered an issue with Google Maps v3 geocoding addresses on my website. It seems to work perfectly on all browsers except for mobile devices, particularly IOS devices (iPad/iPhone/iPod Touch).
Although the map application loads on these devices and I can see features like the Google logo, Terms of Use link, Map and Satellite buttons, and even the street view icon (although it's grayed out), the map itself does not display properly as shown in the screenshot below.
Could anyone offer guidance on what might be causing this problem or how I can debug it specifically on IOS devices?
Thank you!
EDIT
Here is the crucial part of the code responsible for rendering 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 believe I have identified the root cause of the problem. It seems that on the iPad, the hidden latitude value is being mistaken for a phone number. When inspecting the source on the iPad, Safari converted the positive number into a clickable link. The source appears as follows:
<!-- iPad source -->
<span class="hidden lat">
<a href="tel:36.783760070801">36.783760070801</a>
</span>
In contrast, on other browsers where it functions correctly, the source looks as it should:
<!-- Firefox 10.0.2 source (CORRECT) -->
<span class="hidden lat">36.783760070801</span>
Any fresh insights on how to resolve this issue?