Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Utilisation de Google Maps par StageWebView

L'API Google Maps est disponible sous plusieurs formats. Sous forme d'API JavaScript, qui doit être la plus utilisée ou sous forme d'API ActionScript:

Google Maps API Family

En ce qui concerne l'API ActionScript, vous pouvez récupérer un fichier SWC contenant les composants essentiels comme Map ou Overlay. Quelques tags plus tard, vous pouvez avoir votre carte dans votre application. Mais avant de l'utiliser, il vous faut récupérer une clé API en donnant à Google l'URL de l'application par laquelle vous allez charger l'API. Tout cela pour compter vos nombres de demandes de tuiles et de géocodage (limités en usage gratuit).

Sauf que si vous voulez utiliser une carte Google Maps dans une application AIR, vous n'êtes pas lié à une URL, leur système partait donc en miettes. Il n'était d'ailleurs pas possible d'intégrer une carte Google Maps dans une application AIR pendant un bon moment jusqu'à l'arrivée d'un fix.

Google Maps API for Flash + AIR: How did we ever breathe before?

En plus de passer une clé (propriété "url" sur Map), on passe une "key" qui correspond à une URL par laquelle l'application AIR peut être téléchargée. Franchement discutable comme concept mais le pire n'est pas là.

Le bug qui bloque tout le monde

Alors ils ont beau faire les malins avec leur système de key, les gars du SDK Google Maps se sont complètement plantés. Pour preuve, un Bug Report qui est là depuis le 29 Septembre 2010:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=2750

Pour résumer, si vous l'utilisez dans un projet AIR, votre application freeze pendant 15-30 secondes. La raison est complètement interne à l'API et comme le code n'est pas open source, il n'est pas très facile de savoir d'où vient ce bug. Certains sont quand même aller fouiller dans les tripes de l'API et on trouvé que l'on chargeait toute l'application dans un ByteArray sur lequel on effectuait un cryptage SHA1, sûrement pour les problématiques de clé API. Bref, c'est inutilisable, même si plusieurs "workaround" sont apparus dans le thread dont un monkey patch de la classe SHA1.

Pour les applications mobile, même problème. Sur un système Android, on vous demande même si vous voulez faire un "force close" tellement il pense que l'application ne répond plus. Inutilisable en l'état.

La solution avec StageWebView

Si vous avez besoin de plus de fonctionnalités basées sur l'API AS, vous êtes foutus (vous pouvez toujours utiliser le hack mais attention aux problèmes de licence). Pour une utilisation simple (affichage de carte), il existe une alternative que je ne vais même pas appeler un "hack". De plus, cette solution sur mobile est cross-platform (Android, iOS). Ce que l'on va faire, c'est utiliser la classe StageWebView pour intégrer un navigateur dans son application et afficher Google Maps en version mobile (adapté).

Pour info, @achauvire l'a utilisée dans son application AIR pour iOS (ESEO sur l'AppStore) si vous voulez la tester.

Voici la solution expliquée sur le blog d'Igor Costa:

Hacking Google maps to work on your Flex 4.5 /AIR mobile project

Voici entre autre, la partie de code qui nous intéresse:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" viewDeactivate="removeStageWebViewHandler(event)" title="MapView" viewActivate="view1_viewActivateHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			import spark.events.ViewNavigatorEvent;

			private var myWebView:StageWebView;

			/**
			 * @protected
			 * Just add and set site of my StageWebView
			 * */
			protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void
			{
				 myWebView = new StageWebView();
				 myWebView.stage = this.stage;
				 myWebView.loadURL("http://maps.google.com");
				 myWebView.viewPort = new Rectangle(0,70,stage.stageWidth,stage.stageHeight-150);
			}

			/**
			 * @private
			 *
			 * Just override to re-scale due to auto-orientation project nature
			 * */
			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

				if (myWebView) {
					var point:Point = localToGlobal(new Point());
					myWebView.viewPort = new Rectangle(point.x, point.y, unscaledWidth, unscaledHeight);
				}
			}	

			protected function goBackHandler(event:MouseEvent):void
			{

				navigator.popToFirstView();

			}

			protected function removeStageWebViewHandler(event:ViewNavigatorEvent):void
			{
				myWebView.stage = null;
				// just remove the target and will leave.

			}

		]]>
	</fx:Script>
	<s:navigationContent>
		<s:Button label="Go Back" click="goBackHandler(event)"/>
	</s:navigationContent>

</s:View>

Après, vous pouvez utiliser tous les paramètres URL qu'il est possible d'utiliser dans Google Maps pour effectuer des recherches / placements. Voici le rendu sur Android: