javascript Google Maps API v3 在移动浏览器或 PhoneGap 中不起作用

Google Maps API v3 not working in mobile browsers or PhoneGap

提问by Shereef Marzouk

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

即使我允许所有外部主机，Google Maps API v3 也无法在移动浏览器或 PhoneGap 中运行

I tried while using an apikey or without.

我在使用 apikey 或不使用时尝试过。

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

loadMapScript()当设备准备好（在 iDevice(iOS) 上）或页面加载时（在计算机上）调用该方法

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

当我浏览到具有地图的页面，我得到的消息"Error Loading map"，这意味着map是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.

我怀疑 google 检测到我正在使用 iOS 设备并限制我使用他们的 API，但我没有证据。

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 :/

PS 这适用于所有浏览器！PS 我在 iPad 的 safari 中尝试过这个，但它不起作用！但是可以在电脑上使用！PS刚刚检查它在任何移动浏览器或phonegap上都不起作用，但在所有桌面浏览器中都有效：/

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;
    }
}

采纳答案by wf9a5m75

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

这段代码怎么样？我根据您的代码创建了代码。我试过我的 iPad 并且奏效了。

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