Google Maps API v3 not working in mobile browsers or PhoneGap

Question

The Google Maps API v3 does not work in mobile browsers or PhoneGap, although I allow all external hosts

I tried to use apikey with or without it.

The loadMapScript() method is called when the device is ready (on iDevice (iOS)) or when the page loads (on the computer).

when I go to the map page, I get the message "Error Loading map" , which means that map is null

I suspect that Google discovers that I am using an iOS device and restricting my use of their API, but I have no evidence of this.

PS this works great on all browsers! Postscript I tried this on an iPad safari and it doesn't work! but it works on a computer! Postscript Just checked that it doesn’t work in any mobile browser or in telephone congestion, but it works in all desktop browsers: /

Any help would be appreciated

The code:

 function loadMapScript() { if($("#googleMaps").length == 0) { var script = document.createElement("script"); script.type = "text/javascript"; script.id = "googleMaps" script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap&key=HIDDEN"; document.body.appendChild(script); } else console.log("Error, googleMaps already loaded"); } function initializeMap(mapOptions) { console.log("Init Maps"); var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude); if(!mapOptions) mapOptions = { center: myLatlng, zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP }; if(!map) map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); else { map.setOptions(mapOptions); } updateCurrentLocationMarker(); } function updateCurrentLocationMarker() { if(!map) { return; } var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude); if(currentLocationMarker) { currentLocationMarker.setMap(null); } else { currentLocationMarker = new google.maps.Marker({ position: myLatlng, animation: google.maps.Animation.DROP, title:"You!" }); currentLocationMarker.setMap(map); } } function onMapsShow() { if(!map) { showToastNow("Error Loading map"); return; } } 

Answer 1

How about this code? I created the code based on your code. I tried my iPad and it worked.

 var map, mapOptions, currentLocation, currentLocationMarker; function loadMapScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.id = "googleMaps" script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initializeMap"; document.body.appendChild(script); } function initializeMap(mapOptions) { var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude); var mapOptions = { center : myLatlng, zoom : 18, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); updateCurrentLocationMarker(); } function updateCurrentLocationMarker() { var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude); if (currentLocationMarker) { currentLocationMarker.setMap(null); } else { currentLocationMarker = new google.maps.Marker({ position : myLatlng, animation : google.maps.Animation.DROP, title : "You!", map : map }); } } function onSuccess(position) { currentLocation = position; if (!map) { loadMapScript(); } } function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } document.addEventListener("deviceready", onDeviceReady, false);