Question

Google Maps API v3 not working in mobile browsers or PhoneGap even though i allow all external hosts

I tried while using an apikey or without.

the method loadMapScript() is called when the device is ready (on an iDevice(iOS)) or when the page is loaded (on a computer)

when i navigate to the page which has the map, i get the message "Error Loading map" which means that map is null

I suspect that google is detecting that i am using an iOS Device and restricting my usage of their API, but i have no proof of that.

P.S. this works fine on all browsers!
P.S. I tried this in safari for the iPad and it doesn’t work! but works on the computer!
P.S. Just checked it doesn’t work on any mobile browser or in phonegap, but 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 that 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);