Can't Get StageWebView to work with Google Maps on Desktop

Report · Nov 10, 2020

I have a real estate app on mobile that I am trying to port over to desktop platforms. Maps are vitally important to real estate, and I cannot get StageWebView to work with Google Maps. My understanding is that if you create a StageWebView instance set to true, then it should not use AIR's old webkit but the system web service provided by the OS. Let me know if that is incorrect. Using an up to date version of Windows 10, I should be golden. So I created a test app that looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="appCompleteHandler(event)" resize="resizeHandler(event)">
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			
			public var webView:StageWebView = new StageWebView(true);
			
			
			protected function appCompleteHandler(event:FlexEvent):void
			{				
				var original:File = File.applicationDirectory.resolvePath("googleCode/testMap.html"); 
				var newFile:File = File.applicationStorageDirectory.resolvePath("testMap.html");
				original.copyTo(newFile, true); 
				
				webView.stage = this.stage;
				webView.viewPort = new Rectangle( 0, 0, this.width, this.height );
				webView.loadURL("file://" + newFile.nativePath);
			}
			
			protected function resizeHandler(event:ResizeEvent):void
			{
				webView.viewPort = new Rectangle( 0, 0, this.width, this.height );
			}
			
		]]>
	</fx:Script>
	
</s:WindowedApplication>

The html code that accompanies this experiment is titled testMap.html and it looks like the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=<My Key>&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

This is the example HTML file that google provides to do your testing at https://developers.google.com/maps/documentation/javascript/overview I have been able to create an html file that opens google.com, ufc.com, nba.com, in my StageWebView but it will not open this google maps file. But I can get this maps html file to open in chrome, safari, firefox, edge, and it even opens in internet explorer (but puts up a warning about ActiveX scripts before it will move on. I don't know if internet explorer is the web service that is presented to StageWebView to utilize and if this might be the problem.)

But in summary, I can get StageWebView to open a webpage, I can use this script to open a Google map in all the major browsers, but cannot get StageWebView to open Google maps on the desktop.

I have no problems on mobile using a webView ANE with this html file

Thanks for any insights!

Adobe Community

Can't Get StageWebView to work with Google Maps on Desktop