title: javascript webpage using Google maps doesn't work on Android
body: <p>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?  </p>
  
  <p>If you want to see the code, it's here:
      <a href="http://ulsanonline.com/ulsanmap.php" rel="nofollow">http://ulsanonline.com/ulsanmap.php</a> 
  and the javascript I use to populate the map is below:</p>
  
  <pre><code>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 &lt; 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 = '&lt;div id="content"&gt;'+
           '&lt;h1 id="firstHeading" class="firstHeading"&gt;' + name + '&lt;/h1&gt;'+
           '&lt;a href=' + link + '&gt;' + 'More Info' + '&lt;/a&gt;'+
           '&lt;/div&gt;';
  
  
         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);
        }
      }
    }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>Any ideas? </p>