Googleマップを使用したjavascriptウェブページがAndroidで動作しない

Question

JavaScriptを使用して簡単なGoogle Mapsウェブページを作成しました。私は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マップのAPIを使用してAndroidアプリを作成しました、データと目的、それもうまく動作します。 AndroidブラウザやAndroid上のFirefoxが動作しないため、initialize（）関数でXMLHTTPREQUESTを実行している可能性があります。

アイデア？

Answer 1

誰かがこの問題に遭遇した場合、問題は私のCSSにありました。私はiPhoneまたはAndroid％を設定しましたが、サイズは設定していませんでした。私はデスクトップ/ラップトップのブラウザを持っていた場合、サイズは設定されていましたが、私が電話機のブラウザを持っていなかった場合、設定されていないものの％を設定すると、map_canvasが表示されませんでした。

Answer 2

これらのメタタグを含めてみましたか？

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

EDIT：

あなたのウェブページには、Android 4.0.3で動作します。 "parent.removeChild（nastylogo）;" 私はラインものの

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

見てもあなたは、いくつかのコードを追加しました"キャッチされていないエラー：NOT_FOUND_ERR：DOM例外8"