javascript webpage using Google maps doesn't work on Android

Question

I created a simple Google Maps webpage using Javascript. I parse an XML file and display a series of markers on a map of the Korean city I live in. Works great in all browsers on a windows machine but doesn't work at all when I access the same page on my Android phone. I get all the html of the web page, including menus, ads, etc, but the map is not even shown at all. Hooked the phone up to Eclipse and checked the log, but no errors I could see. Anyone know any reason why Android would have trouble showing a Google Maps page?

If you want to see the code, it's here: http://ulsanonline.com/ulsanmap.php and the javascript I use to populate the map is below:

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

I've actually created an Android app using the same GoogleMaps API, data and purpose, and it works fine, too. It's just the Android browser or Firefox on Android that doesn't work which makes me think it might be with the XMLHTTPREQUEST done in the initialize() function.

Any ideas?

Answer 1

Have you tried including these meta-tags?

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

EDIT :

Your webpage works on Android 4.0.3. You added some code though I see

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

Though the line "parent.removeChild(nastylogo);" throws "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8"

Answer 2

In case anyone else runs into this, the problem was with my CSS. I had set the iPhone or Android % but not size. If I had a desktop/laptop browser the size was set but if I had a phone browser the size wasn't and setting a % of something not set gave me no map_canvas to draw on.