Home  >  

Google Releases AS3 Maps API

Author photo
AddThis Social Bookmark Button
Yep, thats right... Google has released a Flash/AS3 API for Google Maps, and yes, it works with Flex. I'm very glad to see the Google Maps team take this step, and provide a supported API for their maps interface.

You can access the Google Maps Flash API directly at:
http://code.google.com/apis/maps/documentation/flash/intro.html

There are also a bunch of samples how to use Google Maps in your Flex/Flash applications at:
http://code.google.com/p/gmaps-samples-flash/

And, Don't forget the Google Maps API Blog:
http://googlemapsapi.blogspot.com/

It's pretty straightforward to use, and can easily integrate with your existing applications. Here's my example:



Here's how I embedded it into a Flex application. The trick is that you need to manually add the map component to a container in your application. It did not work when I tried to manually declare the map in MXML. Also, be sure to sign up for an API key, or else it will not work for you.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%" height="100%" 
    viewSourceURL="srcview/index.html"
    backgroundColor="#FFFFFF">
  
  	<mx:Style>
  		Application {
 		   backgroundColor: #ffffff;
 		   backgroundGradientColors: #ffffff, #ffffff;
 		}
  	
  		Panel {
 		   borderThicknessLeft: 0;
 		   borderThicknessTop: 0;
 		   borderThicknessBottom: 0;
 		   borderThicknessRight: 0;
 		   cornerRadius: 10;
 		   headerColors: #000000, #999999;
 		}
  	</mx:Style>
  
	<mx:Script>
		<![CDATA[
			import com.google.maps.interfaces.IMapType;
		  	import com.google.maps.LatLng;
		  	import com.google.maps.Map;
		  	import com.google.maps.MapEvent;
		  	import com.google.maps.MapType;
		 
		  	private var map:Map;
		  	
		  	public function onContinerInitialize( event:Event ):void 
		  	{
 			    map = new Map();
 			    map.key = "put your api key here";
 			    map.addEventListener( MapEvent.MAP_READY, onMapReady );
 			    mapContainer.addChild( map );
 		  	}
		
			public function onContainerResize( event:Event ):void 
			{
 			    map.setSize( new Point( mapContainer.width, mapContainer.height ) );
 			}
		
		 	private function onMapReady( event:Event ):void 
		 	{
 		 		mapType.dataProvider = [ MapType.PHYSICAL_MAP_TYPE, MapType.NORMAL_MAP_TYPE, MapType.SATELLITE_MAP_TYPE, MapType.HYBRID_MAP_TYPE ];
 			    mapType.selectedIndex = 0;
 			    map.enableScrollWheelZoom();
 			    map.enableContinuousZoom();
 			    map.setCenter(new LatLng(38.897318, -77.035392), 10, mapType.dataProvider[0] );
 		  	}
		  	
		  	private function onChangeMapType() : void
		  	{
 		  		if ( mapType.selectedItem )
 		  			map.setMapType( IMapType( mapType.selectedItem ) );
 		  	}
		  	
		  	private function labelFunction( o : Object ) : String
		  	{
 		  		if ( o is IMapType )
 		  			return IMapType( o ).getName();
 		  		return "";
 		  	}
		]]>
	</mx:Script>
		  
	<mx:Panel 
	  	title="Google Maps Sample" 
	  	top="5" bottom="5" left="5" right="5">
	    
	    <mx:UIComponent id="mapContainer" 
	        initialize="onContinerInitialize(event);" 
	        resize="onContainerResize(event)" 
	        width="100%" height="100%"/>
	  	
	  	<mx:ControlBar>
	  		
	  		<mx:Label text="Map Type" />
	  		<mx:ComboBox id="mapType" 
	  			labelField="label" 
	  			change="onChangeMapType()" 
	  			labelFunction="labelFunction" />
	  			
	  	</mx:ControlBar>
	  	
	</mx:Panel>
  
</mx:Application>


You can launch the example in a new window at:
http://www.tricedesigns.com/portfolio/googleMaps/GoogleMaps.html

You can access the source code in a new window at:
http://www.tricedesigns.com/portfolio/googleMaps/srcview/index.html

___________________________________
Andrew Trice
Principal Architect
Cynergy Systems http://www.cynergysystems.com

Read more from Andrew Trice. Andrew Trice's Atom feed

Comments

11 Comments

Pamela Fox said:

Hi Andrew!

Thanks for the great demo. Any interest in having it added to the demo gallery? (I wouldn't be moving the code to our site, just linking back to your site). Let me know! - pamela

Andrew Trice said:

Sure, go for it. Let me know where the demo gallery is, so I can check it out.

Chris Scott said:

Andy your so crazy! I just dropped the new google map component into the project I am working on today! One day behind you my man! Keep up the killer posts!

Johan said:

Nice demo, thanks for sharing code - got it up and running no problem.

Rob said:

I must be missing something. tho I am totally new to this so this may be a stupid question.

All I did was copy the code into a new flex project in Flex Builder 3 and hit run - comes up with a compile error. What am i missing? This is doing my head in :(

Any help would be appreciated.

Thanks!!

Fabianv said:

Now that is one speedy map.. seems to perform much better than the Ajax version

chris said:

Thanks for the great post! I'm totally new to the map API and I have a question: can a KML layer be added to this easily? Does the GGeoXml method work with this?

Thanks!

MArcio said:

http://www.rarusflats.com.br/google_maps_sem_module/google_maps_sem_module.html

Because the Drag not is functional im my example ?

Is a copy of your code

Steve_N said:

A hint:
Don't waste your time trying this in Adobe AIR.
It won't work due to licensing-restrictions!

Erin said:

This works great for me. The one question I have is how do I get it to animate the combo box like you did, where it gracefully slides up and down? Mine just jumps up and down. Thanks!

Leave a comment


Tag Cloud

Question of the Week: Open Source Flex Projects

What would you say are the 5 most prominent open source projects in the Flex world?

Answer

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.