title: Google Maps API v3 not working in mobile browsers or PhoneGap
body: <p>Google Maps API v3 not working in mobile browsers or PhoneGap even though i allow all external hosts</p>
  
  <p>I tried while using an apikey or without.</p>
  
  <p>the method <code>loadMapScript()</code> is called when the device is ready (on an iDevice(iOS)) or when the page is loaded (on a computer)</p>
  
  <p>when i navigate to the page which has the map, i get the message <code>"Error Loading map"</code> which means that <code>map</code> is <code>null</code></p>
  
  <p>I suspect that google is detecting that i am using an iOS Device and restricting my usage of their API, but i have no proof of that.</p>
  
  <p>P.S. this works fine on all browsers!
  P.S. I tried this in safari for the iPad and it doesn't work! but works on the computer!
  P.S. Just checked it doesn't work on any mobile browser or in phonegap, but works in all desktop browsers :/</p>
  
  <p>Any help would be appreciated</p>
  
  <p>The Code:</p>
  
  <pre><code>function loadMapScript() {
      if($("#googleMaps").length == 0) {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.id = "googleMaps"
          script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&amp;callback=initializeMap&amp;key=HIDDEN";
          document.body.appendChild(script);
      } else console.log("Error, googleMaps already loaded");
  }
  
  
  
  function initializeMap(mapOptions) {
      console.log("Init Maps");
      var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude, currentLocation.coords.longitude);
      if(!mapOptions)
          mapOptions = {
              center: myLatlng,
              zoom: 18,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
      if(!map)
          map = new google.maps.Map(document.getElementById("map_canvas"),
              mapOptions);
      else {
          map.setOptions(mapOptions);
      }
      updateCurrentLocationMarker();
  }
  
  
  
  function updateCurrentLocationMarker() {
      if(!map) {
          return;
      }
      var myLatlng = new google.maps.LatLng(currentLocation.coords.latitude,
          currentLocation.coords.longitude);
      if(currentLocationMarker) {
          currentLocationMarker.setMap(null);
      } else {
          currentLocationMarker = new google.maps.Marker({
              position: myLatlng,
              animation: google.maps.Animation.DROP,
              title:"You!"
          });
          currentLocationMarker.setMap(map);
      }
  }
  
  function onMapsShow() {
      if(!map) {
          showToastNow("Error Loading map");
          return;
      }
  }
  </code></pre>