Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Google Maps Api

Compatible Flex Builder. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tutocat (TutoCat), le 06 septembre 2008

Bonjour, dans ce tutoriel nous allons voir comment créer des cartes dans Flex à l’aide de la Google Maps API.

Vous aurez donc besoin de :

L’API Maps de Google permet d’embarquer des cartes de Google dans des applications Flex.

La première chose dont vous avez besoin avant de pouvoir utiliser cette API est un compte Google, pour ce faire, si vous n’en possédez pas déjà un, est de vous rendre à l’adresse http://google.com/accounts et suivez les instructions relatives à la création de votre compte.

Une fois votre compte créé, vous pouvez aller télécharger la clé de l’API à l’adresse: http://code.google.com/apis/maps/signup.html, qui est un numéro de série qui associe votre carte avec votre compte et l’URL ou sera hébergée votre application. Il vous faudra donc accepter les conditions d’utilisation et entrer votre url, pour notre tutorial, nous allons simplement l’enregistrer avec l’url : http://localhost/, qui nous permettra de l’utiliser en local, il vous sera facile de générer une autre clé plus tard avec votre vraie url, puis cliquez sur le bouton « Generate API key ». Gardez précieusement cette clé, car nous en aurons besoin plus tard.

Nous allons maintenant télécharger le SDK à l’adresse :

http://code.google.com/apis/maps/documentation/flash/index.html

Il s’agit d’un simple fichier Zip qui contient la documentation et un fichier .swc qui est la librairie que nous allons utiliser dans notre projet.

Il est donc temps de créer notre application Flex :

  1. File–>New–>Flex project
  2. Entrer comme nom de projet « myGoogleMap »
  3. Séléctionnez comme application type : Web application (run in Flash player)
  4. Next–>Finish
  5. Copier la librairie .swc qui se trouve sous le répertoire lib du SDK dans le dossier libs de votre projet.
  6. Faites un clique droit sur votre projet, sélectionnez « Properties »
  7. Cliquez sur « Flex Build Path » et sélectionnez la tabulation « Library Path »
  8. Cliquez sur le bouton « Add SWC » et sélectionner la library .swc que vous venez de coller dans le répertoire libs de votre projet –> OK –> OK.

L’API de Google Maps ne permet pas de déclarer notre objet Map directement dans Flex, c’est pourquoi, nous allons commencer par ajouter un container (UIComponent) et l’ajouter dynamiquement dans ce container :

	<mx:UIComponent id="myMap" width="100%" height="100%" initialize="initMyMap(event)" />

Il s’agit pour l’instant d’un container vide, et grâce à l’événement « initialize », nous allons créer notre carte et l’ajouter au container :

	private var _myMap:Map;
	private var _latLngET:LatLng;
 
	private function initMyMap(event:FlexEvent):void{
		_latLngET=new LatLng(48.8573, 2.2944);
 
		_myMap=new Map();
		_myMap.key="***INSERER VOTRE CLE ICI***";
		_myMap.addEventListener(MapEvent.MAP_READY, onMapReady);
		myMap.addChild(_myMap);
	}

N’oubliez pas remplacer “*INSERER VOTRE CLE ICI*” votre clé, précédemment téléchargée sur Google. Nous avons donc créer notre carte, et l’avons ajoutée à notre container. Lorsque la carte est prête, l’événement MAP_READY est dispatché, et la fonction « onMapReady » est appelée, c’est dans cette fonction que nous allons définir notre carte.

Vous remarquerez que j’ai définit une variable « _latLngET » qui contient les coordonnées de la tour Eiffel que nous allons utiliser plus tard.

	private function onMapReady(e:MapEvent):void{
		_myMap.setCenter(new LatLng(48.8, 2.33),12,MapType.NORMAL_MAP_TYPE);
		_myMap.addControl(new ZoomControl());  
		_myMap.addControl(new PositionControl());  
		_myMap.addControl(new MapTypeControl());
 
		var marker:Marker = new Marker(_latLngET, new MarkerOptions({ fillRGB: 0x004000,label: "P", tooltip: "Paris, France\nLa tour Eiffel" }));
                	marker.addEventListener(MapMouseEvent.CLICK, markerClick);
		_myMap.addOverlay(marker);
	}

Une fois donc que la carte est prête à l’emploi, nous allons la centrer sur la région qui nous intéresse, en l’ocurance Paris, en utilisant la longitude et la latitude, on définit également un zoom (12), et le type de carte que l’on désire.

J’ajoute ensuite quelques contrôles sur notre carte comme les contrôles de zoom, positionnement et du type de carte (Plan, satellite, mixte et relief).

Puis nous allons ajouter un marker sur notre carte aux coordonnées de la tour Eiffel, précédemment définies. On ajoute également un événement sur le clique de souris afin d’afficher des informations sur la tour Eiffel dans une boîte d’information.

	private function markerClick(e:MapMouseEvent):void{
		var myTitle:String = "<b><u>La toure Eiffel</u></b>";    
		var myContent:String = "La tour Eiffel porte le nom de l’ingénieur Gustave Eiffel, qui en fut l’un des concepteurs. Les ingénieurs Nouguier et Kœchlin de la société Eiffel conçurent la tour pour le concours ouvert par le ministre du Commerce et de l’Industrie Lockroy à l’occasion de l’Exposition universelle de 1889, qui prévoyait le projet d’une tour haute de 300 m sur une base de 125 m. Le projet Eiffel fut retenu parmi 700 concurrents.";
_myMap.openInfoWindow(_latLngET, new InfoWindowOptions({titleHTML: myTitle, contentHTML: myContent}));  
}

Si vous lancer le projet, vous aurez donc une carte centre sur Paris avec un marker sur l’emplacement de la tour Eiffel. En cliquant celui-ci, des informations seront affichées. Vous avez également la possibilité de zoomer sur la carte, et de la déplacer, ainsi que de changer le type de carte.

Vous pouvez télécharger le projet ici.