This article describes the process of adding Google Maps to FlexJS. Google Maps is a web-based technology and can be readily used in AIR or JavaScript FlexJS applications. You can think of Google Maps as an example of how to extend FlexJS with web services.
In case you are not familiar with Google Maps and its API, Google has provided programmatic interfaces to its map service. You declare a region on your web page, usually as a <div>, where you want to display the map and using the Maps API, make calls to display a map based on latitude and longitude coordinates at various zoom levels. You can display a standard map, a satellite image, or a hybrid. In addition to displaying maps, you can also overlay the map with symbols and use other map-related services to find the location of places and addresses.
There are two ways to use the Google Maps API. The first is via a RESTful web service which returns JSON as its response. The second is through a JavaScript library that uses the REST interface under the covers.
Incorporating Google Maps into FlexJS was a matter of deciding how to use the Google Map API and services. The JavaScript (v3) API was chosen over the REST API because it easily integrates with the JavaScript side of FlexJS SDK. There are two options on the ActionScript side: display the Google map in a floating HTML IFrame or use the HTMLLoader of AIR. While many Flex web apps, which use the browser Flash Player plug-in, use IFRAMEs to display web content, it requires more complex HTML than the, much simpler, AIR HTMLLoader component.
In the endUsing this approach, the result is a FlexJS app that can be run as an AIR application or cross-compiled into HTML/JavaScript and run in the browser.
...
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 (the MapView.js set_strand() function):
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.
...
The ActionScript Map class uses the AIR HTMLLoader to present and interact with the Google Map. It works like this: JavaScript code is put into HTMLLoader and is accessible via htmlLoader.window, such as htmlLoader.window.map or htmlLoader.window.searchnearbysearch("coffee") where 'search' is a JavaScript function in the template that was loaded into HTMLLoader from the strand-setter function.
...