Criando sua primeira aplicação com o Google Maps AS3.0 API

Continuando depois do último post feito sobre esse estupendo, helvis,…, igual ao rapaz de Quixeramobim, Ceará. Vamos aos passos.

Antes de começar a ler o resto do post e bateu a preguiça de ler? Bom, eu pensei nisso também, então tá aqui a solução pronta.

Primeiro passo

Gere uma Google Map API Key para ter acesso externo aos mapas do google. Como? Clique aqui.

O que é esse Google Map API Key?
É um controle que o google faz para saber quantas aplicações ou acessos estão sendo feito em suas aplicações para servir como referência de suas pesquesas.
O Principal objetivo do GMA Key é justamente deixar você usar o serviço sem precisar autenticá-lo toda vez que for usar.
Não existe limitação de uso ou qualquer outra forma de bloqueio, porém o google pede que se o seu aplicativo tiver mais que 500mil pageview que entre em contato com eles para eles poderem te ajudar melhor nisso aumentando sua capacidade para que seu serviço não sofra com isso.

Aceite os termos do contrato, após isso submeta uma URL para que o google saiba onde será localizado o aplicativo, por exemplo você pode colocar apenas o site da sua empresa ou seu sem precisar especificar ao certo qual path(diretório) será guardado o aplicativo.

Copie o código que o Google vai lhe dar, geralmente é um conjunto imenso de caracteres, procure guardar em um bloco de notas da vida.

Minha chave de código é essa:

1
ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw

Mesmo eu colocando aqui publicamente a chave ela só funcionará no meu domínio, uma forma de proteger o serviço para cada domínio.

Lembre-se que não é necessário ter uma conta do Google para fazer isso, o que é mais legal ainda.

Segundo passo

Baixe o SDK do Google

O SDK do Google Maps As3.0 API, contém documentação de todas suas classes e um .swc que tanto pode ser usado no Flash quanto no Flex, por ambos os produtos suportarem a linguagem Actionscript 3.0.
Caso você esteja lendo esse post e usa Flash, espere por outro tutorial voltado para Flash, já que esse aqui será voltado apenas para desenvolvedores Flex.

Feito o Download do pacote que é um arquevo *.zip, por favor descompacte usando algum software .zip, supondo eu que aqui só tenha desenvolvedores ou aspirantes de desenvolvedores, obviamente maior parte aqui sabe usar um descompactador.

Hora de ir para o Flex Builder.

1. Crie um projeto Novo no Flex Builder
2. Nomeie o projeto como GoogleFlexMap
3. Clique em Finish

Na estrutura de diretório do projeto criado existe uma pasta chamada Libs, dentro dessa pasta você vai jogar o arquevo map_flex_1_1.swc que você estraiu do arquevo SDK zipado.
Não precisa de tanto detalhe basta copiar o arquevo, selecionar a pasta e dá um simples CTRL+V.

Feito isso, seu projeto vai suportar a API do Google Maps. Hora de começar a Programar.

Crie uma nova classe em AS3.0 no Flex. Para criar siga os passos:
1. File > New > Actionscript Class
2. Use o Package para a classe de seu gosto, eu usei o com.igorcosta
3. Por regra de convenção Classes em Actionscript é mais aceitas a primeira letra ser Maiúscula
4. Nomeie para GoogleFlexMap
5. Estenda o GoogleFlexMap usando o SuperClass, clique em Browser e escolha UIComponent para ser estendida.
6. Clique em OK

Se você seguiu tudo certo, você terá um novo arquevo gerado com a seguinte sintaxe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
package com.igorcosta
{
	import mx.core.UIComponent;
 
	public class GoogleFlexMap extends UIComponent
	{
		public function GoogleFlexMap()
		{
			super();
		}
 
	}
}

Nota: Como o google criou uma API genérica para Flash/Flex você vai precisar usar esse tipo de artifício para garantir que ele será adicionado a classe UIComponent que faz uso de criar controles da tela.

Então para encurtar mais eu fiz uma classe simples que vai definir um novo Componente no qual terá o nome definido de GoogleFlexMap igual a classe criada.

Segue a classe completa

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
package com.igorcosta
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ZoomControl;
 
	import flash.events.Event;
	import flash.geom.Point;
 
	import mx.core.UIComponent;
	import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _largura:Number = 650;
		private var _altura:Number = 500;
		private var _mapa:Map;
		private var _tipomapa:Array = ["hibrido","normal","fisico","satelite"];
		private var _key:String;
		private var _controleZoom:Boolean = false;
		private var _controlePosicao:Boolean = false;
		private var _controleTipo:Boolean = false;
 
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);
 
		}
		private function init(event:Event):void {
			 this.width = _largura;
			this.height = _altura;
			// Iniciando o Objeto Map
			_mapa = new Map();
			_mapa.key =_key;
			_mapa.addEventListener(MapEvent.MAP_READY,criarUIMapa);
			_mapa.setSize( new Point (this.width, this.height));
				if(_controleZoom){
				_mapa.addControl( new ZoomControl());
				}
				if(_controleTipo){
					_mapa.addControl(new PositionControl());
				}
				if(_controleTipo){
					_mapa.addControl(new MapTypeControl());
				}
			// adiciona o _mapa ao UIComponent;
			this.addChild(_mapa);
		}
		public function get ControleZoom():Boolean{
			return _controleZoom;
		}
		public function set ControleZoom(value:Boolean):void {
			_controleZoom = value;
		}
		public function get ControlePosicao():Boolean{
			return _controlePosicao;
		}
		public function set ControlePosicao(value:Boolean):void {
			_controlePosicao = value;
		}
		public function get ControleTipo():Boolean {
			return _controleTipo;
		}
		public function set ControleTipo(value:Boolean):void {
			_controleTipo = value;
 
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
		private function criarUIMapa(event:Event):void {
			_mapa.setCenter( new LatLng(40.736072,-73.992062),14,MapType.HYBRID_MAP_TYPE);
		}
	}
}

A classe facilita muito o uso. Então ela tem propriedades específicas que faz fácil o uso.

Terceiro Passo

Usando o Componente criado

Simplesmente você fará assim

1
2
3
4
5
6
7
< ?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="ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw"
  		width="100%" height="100%"/>
</mx>

Feito, você verá um resultado bem mais simples. Fácil não é?

[ATUALIZADO]

Como sempre a pressa é inimiga da perfeição, Fiz algumas alterações na classe e coloquei agora mais controles de forma mais fácil.

Tá com preguiça de fazer tudo isso? Baixe aqui o projeto completo feito.

7 opiniões sobre “Criando sua primeira aplicação com o Google Maps AS3.0 API”

  1. Rapido e certeiro! Tão simples que eu implementei deitado na cama!

    Valeu Igor!

    Abraço do Ved

  2. O google é mesmo genial!

    Um otimo exemplo de site brasileiro que utiliza ao máximo essa API é o Imobilien. Muito bacana e inovador.

    Beijos

  3. Meu flex esta acusando o seguinte erro

    The prefix “google” for element “google:GoogleFlexMap” is not bound.

    Como resolvo isso?

Os comentários estão encerrados.