4

I am using ExternalInterface but I have never worked with it before so I don't know what really to do. I don't even know if ExternalInterface works with AIR Android .

I am trying to implement the JS Google Maps API . At this point I am able to load the webpage with StageWebView. I can access the longitudes and latitudes values in JS but I need to access those values from AS3 when the selects a location on the map.

Here is HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"> </div>
      <script src="map.js"> </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBBCPwGs_7_ys3eyx7pyjPeVFoYABeSUzw
        &libraries=visualization&callback=initMap">
    </script>

  </body>
</html>

JS:

var lat;
var lng;
 window.initMap = function() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 100,
    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
  });
         lat = e.latLng.lat();
         lng = e.latLng.lng();
         getLatLng();
});
}

 function getLatLng()
{
    var latlng = [];
    latlng.push(lat);
    latlng.push(lng);

    alert("coordinates", lat, lng);
    return latlng;
}

AS3:

private var _gmapHTMLFile:File;
private var _webView:StageWebView;
private var _mapURL:String;


gmapHTMLFile = File.applicationDirectory.resolvePath("gmap/gmap.html");
mapURL = gmapHTMLFile.nativePath;

webView = new StageWebView();
webView.stage = stage;
webView.viewPort = new Rectangle(0, 0,  stage.stageWidth, stage.stageHeight);
webView.addEventListener(MouseEvent.MOUSE_UP, onLocationSelected)
webView.loadURL(mapURL);


private function onLocationSelected(e:MouseEvent):void
{
   webView.loadURL("javascript:getlatlng()");

   //I also tried
   // var latslngs:Array = webView.loadURL("javascript:getlatlng()");
   // doesn't work, obviously
}

what the onLocationSelected function does is simply show an alert window inside AIR, that contains the location coordinates from the JavaScript. My question is how do I access and manipulate those lat and lng values in AS3 using the ExternalInterface Class? Any help is greatly appreciated! Thanks

Danish Ajaib
  • 83
  • 10
  • Why does no one read the documentation? [StageWebView](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/StageWebView.html) Second paragraph `The class provides no interaction between ActionScript and the HTML content except through the methods and properties of the StageWebView class itself. There is, for example, no way to pass values or call functions between ActionScript and JavaScript.` –  Mar 12 '16 at 10:51
  • I know.. I wasn't asking how to do this with StageWebView. I mean to ask, how to do this with ExternalInterface. – Danish Ajaib Mar 12 '16 at 10:54
  • You are using StageWebView. The Documentation says **There is no way to pass values or call functions between ActionScript and JavaScript** when using StageWebView. It doesn't matter if you're using ExternalInterface. –  Mar 12 '16 at 10:55
  • Also, reading the [Documentation for ExternalInterface](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html) gives you the following regarding AIR: `In Adobe AIR, the ExternalInterface class can be used to communicate between JavaScript in an HTML page loaded in the HTMLLoader control and ActionScript in SWF content embedded in that HTML page.` As you can see, no mention of StageWebView. And when you read the documentation of HTMLLoader, you will see that it is supported on Desktop systems, but not mobile. –  Mar 12 '16 at 11:02
  • Thanks. Can you please recommend a different approach? How can I achieve this? – Danish Ajaib Mar 12 '16 at 14:30
  • 1
    Personally I would just do the app entirely in HTML5 to begin with, and then package it into an android app through cordova. Which I believe already has a gmaps plugin. If you insist on using AIR, you could possible try to pass URL parameters into your html content (as in reload the page with "gmap/gmap.html&variable1=20&variable2=30") when you need to change something. Retrieving values from js would be harder though. The downside here is that you would refresh the page constantly, which is pretty inefficient. –  Mar 12 '16 at 14:37
  • Alternatively, maybe a native extension could help you? But I'm not sure. Won't hurt to look into it though. –  Mar 12 '16 at 14:42
  • @DodgerThud Can you explain this a bit futher, as I have absolutely no experience with HTML/JS. – Danish Ajaib Mar 12 '16 at 20:35

1 Answers1

2

You can't read the return value from javascript:getLatLong(), to get data from JS to AS3 the old trick is to set the window.location from JS, then in AS3 listen for the LOCATION_CHANGING event and parse the data out of the changing location, and event.preventDefault() so the location doesn't actually change.

AS3:

webView.loadURL("javascript:sendLatLng()");

JS:

function sendLatLng() {
    location.href = "?lat=" + lat  +"&lng=" + lng;
}

AS3:

webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, locationChanging);

function locationChanging(e:LocationChangeEvent):void {
    e.preventDefault();
    var query:String = e.location.split("?")[1];
    var vars:URLVariables = new URLVariables(query);
    trace(vars.lat, var.lng);
}

You can try the StageWebViewBridge library to help you with this.

You could also try using a Web View ANE that supports JS communication.

Aaron Beall
  • 49,769
  • 26
  • 85
  • 103
  • I'm having some troubles with this on Mac - preventDefault() in LOCATION_CHANGING handler doesn't prevent the web view from changing the location. Works fine on PC. Tried with AIR SDK 25.0 – Gene Pavlovsky Nov 09 '17 at 21:20