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 puter)

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 puter! 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 = ";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;
    }
}

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 puter)

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 puter! 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./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;
    }
}

• javascript
• html
• cordova
• jquery-mobile
• google-maps-api-3

Share Improve this question Follow edited Sep 12, 2012 at 14:20 Shereef Marzouk asked Sep 12, 2012 at 13:37 Shereef MarzoukShereef Marzouk 3,39277 gold badges4444 silver badges6868 bronze badges 3

• Could start with the obvious and go from there since I don't see anything glaringly wrong with the code. Since the value of map is null, have you tested that the callback to initializeMap is actually invoked on your mobile device? Perhaps use the existing script to show a toast indicating you're loading the map. – lsuarez Commented Nov 6, 2012 at 16:58
• I have little bit like issue but my was fixed via changing "https" to "http" in google api url. – RredCat Commented Nov 6, 2012 at 17:55
• Adding a link to your test site might help you get an answer. – Chad Killingsworth Commented Nov 8, 2012 at 14:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2 +50

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./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);