Tutorial: Einführung in Google Maps for Flash/Flex

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.

[ad]

[xml]





[/xml]

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]




Google Maps Demo




[/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]





[/xml]

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]





[/xml]

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]





[/xml]

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]





[/xml]

Link: Beispiel „Custom Marker“ anschauen

Google Maps for Flash: Geocoding

Google Maps Flash Geocoding

[ad]

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]




0) { // Karte auf neue Position bewegen (Eigenschaft point enthält Zielkoordinaten) map.setCenter(placemarks[0].point, 10); // neue Marker für die Zielposition marker = new Marker(placemarks[0].point); // Marker auf die Karten setzen map.addOverlay(marker); // event listener für Anklicken des Markers marker.addEventListener( MapMouseEvent.CLICK, onMarkerClick); } } /* ** Geocoding Failed ** */ private function onGeocodingFailure(event:GeocodingEvent):void { Alert.show(„Geocoding nicht erfolgreich“); } /* ** onMarkerClick ** */ private function onMarkerClick(event:MapMouseEvent):void { marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address})); } ]]>


[/xml]

Link: Beispiel „Geocoding“ anschauen

9 Gedanken zu „Tutorial: Einführung in Google Maps for Flash/Flex“

  1. Ich schlage mich gerade damit herum meinen Markern beizubringen das nach
    einem Klickereignis sich die Zoomstufe ändern soll und der Mittelpunkt der
    Karte auf den geklickten Marker ausgerichtet wird.
    Mit folgendem Code funktioniert es leider nicht:

    private var markerObjects:Array=[];

    public function readXml(event:Event):void {
    var markersXML:XML=new XML(event.target.data);
    var markers:XMLList=markersXML..marker;
    var markersCount:int=markers.length();
    var i:Number

    for(i=0; i < markersCount; i++)
    {
    var marker:XML=markers[i];
    var name:String=marker.@name;
    var latlng:LatLng=new LatLng(marker.@lat,
    marker.@lng);
    var mapMarker:Marker=createMarker(latlng,
    name);
    googleMap.addOverlay(mapMarker);
    }
    }

    public function createMarker latlng:LatLng, name:String):Marker
    {
    var marker:Marker=new Marker(latlng);
    var html:String=“<b>“ + name + „</b>“
    marker.addEventListener(MapMouseEvent.CLICK,
    function
    (e:MapMouseEvent):void {
    googleMap.setZoom(10);
    });
    googleMap.setCenter({mapMarker:latlng,
    opt_zoom:7});
    return marker;
    }

    Die Newsgroup bei Google habe ich bereits befragt, leider sind die
    Antworten recht spärlich und habe noch nicht weitergeholfen.

    Die Fehlermeldung die ich in dem Klickereignis bekomme ist folgende:
    Error: Implicit coercion of a value with static type Object to a
    possibly unrelated type com.google.maps:LatLng.

    Ich würde mich freune wen Sie mir ein Stück weiterhelfen könnten.

  2. Evtl. hilft dir diese Klasse weiter:

    package com.icw {

    import flash.geom.Point;
    import mx.controls.Image;
    import mx.controls.Text;
    import mx.controls.TextArea;
    import org.flashdevelop.utils.FlashConnect
    import flash.events.Event;
    import flash.filters.DisplacementMapFilter;
    import mx.events.TreeEvent;
    import com.google.maps.*;
    import com.google.maps.styles.*;
    import com.google.maps.overlays.*;
    import com.google.maps.controls.*;
    import com.google.maps.services.*;
    import mx.controls.Alert;
    import flash.display.Loader;
    import flash.net.URLRequest;
    import flash.display.DisplayObject;

    public class CustomMarker {

    /*
    * map where to place the marker
    */
    private var map:Map;

    /*
    * coordinates
    */
    private var coord:LatLng;

    /*
    * coordinates
    */
    private var zoomLevel:Number;

    /*
    * text field (where to place the text)
    */
    private var textField:Text;

    /*
    * image of the location
    */
    private var imgLocationObject:Image;

    /*
    * description text for the location
    */
    private var description:String;

    /*
    * description text for the location
    */
    private var imageOfLocationURL:String;

    public function CustomMarker(m:Map, coordinates:LatLng, zoom:Number, imageURL:String):void {

    map = m;
    coord = coordinates;
    zoomLevel = zoom;

    // Request
    var request:URLRequest = new URLRequest(imageURL);

    // neuer Loader
    var loader:Loader = new Loader();

    // event listener
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setMarker);

    // start loading
    loader.load(request);

    }

    /*
    ** setMarker
    **
    */
    private function setMarker(evt:Event):void {

    // geladene Datei als DisplayObject ablegen
    var myIcon:DisplayObject = evt.target.content as DisplayObject;

    var myMarker:Marker = new Marker(
    coord,
    new MarkerOptions({
    icon: myIcon,
    iconAlignment: MarkerOptions.ALIGN_BOTTOM,
    iconOffset: new Point(-10, 0),
    hasShadow: true
    }));

    map.addOverlay(myMarker);

    myMarker.addEventListener(MapMouseEvent.CLICK, onMarkerClick);

    }

    /*
    ** onMarkerClick
    **
    */
    private function onMarkerClick(evt:MapMouseEvent):void {

    map.setCenter(coord, zoomLevel);
    textField.htmlText = description;
    imgLocationObject.visible = true;
    imgLocationObject.source = imageOfLocationURL;

    }

    /*
    ** initInfoBox
    **
    */
    public function initInfoBox(tf:Text, ig:Image, des:String, imgUrl:String):void {

    textField = tf;
    description = des;

    // save to the destination movieclip
    imgLocationObject = ig;

    // save the URL
    imageOfLocationURL = imgUrl;

    }

    }

    }

    Kann dann so erstellt werden:

    var myMarker:CustomMarker = new CustomMarker(map,
    new LatLng(…, …), zoomLevel , marker);

  3. Habe ein Problem und zwar möchte ich die Karte in einer Größe von 100×100 Pixeln anzeigen, wie definiere ich die Größe des Fensters/ Containers? Desweiteren stimmt die Position der Karte innerhalb der Bühe nicht. Was kann ich da tun?

    Danke

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert