Artikelen

Google Maps in Flash

Gepost door benjamin op 2 apr 2010 in de categorie Google Flash

Altijd al de wens gehad om op je Flash website of applicatie een kaartje van Google Maps te tonen? Dat kan, want Google heeft een API beschikbaar gesteld om via een component (SWC) Google Maps op je Flash website te tonen.
De API heeft dezelfde eigenschappen als de reguliere JavaScript / HTML variant van Google Maps. Dit artikel laat de laatste ontwikkeling zien op het gebied van Flash en Google Maps.

1 Download de Google Maps API SDK
Via de Google Maps Api website voor Flash en Flex developers kun je een SWC (Flash component) file downloaden: http://maps.googleapis.com/maps/flash/release/sdk.zip
Vervolgens kopieer je de Flash versie van de SWC naar de components map van de Flash versie die je gebruikt, bijvoorbeeld:
C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\Components\User Interface

2. Bemachtig een API key voor de website waar je de Flash Google Maps plaatst
Om te zorgen dat er geen misbruik wordt gemaakt van de Google Maps API en om het aantal visits en kaartopvragen te monitoren, vraagt Google om een API key te implementeren. Deze API key kun je hier bemachtigen. Geef je sitenaam op en bewaar de API code. Voor bewired is dat deze code:

ABQIAAAAI7N_DNc3wgdlqEpm7NrdPRSNbgbNiadm4s5diMxJJxTrnusqe0Ts1OrJkjGdmk5QukelQA

3. Open Flash en maak een nieuw AS3 project aan
Open Flash en maak een nieuw AS3 project aan. Vervolgens sleep je vanuit het components panel de 'GoogleMapsLibrary' op de eerste layer van de stage.

4. Voeg de ActionScript toe
Om de meest basic Flash Google Maps weer te geven, plaats je de onderstaande code in een aparte actions layer:

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
var map:Map = new Map();map.key="ABQIAA-JOUW KEYCODE";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(52.3755991766591,4.888916015625), 14, MapType.NORMAL_MAP_TYPE);
}

In deze code voeg je eerst de belangijkste Google Maps classes toe. Vervolgens maak je een map aan die je 'map' noemt. Deze map laat je na het inladen (onMapReady) centreren naar een Lattitude en Longtitude, een zoomnivi\eau van 14 en maptype 'Normal'.

Stap 5. Customize de Google Map
Je kunt natuurlijk de Google Maps applicatie in Flash net zo aanpassen als de 'reguliere versie' in Javascript. Zo pas je heel eenvoudige de maptype aan:

NORMAL_MAP_TYPE- the default view
SATELLITE_MAP_TYPE - showing Google Earth satellite images
HYBRID_MAP_TYPE - showing a mixture of normal and satellite views
PHYSICAL_MAP_TYPE - showing a physical relief map of the surface of the Earth

Voeg je zoom en navigatie controls toe via de import controls:

import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.LatLng;
import com.google.maps.MapType;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
var map:Map = new Map();map.key="ABQIAA-JOUW KEYCODE";
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(52.3755991766591,4.888916015625), 14, MapType.NORMAL_MAP_TYPE);
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
}

En ook mooi: Je eigen Google Maps 3D map. Hiermee bouw je in feite je eigen TOMTOM navigator na in Google Maps en Flash:

Zie hier ook een voorbeeld van Google van deze documentatiepagina.

Plaats events, infowindows en markers via import com.google.maps.InfoWindowOptions; en ga zo maar door. Je kunt hier de volledige documentatie in het Engels bekijken van de Google Code website.

Download zipfile met sourcefiles met de SWC en de Flash CS4 sourcefile.

Terug

PHP

CMS