GoogleMap Flex Component

Filed under 3.0, Actionscript, Experiments, Flex, Flex Components, Google, Sample Application

After the release of greatest and awaited API for Flash Platform developers, I decided to facilitate the life of Flex Developers, Created just in some minutes a new component for Flex Developers who want to add more control or be very well organized.

I’ve created a new Component for Flex. here’s how to its works.

Copy and paste this code in your own Path.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
>>
package com.igorcosta
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
 
	import flash.events.Event;
	import flash.geom.Point;
 
	import mx.core.UIComponent;
	import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _Width:Number = 650;
		private var _Height:Number = 500;
		private var _mapa:Map;
		private var _key:String;		
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);						
		}
		private function init(event:Event):void {
			 this.width = _Width;
			this.height = _Height;			
			// Ininitate the Map Object
			_mapa = new Map();
			_mapa.key =_key;
			_mapa.addEventListener(MapEvent.MAP_READY,createUIMap);
			_mapa.setSize( new Point (this.width, this.height))
			// add map to displaylist
			this.addChild(_mapa);
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
		private function createUIMap(event:Event):void {
			_mapa.setCenter( new LatLng(40.736072,-73.992062),14,MapType.HYBRID_MAP_TYPE);
		}	
	}
}

How to use?

Simple just do that in your main application

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
  	<google: GoogleFlexMap 
  		key="your_key_goes_here" 
  		width="100%" height="100%"/>
 
</mx:  Application>

Very important link before you start.

There’s a lot of to do to be more simple as possible, as soon as I get more time I will add more options to automate that.

11 Comments

  1. Posted May 14, 2008 at 8:06 pm | Permalink

    Is there a running example online somewhere?

  2. Posted May 14, 2008 at 8:21 pm | Permalink

    Lest you could it right. it’s a flex API not a Flash API.

    Thank you google for leaving all the “flash developers” out of your so called flash API.

  3. Posted May 14, 2008 at 8:53 pm | Permalink

    Men you are fast! Thanks for sharing.

  4. Posted May 14, 2008 at 9:19 pm | Permalink

    wow, thanks igor.

    @tony, there’s a simple example running on the API docs page:
    http://code.google.com/apis/maps/documentation/flash/

  5. Tristan
    Posted May 15, 2008 at 12:38 pm | Permalink

    Josh, you can use Igor’s class for Flash too.

    import com.igorcosta.GoogleFlexMap;

    private var myMap:GoogleFlexMap = new GoogleFlexMap();

    private function init():void
    {
    myMap.key = “your_key_goes_here”;
    this.addChild(myMap);
    }

  6. Tristan
    Posted May 15, 2008 at 1:20 pm | Permalink

    My bad,

    “Google Maps Flash applications require not only ActionScript code but also at least some minimal user interface framework to display the map and any associated UI elements on a web page”

    - http://code.google.com/apis/maps/documentation/flash/basics.html

    Looks like you’ll have to learn Flex ;)

  7. Posted May 19, 2008 at 9:50 am | Permalink

    You beat me to it! I was about to do the same thing for the google maps. I’m actually surprised that Google didn’t create their own Flex (MXML) container for the map component.

  8. Posted May 19, 2008 at 2:09 pm | Permalink

    @Andrew hehehe, I saw on Techcrunch about this release via twitter and got running to see it, after I was chocked because their main leader did a as3.0 instrict package for that maps and some points i don’t know what is it, they didn’t.

    I took 1 hour to do so, and also did a major update last friday http://www.igorcosta.org/?p=142

    People get used to this link. Anyway I’m working on some new API with google services if you ‘d like we can put together our ideas in praticies.

    Att
    Igor

  9. Posted May 21, 2008 at 2:41 am | Permalink

    Thanks for sharing, great work

  10. anoop
    Posted June 26, 2008 at 10:41 am | Permalink

    thanks ya………….. great application…………..

  11. Javier
    Posted October 28, 2008 at 10:38 am | Permalink

    Where i have tu put the first code? Do i have to create an actionscript file wiht this code?
    And the second code is for an mxml file?

4 Trackbacks

  1. [...] a Flex Component from Igor Costa. Tags:Current Mortgage Rates This entry was posted on Wednesday, May 14th, 2008 at 3:50 pm and is [...]

  2. [...] Costa created a nice little GoogleMap Flex component here which encapsulates much of the essential stuff [...]

  3. By nwebb » GoogleMaps 101 on May 23, 2008 at 4:49 am

    [...] code from here-on-in assumes we have created our own map component by subclassing UIComponent – see here for an example. PLAIN TEXT [...]

  4. [...] и соответственно нарыл ссылочку на компонент Google Maps для Flex. Нарыл благодаря этому посту в блоге Андрея Горбатова, [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*