The following example shows how you can embed a Google map into a Flex/ActionScript 3.0 project.
Full code after the jump.
Before getting started, you need to first get an API key from Google and then download the mapping component and put it in your /libs/ folder in your Flex Builder 3 project:
- Click here to get Google Maps API key.
- Click here to download the Google Maps ActionScript 3.0 component.
- Copy the map_flex_1_5.swc file from the .ZIP file’s /lib/ directory and copy it into your Flex Project’s /libs/ directory.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/03/using-google-maps-in-a-flex-project/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.services.GeocodingResponse;
import com.google.maps.services.Placemark;
import mx.controls.Alert;
import mx.events.ResizeEvent;
private var googleMap:Map;
private var geocoder:ClientGeocoder;
private function init():void {
googleMap = new Map();
googleMap.key = APP_ID;
googleMap.addEventListener(MapEvent.MAP_READY, googleMap_mapReady);
googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
googleMap.addControl(new ZoomControl());
googleMap.addControl(new MapTypeControl());
mapContainer.addChild(googleMap);
}
private function geocoder_geocodingSuccess(evt:GeocodingEvent):void {
var result:Placemark = GeocodingResponse(evt.response).placemarks[0];
googleMap.setCenter(result.point, 13);
}
private function geocoder_geocodingFailure(evt:GeocodingEvent):void {
Alert.show("Unable to geocode address: " + evt.name);
}
private function googleMap_mapReady(evt:MapEvent):void {
geocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocoder_geocodingSuccess);
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocoder_geocodingFailure);
geocoder.geocode(textInput.text);
}
private function button_click(evt:MouseEvent):void {
geocoder.geocode(textInput.text);
}
private function mapContainer_resize(evt:ResizeEvent):void {
if (googleMap) {
googleMap.setSize(new Point(mapContainer.width, mapContainer.height));
}
}
]]>
</mx:Script>
<mx:String id="APP_ID" source="appid.txt" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="Address:"
direction="horizontal">
<mx:TextInput id="textInput"
text="601 Townsend St, San Francisco, CA 94103" />
<mx:Button id="button"
label="Submit"
click="button_click(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:UIComponent id="mapContainer"
width="100%"
height="100%"
resize="mapContainer_resize(event);" />
</mx:Application>
View source is enabled in the following example.
For more information and examples, see the “Google Maps API for Flash homepage”.
Nice example !
You can see another example of an app using Google Maps here :
http://beta.navx.com/en/
very cool！！！
Why google Map Status is Debug?
Thanks for the example, Peter.
@Owen - you’re getting the debug message because you’re running the flex app on localhost. If you upload your resulting swf to be served from beneath the domain you gave when you registered for an API key, you’ll find that the debug message is gone (and GeoCoding works)
I would love a tutorial on how they did this:
http://beta.navx.com/en/
Sean B. Halliday
Hi! This is a shameless plug. I’m also building a series of tutorials utilizing GoogleMaps in Flex.
http://danao.org/2008/05/28/google-maps-flex-basic/
http://danao.org/2008/08/06/google-maps-flex-with-overlays/
Cheers! :)
Jon
i don’t get one thing with the appid.txt are there any quotes or anything u have to put around key?
cyberoverdose,
No, you just need to sign up for your own API key and then paste it into that file (without quotes).
Peter
I keep getting a 1046 error for all the events (Geocoding Event and Map Event). The error is specifically for the event functions geocoder_geocodingSuccess, geocoder_geocodingFailure, googleMap_mapReady. Not sure what the problem may be?
oh, ok I got it to work. I thought you needed to create a libs folder within assets. However, I just realized you could use the libs folder that automatically is built by Flex Builder 3. Thanks for the example. This site is made of delicious awesomeness!
wat did i do,run my googlemap in localhost,that means i got o/p in debugmode,how it go out
ramya,
To get rid of the debugmode, I believe you need to upload the SWF file to a webserver.
Peter
Thank u Mr.Peterd,but tell me the process,wat m doing?,i ve no idea abt that
And how to give the all lat&lang dynamically for particular city in one country(eg:France,in this lot of cities r present,when i clicked particular city on combobox like ‘NICE’,it shows ‘NICE’ city on France map),
i got one idea,in XML gives all lat&lang&call it by using or ,is it correct r not?
create XML,
call it by using websevice or httpservice
Hi.
this site is awesome, thank you! :)
I’ve tried the map demo. On localhost, it showed the debug mode, which is to be expected.
When I uploaded it to the server, the container is visible, but displays this message:
Initialization failed: please check the API key,
swf location, version and network availability.
Any ideas?
Many thanks,
Matt
Matt,
And you pasted your Google Maps API key in appid.txt?
Peter
Hi Peter.
Thank you for your reply.
Yes, the API key is included in the appid.txt file.
Matt,
I haven’t seen that error before (but I’ve only tried a few simple things with Google Maps).
Does this help? http://groups.google.co.ke/group/Google-Maps-API/browse_thread/thread/afb8173049b08cee?fwc=1
Peter
Cool, like the map blinds when I resize it, I add a lazy resize:
private var _lazy_resize_timer:uint = 0; private function mapContainer_resize(evt:ResizeEvent):void { if (googleMap) { clearTimeout(this._lazy_resize_timer); this._lazy_resize_timer = setTimeout(_do_lazy_resize,50); } } private function _do_lazy_resize():void { googleMap.setSize(new Point(mapContainer.width, mapContainer.height)); }