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. :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  3.  
  4.  
  5.   :Panel title="Google Maps" width="100%" height="100%">
  6.    
  7.        
  8.         :UIComponent id="mapContainer"
  9.             initialize="startMap(event);"
  10.             resize="resizeMap(event)"
  11.             width="100%" height="100%" />
  12.  
  13.   :Panel>
  14.  
  15.  
  16.  
  17.  
  18.  
  19.   :Script>
  20.    
  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.   :Script>
  77.  
  78. :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.    "http://www.w3.org/TR/html4/strict.dtd">
  2.  
  3. lang="en">
  4.     http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.     </span></span>Google Maps Demo<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
  6.    
  7.   id="map_canvas" name="map_canvas">
  8.    
  9.       classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  10.       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
  11.       width="800px"
  12.       height="400px">
  13.       name="movie" value="example0.swf">
  14.       name="quality" value="high">
  15.       name="flashVars" value="key=ABCDEFG">
  16.      
  17.         width="800px"
  18.         height="400px"
  19.         src="example0.swf"
  20.         quality="high"
  21.         flashVars="key=ABCDEFG"
  22.         pluginspage="http://www.macromedia.com/go/getflashplayer"
  23.         type="application/x-shockwave-flash">
  24.       </embed>
  25.    
  26.  
  •