title: My Google Map javascript code displays on desktop browser but not my mobile phone browser
body: <p>Okay, so I already looked this up and only found one page on it.</p>
  
  <p>(<a href="https://stackoverflow.com/questions/12136615/google-maps-api-geolocation-not-working-for-mobile">Google Maps API GeoLocation not working for mobile</a>)</p>
  
  <p>My issue is that that I have some javascript code that calls the google maps API and displays just fine when I view it using my browser on my desktop, the browser I'm using is google chrome, but when I try to view it using my android phone it doesn't display at all. I am not sure what the issue is, I had it running a couple of days, but the map crashed and stopped displaying. Since then i have had to re-do the code to get it to display again. I finally got it working, but now I have this new problem. Here is the code I'm using. </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;link rel="Stylesheet" type="text/css" href="css/drop.css" /&gt;
          &lt;link rel="Stylesheet" type="text/css" href="css/login.css" /&gt;
          &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?   sensor=false"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function getLocation() {
                  if (navigator.geolocation) {
                      navigator.geolocation.getCurrentPosition(getMap, showError);
                  }
                  else {
                     alert("Geolocation is not supported by this browser.");
                  }
              }
  
             function initialize( lat, lon ) {
                 pLatitude = lat;
                 pLongitutde = lon;
  
             var mapOptions = {
                center: new google.maps.LatLng(lat, lon),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true
             }
  
             var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
             var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: "Current Location"
             });
          }
  
          function getMap(position) {
               lat = position.coords.latitude;
               lon = position.coords.longitude;
  
               google.maps.event.addDomListener(window, 'load', initialize(lat, lon));
          }
  
          function showError(error) {
               switch (error.code) {
                   case error.PERMISSION_DENIED:
                      alert("User denied the request for Geolocation.");
                      break;
                  case error.POSITION_UNAVAILABLE:
                      alert("Location information is unavailable.");
                      break;
                  case error.TIMEOUT:
                      alert("The request to get user location timed out.");
                      break;
                  case error.UNKNOWN_ERROR:
                      alert("An unkown error occurred.");
                      break;
          }
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="getLocation()"&gt;
     &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>