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:
- Karte erstellen und anzeigen lassen
- Marker hinzufügen
- Google-typische Button- und Bedienelemente hinzufügen
- Übersichtskarte hinzufügen
- Eigene Grafik als Marker verwenden
- Geocoding
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
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]
[/html]
Link: Beispiel anschauen
Google Maps for Flash: Marker hinzufügen
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
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
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
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
[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]
Hier etwas zum Thema „Google Maps for Flash“ in Flash CS3:
„USING GOOGLE MAPS WITHIN CS3“
http://labs.qi-ideas.com/2008/06/19/using-google-maps-within-cs3/
Hier ein weiterer Link, wie man wohl die Google Maps Komponente in Flash verwenden kann:
http://www.ideaography.net/using-google-maps-in-flash-without-flex/
Die Maps-API liegt übrigens mittlerweile in Version 1.6 vor.
Hier ein paar Infos über neue Features:
http://www.ideaography.net/google-maps-flash-api-update/
Google Maps for Flash funktioniert jetzt auch mit Adobe AIR.
http://shigeru-nakagaki.com/index.cfm/2008/11/21/20081121-Google-Maps-for-Flash-on-AIR-NOW
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.
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);
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
Einfach die Größenangaben anpassen. Du kannst auch absolute Werte nehmen.
width="100%" height="100%"