Page History

...

In order to use the Google Maps API, a developer (or company) needs to apply for a developer token. Using the token, you incorporate the Google Maps API via an HTML Script element. FlexJS does this in a lazy fashion by building the script element at runtime. The JavaScript version (in MapView) uses the strand-setter override function to build the Script element and trigger the download.JavaScript (

...

...

var token = this.strand_.token;

...

var 

...

src = 'https://maps.googleapis.com/maps/api/js?v=3.exp';

...

if (token)

...

 src += '&key=' + token;

...

src += '&libraries=places&sensor=false&callback=mapInit';

...

var script = document.createElement('script');

...

script.type = 'text/javascript';

...

script.src = src;

The ActionScript side works a little differently. The MapView class has a JavaScript "template" of functions written into a String variable. When the strand-setter override is called, the template is copied and the API token is written into it and then given to the HTMLLoader component to run, causing the Google Maps API to be downloaded into the HTMLLoader instance.

...

Earlier in the MapView class, an event listener for "searchResults" was added to transform the JavaScript data into ActionScript classes and store them into the model (which triggers a property change event).

...

_loader.window.addEventListener("searchResults",onSearchResults);

...

...

...

private function onSearchResults(event:*):void

...

{

...

  var results:Array = [];

...

  for(var i:int=0; i < event.results.length; i++) {

...

    var result:Place = new Place();

...

    result.geometry.location.lat = event.results[i].geometry.location.lat();

...

    ...

...

  }

...

  var model:MapModel = _strand.getBeadByType(IBeadModel) as MapModel;

...

  model.searchResults = results;

...

  }

...

}

In the for-loop above, JavaScript data (as event.results[i].geometry.location.lat()) is extracted and put into the ActionScript Place class instance.

...