Dans le précédent article (API Google Maps pour Flash), on a vu comment préparer et configurer son éditeur pour gérer l’API Google Maps.
On va maintenant faire un tour d’horizon des fonctionnalités, des options, des composants et des évènements.
nb : Cette fois ci, je vais éviter de recopier l’intégralité du code de chaque classe, je vais me contenter d’afficher les lignes importantes.

Voici le code de base pour afficher la carte sur la scène :
var _map:Map = new Map(); _map.language = "fr_FR"; _map.countryCode = "FR"; // la clé (unique par site/utilisateur) _map.key = "ABQIAAAAvwdr5PrLsm228aByyJiTFRQ5NISJ_vEU2QZeuqsHywIYKJUzMhS0KqAO5rT_XJ07lAzKRjs3aZG6eQ"; _map.setSize(new Point(stage.stageWidth, stage.stageHeight)); this.addChild(_map);
Si on veut définir des options tel que le niveau de zoom, la position de départ, le type de la carte …., on peut le faire dans l’évènement MapEvent.MAP_PREINITIALIZE
:
// ajout de l'évènement _map.addEventListener(MapEvent.MAP_PREINITIALIZE, evtMapPreinitialize); // EVENEMENT -> INITIALISATION MAP (définition des options) private function evtMapPreinitialize(ev:MapEvent):void { var mapO:MapOptions = new MapOptions(); mapO.zoom = 13;// Le niveau de zoom mapO.center = new LatLng(48.790367,2.656885);// On centre la carte sur la latitude et longitude de ma ville mapO.mapType = MapType.HYBRID_MAP_TYPE;// le type de carte _map.setInitOptions(mapO); }
Pour les marqueurs et les lignes (sur-couches) qui doivent être ajoutés aprés le chargement de la carte, il faut le faire dans l’évènement MapEvent.MAP_READY
:
// ajout de l'évènement _map.addEventListener(MapEvent.MAP_READY, evtMapReady); // EVENEMENT -> CHARGEMENT MAP (ajout des marqueurs et des lignes) private function evtMapReady(ev:MapEvent):void { // définition de 2 positions var _positionRoissy:LatLng = new LatLng(48.790367,2.656885); var _positionGarePontault:LatLng = new LatLng(48.805843, 2.617828); // options du 1er marqueur : couleur, texte, taille, .... var m:MarkerOptions = new MarkerOptions( { fillStyle: { color:0xFF0000 }, strokeStyle: { color:0, thickness:1 }, tooltip:"Roissy en brie", radius:20, hasShadow:true, draggable:false } ); // ajout du 1er marqueur à la carte (position+options) _map.addOverlay(new Marker(_positionRoissy, m)); // options du 2eme marqueur : couleur, texte, taille, .... m = new MarkerOptions( { fillStyle: { color:0x00FF00 }, strokeStyle: { color:0, thickness:1 }, tooltip:"la gare de pontault", radius:20, hasShadow:true, draggable:false } ); // ajout du 2eme marqueur à la carte (position+options) _map.addOverlay(new Marker(_positionGarePontault, m)); // Options du trait var po:PolylineOptions = new PolylineOptions({ strokeStyle: new StrokeStyle({ color: 0xFF0000, thickness: 4, alpha: 0.7}) }); // dessiner un trait entre les 2 positions var pl:Polyline = new Polyline([_positionRoissy, _positionGarePontault], po); _map.addOverlay(pl); }
Pour l’instant notre carte est toujours très pauvre, c’est le moment de rajouter les composants (contrôles), dans l’évènement MapEvent.MAP_READY
:
// EVENEMENT -> CHARGEMENT MAP private function evtMapReady(ev:MapEvent):void { // ajout des controles _map.addControl(new MapTypeControl()); _map.addControl(new OverviewMapControl()); _map.addControl(new NavigationControl()); var sco:ScaleControlOptions = new ScaleControlOptions(); sco.labelFormat = new TextFormat('Arial', 12, 0xFFFFFF, true); sco.units = ScaleControlOptions.UNITS_METRIC_ONLY; _map.addControl(new ScaleControl(sco)); }
Maintenant, il serait sympa de rajouter une fonctionnalité qui manque à Google Maps dans Flash : la possibilité de changer le niveau de zoom avec la roulette de la souris :
// ajout de l'évènement _map.addEventListener(MouseEvent.MOUSE_WHEEL, evtMapMouseWheel); // EVENEMENT -> ZOOM SUR LA CARTE AVEC LA ROULETTE DE LA SOURIS private function evtMapMouseWheel(ev:MouseEvent):void { // recuperer le zoom actuel et l'incrémenter ou le décrémenter suivant la // direction de la roulette de la souris en limitant le pas à 1 var z:Number = _map.getZoom() + (ev.delta > 1 ? 1 : -1); z = (z > 20 ? 20 : z); // Zoomer sur la carte en utilisant son centre //_map.setCenter(_map.getCenter(), z); // ou // Zoomer sur la carte en la centrant sur la position de la souris var pos:LatLng = _map.fromViewportToLatLng(new Point(_map.mouseX, _map.mouseY)); _map.setCenter(pos, z); }
Pour le prochain article sur Google Maps, on verra comment rajouter un zoom basé sur un rectangle de sélection.