使用Google地图的JavaScript网页在Android上不起作用

Question

我使用Javascript创建了一个简单的Google地图网页。我解析一个XML文件，并在我居住的韩国城市的地图上显示一系列标记。在Windows计算机上的所有浏览器中都能正常工作，但在我的Android手机上访问相同页面时根本无法工作。我得到了网页的所有html，包括菜单，广告等，但地图甚至没有显示出来。 将电话挂在Eclipse上并检查了日志，但没有发现我能看到的错误。任何人都知道Android为什么会无法显示Google地图页面？

如果你想看到的代码，它在这里： http://ulsanonline.com/ulsanmap.php ，我用它来填充地图的JavaScript如下：

function detectBrowser() { 
    var useragent = navigator.userAgent; 
    var mapdiv = document.getElementById("map_canvas"); 

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
    mapdiv.style.width = '100%'; 
    mapdiv.style.height = '100%'; 
    } else { 
    mapdiv.style.width = '600px'; 
    mapdiv.style.height = '800px'; 
    } 
} 

var markersArray = new Array(); 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(35.543401,129.340954); 
    var myOptions = { 
     zoom: 12, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    detectBrowser(); 

    var dine_image = new google.maps.MarkerImage(
     '/Maps/dine.png', 
     new google.maps.Size(50,50), 
     new google.maps.Point(0,0), 
     new google.maps.Point(25,50) 
    ); 
    var drink_image = new google.maps.MarkerImage(
     '/Maps/drink.png', 
     new google.maps.Size(50,50), 
     new google.maps.Point(0,0), 
     new google.maps.Point(25,50) 
    ); 

    var shadow = new google.maps.MarkerImage(
    '/Maps/shadow.png', 
    new google.maps.Size(78,50), 
    new google.maps.Point(0,0), 
    new google.maps.Point(25,50) 
    ); 


    // read the xml file 
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
    } 
    else {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.open("GET","/uoplaces.xml",false); 
    xmlhttp.send(); 
    xmlDoc=xmlhttp.responseXML; 
    xml=xmlDoc.getElementsByTagName("place"); 

    // parse xml 
    for (i=0; i < xml.length; i++) { 
     var name = xml[i].getElementsByTagName("name")[0].childNodes[0].nodeValue; 
     var type = xml[i].getElementsByTagName("name")[0].getAttribute("category"); 
     var link = xml[i].getElementsByTagName("link")[0].childNodes[0].nodeValue; 
     var lat = xml[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue/1000000; 
     var long = xml[i].getElementsByTagName("long")[0].childNodes[0].nodeValue/1000000; 


     var contentString = '<div id="content">'+ 
     '<h1 id="firstHeading" class="firstHeading">' + name + '</h1>'+ 
     '<a href=' + link + '>' + 'More Info' + '</a>'+ 
     '</div>'; 


     var infowindow = new google.maps.InfoWindow(); 

     var myLatlng = new google.maps.LatLng(lat,long); 
     if (type == "restaurant") { 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      type: type, 
      icon: dine_image, 
      shadow: shadow, 
      html: contentString 
     }); 
    } 
    else { 
     var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     type: type, 
     icon: drink_image, 
     shadow: shadow, 
     html: contentString 
      }); 
     } 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(this.html); 
      infowindow.open(map, marker); 
      } 
     })(marker, i)); 

     markersArray.push(marker); 

    } // parse 

    for (i in markersArray) { 
     markersArray[i].setMap(map); 
    } 

} //end function initialize 



// Removes the overlays from the map, but keeps them in the array 
function clearOverlays() { 
    if (markersArray) { 
    for (i in markersArray) { 
     markersArray[i].setMap(null); 
    } 
    } 
} 

// Shows any overlays currently in the array 
function showOverlays(category) { 
    if (markersArray) { 
    for (i in markersArray) { 
     if (markersArray[i].type == category) { 
     markersArray[i].setMap(map); 
     } 
    } 
    } 
} 

其实我已经创建使用相同的Google Maps API的Android应用，数据和目的，而且工作也很好。这只是Android浏览器或Android上的Firefox，它不起作用，这让我认为它可能是在initialize（）函数中完成的XMLHTTPREQUEST。

任何想法？

Answer 1

在其他人遇到这种情况下，问题出在我的CSS。我已经设置了iPhone或Android％但不是大小。如果我有一台台式机/笔记本电脑浏览器，大小已设置，但如果我有一个手机浏览器的大小不是，并设置未设置的百分比给了我没有map_canvas绘制。

Answer 2

你有没有试过包括这些meta标签？

<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" /> 

编辑：

网页适用于Android 4.0.3。你添加了一些代码，但我看到

function detectBrowser() { 
    var useragent = navigator.userAgent; 
    var mapdiv = document.getElementById("map_canvas"); 

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
    mapdiv.style.width = '480px'; 
    mapdiv.style.height = '600px'; 

var parent = document.getElementById('templatemo_container'); 
    var nastylogo = document.getElementById('templatemo_top_panel'); 
    parent.removeChild(nastylogo); 

} else { 
    mapdiv.style.width = '600px'; 
    mapdiv.style.height = '800px'; 
    } 
} 

虽然行 “parent.removeChild（nastylogo）;”抛出“未捕获的错误：NOT_FOUND_ERR：DOM异常8”