Wie berichtet, erschien diese Woche die Google Maps AS3 API für Flex. Grund genug, einen näheren Blick auf die wichtigsten Funktionen dieser API zu werfen.

In diesem Beitrag werden folgende Themen gezeigt:

Hinweis: Trotz des Namens Google Maps API for Flash funktioniert die API zurzeit nur mit Flex und nicht mit Flash CS3 oder AIR. Deshalb benötigen die folgenden Beispiel das Flex SDK oder den Flex Builder. Die Beispielcodes werden beim Flex SDK mit mxmlc example1.mxml -library-path+=lib kompiliert.

Google Maps for Flash: Karte erstellen und anzeigen lassen

Google Maps Flash Flex

Das erste Beispiel zeigt, wie man eine Google Maps Karte in Flex integriert. Im MXML-Code wird dazu eine UI-Komponente erstellt, in der die Karte über den Funktionsaufruf startMap per ActionScript hineingeladen wird.

Ist die Karte fertig initialisiert, wird das Event MapEvent.MAP_READY ausgelöst. Nun kann man mit map.setCenter die Koordinaten, den Zoomlevel und die Darstellungsmethode der Karte wählen.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.  
  17.   <!-- ActionScript -->
  18.  
  19.   <mx:Script>
  20.     <![CDATA[
  21.     import flash.events.Event;
  22.     import com.google.maps.*;
  23.  
  24.  
  25.         /*
  26.         ** Karte
  27.         */
  28.         private var map:Map;
  29.  
  30.  
  31.         /*
  32.         ** Map erstellen
  33.         **
  34.         */
  35.        public function startMap(event:Event):void {
  36.    
  37.             // new map
  38.             map = new Map();
  39.    
  40.             // event listener, wenn Map fertig initialisiert
  41.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  42.    
  43.             // Map in den mapContainer einfügen
  44.             mapContainer.addChild(map);
  45.         }
  46.      
  47.  
  48.         /*
  49.         ** Größenänderung des Cont
  50.         **
  51.         */
  52.         public function resizeMap(event:Event):void {
  53.        
  54.             // Karte bei Größenänderung des Containers nachziehen
  55.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  56.         }
  57.  
  58.         /*
  59.         ** onMapReady
  60.         **
  61.         */
  62.         private function onMapReady(event:MapEvent):void {
  63.        
  64.        
  65.             // Anfangsposition setzen
  66.                 // Koordinaten
  67.                 // Zoomlevel: 0 bis 19
  68.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  69.             map.setCenter(new LatLng(33.7243396617476, -34.453125), 2, MapType.SATELLITE_MAP_TYPE);
  70.         }
  71.    
  72.    
  73.    
  74.    
  75.     ]]>
  76.   </mx:Script>
  77.  
  78. </mx:Application>

Wichtig ist bei allen Beispielen, dass man bei der Einbettung in HTML den Google API Key übergibt, sonst erscheint eine Fehlermeldung. Im unten gezeigten HTML-Beispielcode, den man für alle Demos verwenden kann, muss man diesen an zwei Stellen eintragen. Man könnte den Key jedoch auch im ActionScript-Code mit maps.key="ABCDEFG" hinzufügen.

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3.  
  4. <html lang="en">
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.     <title>Google Maps Demo</title>
  8.     <!-- Date: 2008-05-16 -->
  9. </head>
  11.   <div id="map_canvas" name="map_canvas">
  12.     <object
  13.       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  14.       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
  15.       width="800px"
  16.       height="400px">
  17.       <param name="movie" value="example0.swf">
  18.       <param name="quality" value="high">
  19.       <param name="flashVars" value="key=ABCDEFG">
  20.       <embed
  21.         width="800px"
  22.         height="400px"
  23.         src="example0.swf"
  24.         quality="high"
  25.         flashVars="key=ABCDEFG"
  26.         pluginspage="http://www.macromedia.com/go/getflashplayer"
  27.         type="application/x-shockwave-flash">
  28.       </embed>
  29.     </object>
  30.   </div>
  31.  
  32. </body>
  33. </html>

Link: Beispiel anschauen

Google Maps for Flash: Marker hinzufügen

Google Maps Flash Marker

Wie von der JavaScript-API bekannt, können einer Karte die typischen Google Maps Marker hinzugefügt werden. Die Klasse Marker enthält alle nötigen Eigenschaften und Methoden dafür. Im Konstruktor legt man die Zielkoordinaten fest. Des Weiteren wird über MarkerOptions das Aussehen (Farbe, Größe, Schatten, etc.) des Markers beeinflusst.

Zuletzt muss man den Marker mit der Methode overlay auf der Karte platzieren.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.  
  17.   <!-- ActionScript -->
  18.  
  19.   <mx:Script>
  20.     <![CDATA[
  21.     import flash.events.Event;
  22.     import com.google.maps.*;
  23.     import com.google.maps.styles.*;
  24.     import com.google.maps.overlays.*;
  25.  
  26.  
  27.         /*
  28.         ** Karte
  29.         */
  30.         private var map:Map;
  31.  
  32.  
  33.         /*
  34.         ** Map erstellen
  35.         **
  36.         */
  37.        public function startMap(event:Event):void {
  38.    
  39.             // new map
  40.             map = new Map();
  41.    
  42.             // event listener, wenn Map fertig initialisiert
  43.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  44.    
  45.             // Map in den mapContainer einfügen
  46.             mapContainer.addChild(map);
  47.         }
  48.      
  49.  
  50.         /*
  51.         ** Größenänderung des Cont
  52.         **
  53.         */
  54.         public function resizeMap(event:Event):void {
  55.        
  56.             // Karte bei Größenänderung des Containers nachziehen
  57.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  58.         }
  59.  
  60.         /*
  61.         ** onMapReady
  62.         **
  63.         */
  64.         private function onMapReady(event:MapEvent):void {
  65.        
  66.        
  67.             // Anfangsposition setzen
  68.                 // Koordinaten
  69.                 // Zoomlevel: 0 bis 19
  70.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  71.             map.setCenter(new LatLng(33.7243396617476, -34.453125), 2, MapType.SATELLITE_MAP_TYPE);
  72.    
  73.    
  74.             setMarker();
  75.    
  76.         }
  77.    
  78.    
  79.         /*
  80.         ** setMarker
  81.         **
  82.         */
  83.         private function setMarker():void {   
  84.        
  85.           var meinMarker1:Marker = new Marker( 
  86.               new LatLng(48.8, 2.3),
  87.               new MarkerOptions({
  88.                           strokeStyle: new StrokeStyle({color: 0x005571}),
  89.                           fillStyle: new FillStyle({color: 0xe8f9ff, alpha: 0.8}),
  90.                           radius: 12,
  91.                           hasShadow: true
  92.               }));
  93.           map.addOverlay(meinMarker1);
  94.         }
  95.    
  96.    
  97.     ]]>
  98.   </mx:Script>
  99.  
  100. </mx:Application>

Link: Beispiel "Marker" anschauen

Google Maps for Flash: Google-typische Button- und Bedienelemente hinzufügen

Google Maps Flash Buttons

Jeder kennt die Google-typischen Elemente wie den Zoomslider, das Steuerkreuz oder die Buttons zum Wechseln der Kartenansicht (Karte, Satellit, Hybrid, Gelände). Selbstverständlich sind auch diese in der Google Maps for Flash API enthalten. Die Klasse heißt com.google.maps.controls.

Die drei Bedienelemente heißen ZoomControl, PositionControl und MapTypeControl und können über map.addControl() in die Anwendung geladen werden.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.  
  17.   <!-- ActionScript -->
  18.  
  19.   <mx:Script>
  20.     <![CDATA[
  21.     import flash.events.Event;
  22.     import com.google.maps.*;
  23.     import com.google.maps.styles.*;
  24.     import com.google.maps.overlays.*;
  25.     import com.google.maps.controls.*;
  26.  
  27.  
  28.         /*
  29.         ** Karte
  30.         */
  31.         private var map:Map;
  32.  
  33.  
  34.         /*
  35.         ** Map erstellen
  36.         **
  37.         */
  38.        public function startMap(event:Event):void {
  39.    
  40.             // new map
  41.             map = new Map();
  42.    
  43.             // event listener, wenn Map fertig initialisiert
  44.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  45.    
  46.             // Map in den mapContainer einfügen
  47.             mapContainer.addChild(map);
  48.         }
  49.      
  50.  
  51.         /*
  52.         ** Größenänderung des Cont
  53.         **
  54.         */
  55.         public function resizeMap(event:Event):void {
  56.        
  57.             // Karte bei Größenänderung des Containers nachziehen
  58.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  59.         }
  60.  
  61.         /*
  62.         ** onMapReady
  63.         **
  64.         */
  65.         private function onMapReady(event:MapEvent):void {
  66.        
  67.        
  68.             // Anfangsposition setzen
  69.                 // Koordinaten
  70.                 // Zoomlevel: 0 bis 19
  71.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  72.             map.setCenter(new LatLng(35.7243396617476, -34.453125), 2, MapType.SATELLITE_MAP_TYPE);
  73.    
  74.             // Slider für Zoomlevel hinzufügen
  75.             map.addControl(new ZoomControl());
  76.            
  77.             // "Cursortasten" links oben für Position hinzufügen
  78.             map.addControl(new PositionControl());
  79.        
  80.             // Buttons für MapType-Auswahl hinzufügen
  81.             map.addControl(new MapTypeControl());
  82.            
  83.            
  84.            
  85.    
  86.         }
  87.    
  88.    
  89.  
  90.    
  91.  
  92.    
  93.    
  94.     ]]>
  95.   </mx:Script>
  96.  
  97. </mx:Application>

Link: Beispiel "Bedienelemente" anschauen

Google Maps for Flash: Übersichtskarte hinzufügen

Google Maps Flash Overview

Interessant ist die Möglichkeit, über die Klasse OverviewMapControlOptions eine kleine Übersichtskarte hinzuzufügen. Bei der Erstellung legt man zuerst die Größe der Übersichtskarte fest.

Dann kann man den Stil der Box festlegen, die die Übersichtskarte enthält. Außerdem kann das "Rechteck", das zum Navigieren in der Übersichtskarte dient, ebenfalls gestaltet werden. Hinzugefügt wird die Übersichtskarte wieder über die Funktion addControl().

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.  
  17.   <!-- ActionScript -->
  18.  
  19.   <mx:Script>
  20.     <![CDATA[
  21.     import flash.events.Event;
  22.     import com.google.maps.*;
  23.     import com.google.maps.styles.*;
  24.     import com.google.maps.overlays.*;
  25.     import com.google.maps.controls.*;
  26.  
  27.  
  28.         /*
  29.         ** Karte
  30.         */
  31.         private var map:Map;
  32.  
  33.  
  34.         /*
  35.         ** Map erstellen
  36.         **
  37.         */
  38.        public function startMap(event:Event):void {
  39.    
  40.             // new map
  41.             map = new Map();
  42.    
  43.             // event listener, wenn Map fertig initialisiert
  44.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  45.    
  46.             // Map in den mapContainer einfügen
  47.             mapContainer.addChild(map);
  48.         }
  49.      
  50.  
  51.         /*
  52.         ** Größenänderung des Cont
  53.         **
  54.         */
  55.         public function resizeMap(event:Event):void {
  56.        
  57.             // Karte bei Größenänderung des Containers nachziehen
  58.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  59.         }
  60.  
  61.         /*
  62.         ** onMapReady
  63.         **
  64.         */
  65.         private function onMapReady(event:MapEvent):void {
  66.        
  67.        
  68.             // Anfangsposition setzen
  69.                 // Koordinaten
  70.                 // Zoomlevel: 0 bis 19
  71.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  72.             map.setCenter(new LatLng(35.7243396617476, -34.453125), 2, MapType.SATELLITE_MAP_TYPE);
  73.    
  74.             // Slider für Zoomlevel hinzufügen
  75.             map.addControl(new ZoomControl());
  76.            
  77.             // "Cursortasten" links oben für Position hinzufügen
  78.             map.addControl(new PositionControl());
  79.        
  80.             // Buttons für MapType-Auswahl hinzufügen
  81.             map.addControl(new MapTypeControl());
  82.    
  83.             // Neue Übersichtskarte
  84.             placeOverview();
  85.            
  86.            
  87.            
  88.    
  89.         }
  90.    
  91.    
  92.  
  93.    
  94.    
  95.         /*
  96.         ** neue Übersichtskarte
  97.         **
  98.         */
  99.         private function placeOverview():void {   
  100.        
  101.         var sizeOverview:Point = new Point(200, 200);
  102.        
  103.         // Stil der "Box" für die Übersicht festlegen
  104.         var myControlStyle:BevelStyle = new BevelStyle(
  105.                                             {bevelAlpha: .9,
  106.                                             bevelStyle: BevelStyle.BEVEL_RAISED,
  107.                                             bevelThickness: 2} );
  108.        
  109.         // Stil des Rechtecks zum Navigieren festlegen
  110.         var myRectangle:RectangleStyle = new RectangleStyle(
  111.                                    {fillStyle: new FillStyle({alpha: 0.5, color: 0xc6d381}),
  112.                                    strokeStyle: new StrokeStyle({alpha: 0.5, thickness: 1})});
  113.    
  114.         // neue Overview erstellen
  115.         var overviewMapControlOptions:OverviewMapControlOptions = new OverviewMapControlOptions(
  116.               {padding: new Point(5, 5),
  117.                size: sizeOverview,
  118.                controlStyle: myControlStyle,
  119.                navigatorStyle: myRectangle
  120.               });
  121.    
  122.         // der Bühne hinzufügen
  123.         map.addControl(new OverviewMapControl(overviewMapControlOptions));
  124.         }
  125.    
  126.    
  127.     ]]>
  128.   </mx:Script>
  129.  
  130. </mx:Application>

Link: Beispiel "Übersichtskarte" anschauen

Google Maps for Flash: Eigene Grafik als Marker verwenden

Google Maps Flash Custom Marker

Möchte man nicht die Standard-Marker von Google verwenden, sondern eine eigene Grafik, gelingt dies über die Eigenschaft icon der MarkerOptions. Diese kann ein Object vom Typ DisplayObject darstellen.

Um eine Grafik (png, gif, jpg) als Marker einzusetzen, lädt man die externe Grafikdatei über die Loader-Klasse. Den geladenen Inhalt muss man nun als DisplayObject deklarieren und dem Marker übergeben.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.   <!-- ActionScript -->
  17.  
  18.   <mx:Script>
  19.     <![CDATA[
  20.     import flash.events.Event;
  21.     import com.google.maps.*;
  22.     import com.google.maps.styles.*;
  23.     import com.google.maps.overlays.*;
  24.     import com.google.maps.controls.*;
  25.     import mx.controls.Alert;
  26.     import flash.display.Loader;
  27.     import flash.net.URLRequest;
  28.  
  29.  
  30.         /*
  31.         ** Karte
  32.         */
  33.         private var map:Map;
  34.  
  35.  
  36.  
  37.         /*
  38.         ** Map erstellen
  39.         **
  40.         */
  41.        public function startMap(event:Event):void {
  42.    
  43.             // new map
  44.             map = new Map();
  45.    
  46.             // event listener, wenn Map fertig initialisiert
  47.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  48.    
  49.             // Map in den mapContainer einfügen
  50.             mapContainer.addChild(map);
  51.    
  52.         }
  53.      
  54.  
  55.         /*
  56.         ** Größenänderung des Cont
  57.         **
  58.         */
  59.         public function resizeMap(event:Event):void {
  60.        
  61.             // Karte bei Größenänderung des Containers nachziehen
  62.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  63.  
  64.         }
  65.  
  66.         /*
  67.         ** onMapReady
  68.         **
  69.         */
  70.         private function onMapReady(event:MapEvent):void {
  71.        
  72.        
  73.             // Anfangsposition setzen
  74.                 // Koordinaten
  75.                 // Zoomlevel: 0 bis 19
  76.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  77.             map.setCenter(new LatLng(48.8, 2.3), 10, MapType.NORMAL_MAP_TYPE);
  78.    
  79.             // Slider für Zoomlevel hinzufügen
  80.             map.addControl(new ZoomControl());
  81.            
  82.             // "Cursortasten" links oben für Position hinzufügen
  83.             map.addControl(new PositionControl());
  84.        
  85.             // Buttons für MapType-Auswahl hinzufügen
  86.             map.addControl(new MapTypeControl());
  87.    
  88.             // meine Marker(s) laden und platzieren
  89.             loadMyMarkers();           
  90.            
  91.            
  92.    
  93.         }
  94.    
  95.    
  96.         /*
  97.         ** loadMyMarkers
  98.         **
  99.         */
  100.         private function loadMyMarkers():void {
  101.        
  102.             // Request
  103.             var request:URLRequest  = new URLRequest("marker.png");
  104.            
  105.             // neuer Loader
  106.             var loader:Loader = new Loader();      
  107.            
  108.             // event listener   
  109.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setMarker);   
  110.            
  111.              // start loading
  112.              loader.load(request);
  113.         }         
  114.    
  115.         /*
  116.         ** setMarker
  117.         **
  118.         */
  119.         private function setMarker(evt:Event):void { 
  120.        
  121.             // geladene Datei als DisplayObject ablegen
  122.             var myIcon:DisplayObject = evt.target.content as DisplayObject; 
  123.  
  124.             var myMarker:Marker = new Marker( 
  125.                   new LatLng(48.8, 2.3),
  126.                   new MarkerOptions({
  127.                              icon: myIcon,
  128.                               hasShadow: true           
  129.                   }));
  130.        
  131.               map.addOverlay(myMarker);
  132.         }
  133.    
  134.    
  135.  
  136.    
  137.     ]]>
  138.   </mx:Script>
  139.  
  140. </mx:Application>

Link: Beispiel "Custom Marker" anschauen

Google Maps for Flash: Geocoding

Google Maps Flash Geocoding

Unter Geocoding versteht man das Konvertieren von Adressen (z.B. Berlin, Germany) in geografische Koordinaten. Diese Funktionalität ist in com.google.maps.services integriert.

Zuerst erstellt man ein Objekt vom Typ ClientGeocoder. Die Methode geocode() nimmt einen String mit der Adresse als Parameter und liefert die Koordinaten mittels eines Events zurück.

In diesem Beispiel sieht man außerdem, wie man ein InfoWindow beim Klick auf einen Marker öffnen kann.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.   <!-- Panel für die Applikation -->
  5.   <mx:Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.         <!-- UIComponent für Map -->
  8.         <mx:UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   </mx:Panel>
  14.  
  15.  
  16.   <!-- ActionScript -->
  17.  
  18.   <mx:Script>
  19.     <![CDATA[
  20.     import flash.events.Event;
  21.     import com.google.maps.*;
  22.     import com.google.maps.styles.*;
  23.     import com.google.maps.overlays.*;
  24.     import com.google.maps.controls.*;
  25.     import com.google.maps.services.*;
  26.     import mx.controls.Alert;
  27.     import flash.display.Loader;
  28.     import flash.net.URLRequest;
  29.  
  30.  
  31.         /*
  32.         ** Karte
  33.         */
  34.         private var map:Map;
  35.  
  36.         /*
  37.         ** Karte
  38.         */
  39.         private var placemarks:Array;
  40.  
  41.         /*
  42.         ** Marker
  43.         */
  44.         private var marker:Marker
  45.  
  46.         /*
  47.         ** Map erstellen
  48.         **
  49.         */
  50.        public function startMap(event:Event):void {
  51.    
  52.             // new map
  53.             map = new Map();
  54.    
  55.             // event listener, wenn Map fertig initialisiert
  56.             map.addEventListener(MapEvent.MAP_READY, onMapReady);
  57.    
  58.             // Map in den mapContainer einfügen
  59.             mapContainer.addChild(map);
  60.    
  61.             // Key über ActionScript zuweisen
  62.             //map.key = "ABCDEFG";
  63.         }
  64.      
  65.  
  66.         /*
  67.         ** Größenänderung des Cont
  68.         **
  69.         */
  70.         public function resizeMap(event:Event):void {
  71.        
  72.             // Karte bei Größenänderung des Containers nachziehen
  73.             map.setSize(new Point(mapContainer.width, mapContainer.height));
  74.  
  75.         }
  76.  
  77.         /*
  78.         ** onMapReady
  79.         **
  80.         */
  81.         private function onMapReady(event:MapEvent):void {
  82.        
  83.        
  84.             // Anfangsposition setzen
  85.                 // Koordinaten
  86.                 // Zoomlevel: 0 bis 19
  87.                 // MapType,MapType.NORMAL_MAP_TYPE, .SATELLITE_MAP_TYPE, .PHYSICAL_MAP_TYPE, HYBRID_MAP_TYPE
  88.             map.setCenter(new LatLng(35.7243396617476, -34.453125), 2, MapType.NORMAL_MAP_TYPE);
  89.    
  90.             // Slider für Zoomlevel hinzufügen
  91.             map.addControl(new ZoomControl());
  92.            
  93.             // "Cursortasten" links oben für Position hinzufügen
  94.             map.addControl(new PositionControl());
  95.        
  96.             // Buttons für MapType-Auswahl hinzufügen
  97.             map.addControl(new MapTypeControl());
  98.    
  99.             // Geocoding
  100.             doGeocode()
  101.    
  102.         }
  103.    
  104.    
  105.         /*
  106.         ** Geocding
  107.         **
  108.         */
  109.         private function doGeocode():void { 
  110.            
  111.             // neues Geocodingobjekt
  112.             var geocoder:ClientGeocoder = new ClientGeocoder();
  113.            
  114.             // Eventlistener für Geocoding erfolgreich
  115.             geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, onGeocodingSuccess);
  116.            
  117.             // Eventlistener für Geocoding nicht erfolgreich
  118.             geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, onGeocodingFailure);
  119.            
  120.             // Beispielaufruf mit "Berlin Germany"
  121.             geocoder.geocode("Berlin Germany");
  122.         }
  123.        
  124.        
  125.         /*
  126.         ** Geocoding Success
  127.         **
  128.         */
  129.         private function onGeocodingSuccess(event:GeocodingEvent):void {
  130.            
  131.             // Hinweis ausgeben
  132.             Alert.show("Geocoding erfolgreich");
  133.            
  134.             // Placemark (Orte) in einem Array ablegen
  135.             placemarks = event.response.placemarks;
  136.            
  137.             if (placemarks.length> 0) {
  138.                
  139.                 // Karte auf neue Position bewegen (Eigenschaft point enthält Zielkoordinaten)
  140.                 map.setCenter(placemarks[0].point, 10);
  141.                
  142.                 // neue Marker für die Zielposition
  143.                 marker = new Marker(placemarks[0].point);
  144.  
  145.                 // Marker auf die Karten setzen
  146.                 map.addOverlay(marker);
  147.                
  148.                 // event listener für Anklicken des Markers
  149.                 marker.addEventListener( MapMouseEvent.CLICK, onMarkerClick);
  150.                     
  151.             }   
  152.                    
  153.         }
  154.    
  155.         /*
  156.         ** Geocoding Failed
  157.         **
  158.         */
  159.         private function onGeocodingFailure(event:GeocodingEvent):void {
  160.             Alert.show("Geocoding nicht erfolgreich");
  161.         }   
  162.        
  163.         /*
  164.         ** onMarkerClick
  165.         **
  166.         */   
  167.         private function onMarkerClick(event:MapMouseEvent):void {
  168.                     marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
  169.         }
  170.    
  171.     ]]>
  172.   </mx:Script>
  173.  
  174. </mx:Application>

Link: Beispiel "Geocoding" anschauen