title: Why am I getting "InvalidValueError" error when trying to implement Google Maps JavaScript API in an AIR Android application using StageWebView?
body: <p>I am working on an AIR Android application and I needed to implement Maps in it. After looking around, I decided to use the Google Maps API for Javascript using the StageWebView class. When I run the project , I get this error:</p>
  
  <pre><code>InvalidValueError: initMap is not a function
      at https://maps.googleapis.com/maps/api/js?     key=XXXXXXXXXX%20%20%20%20%20%20%20%20&amp;libraries=visualization&amp;callback=initMap : 87
   at https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX%20%20%20%20%20%20%20%20&amp;libraries=visualization&amp;callback=initMap : 123
   at https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX%20%20%20%20%20%20%20%20&amp;libraries=visualization&amp;callback=initMap : 21
   at https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX%20%20%20%20%20%20%20%20&amp;libraries=visualization&amp;callback=initMap : 123
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style type="text/css"&gt;
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt; &lt;/div&gt;
      &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          &amp;libraries=visualization&amp;callback=initMap"&gt;
      &lt;/script&gt;
      &lt;script src="map.js"&gt; &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>THE JS:</p>
  
  <pre><code>function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 0, lng: 0},
      zoom: .3,
      styles: [{
        featureType: 'poi',
        stylers: [{ visibility: 'off' }]  // Turn off points of interest.
      }, {
        featureType: 'transit.station',
        stylers: [{ visibility: 'off' }]  // Turn off bus stations, train stations, etc.
      }],
      disableDoubleClickZoom: true
    });
  
       map.addListener('click', function(e) {
    var marker = new google.maps.Marker({
      position: {lat: e.latLng.lat(), lng: e.latLng.lng()},
      map: map
    });
  console.log(e.latLng.lat(), e.latLng.lng());
  });
  }
  </code></pre>
  
  <p>The AS3:</p>
  
  <pre><code>var webView:StageWebView;
  var file:File = File.applicationDirectory.resolvePath("gmaps/gmaps.html");
  var mapURL:String = file.nativePath;
  
  webView = new StageWebView();
  webView.stage = stage;
  webView.viewPort = new Rectange(0, 0, stage.stageWidth, stage.stageHeight);
  webView.loadURL(mapURL);
  </code></pre>
  
  <p>Note: Running the gmaps.html file in chrome works perfectly. </p>
  
  <p>So, what is the problem? I can't really tell as I have no experience wih JS/HTML. I did try to google but that too got me nowhere. 
  Any help is greatly appreciated</p>