Google Maps API v3无法在移动浏览器或PhoneGap中使用 [英] Google Maps API v3 not working in mobile browsers or PhoneGap

问题描述

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

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

$当设备准备就绪（在iDevice（iOS）上）或页面加载时，调用方法 loadMapScript（）在计算机上）

当我导航到具有地图的页面时，我收到消息加载地图时出错这意味着 map 是 null

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

PS这工作正常在所有浏览器！
P.S.我试过这个在safari的iPad，它不工作！但在电脑上工作！
P.S.只是检查它不工作在任何移动浏览器或在phonegap，但适用于所有桌面浏览器：/

任何帮助将不胜感激

代码：

  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（）; 
} 
 
 
 
函数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：你！
}）; 
 currentLocationMarker.setMap（map）; 
} 
} 
 
 function onMapsShow（）{
 if（！map）{
 showToastNow（Error Loading map）; 
 return; 
} 
} 
  

解决方案

关于这段代码？我根据你的代码创建代码。
我试过我的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（）; 
} 
} 
 
函数onError（error）{
 alert（'code：'+ error.code +'\\\
'+'message：'+ error.message +'\\\
'）; 
} 
 
 function onDeviceReady（）{
 navigator.geolocation.getCurrentPosition（onSuccess，onError）; 
} 
 
 document.addEventListener（deviceready，onDeviceReady，false）; 
  

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

解决方案

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

这篇关于Google Maps API v3无法在移动浏览器或PhoneGap中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！