Google Maps no Flash
Olá comundidade.
Nesse artigo, irei mostrar para vocês, como usar a API do Google Maps no Flash. Os requisitos para esse tutorial são:
- Flash CS3 ou Flash CS4 usando ActionScript 3
- Conhecimentos em ActionScript 3
Baixando a API
Antes de ir para o Flash, precisamos primeiro baixar a API que será usada. Tudo o que precisam fazer é acessar o site da API do Google Maps para o Flash no site do Google Code.
http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/
Na página, vocês encontrarão a API através do seguinte link:
http://maps.googleapis.com/maps/flash/release/sdk.zip
No arquivo ZIP da API, contém duas pastar, uma chamada docs, que contém toda a documentação sobre a API, e uma pasta chamada lib, contendo dois arquivos SWC, um para os usuários do Flex (map_flex_1_9a.swc) e outro para os usuários do Flash (map_1_9a.swc).
Como vamos usar a API no Flash, precisamos copiar o arquivo map_1_9a.swc e jogar na pasta aonde estão os Componentes do Flash. O caminho para os usuários do Flash CS3 é:
- (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS3/linguagem/Configuration/Components
- (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components
- (Windows) C:/Arquivos de Programas/Adobe/Adobe Flash CS4/Common/Configuration/Components
- (Mac OS X) Macintosh HD/Applications/Adobe Flash CS4/Common/Configuration/Components
Antes de colar o arquivo, criem uma pasta com o nome de Google Maps no diretório Components, para manter seu painel de Componentes organizado.
A última coisa que precisaremos fazer antes de ir ao Flash, é gerar uma chave para usar a API. A chave é gerada para os usuários que possuem alguma conta no Google. Para gerar a chave, acessem a página:
http://code.google.com/intl/pt-BR/apis/maps/signup.html
Na página, vocês precisam Ler e concordar com os termos e condições do Google, e digitar o endereço do site no qual irá usar o Google Maps. Após ter digitado o seu site, uma chave será criada. Essa chave será usada no ActionScript.
Indo pro Flash
Chegou a hora de ir para o Flash. Criem um arquivo em ActionScript 3, abram o painel Components e joguem o Componente Google Maps Library para o palco. Se quiserem, podem remover o componente do palco pois não há necessidade de mante-lo já que criaremos o mapa através do ActionScript 3.
Para esse tutorial, criaremos um exemplo básico do Google Maps, exibindo os controles de Zoom e tipos de mapa e iniciando o mapa através de uma localização usando Latitude e Longitude. Copiem e colem as seguintes ações no frame no qual desejam que o mapa apareça.
/* Importa as Classes necessárias */
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.overlays.Marker;
/* Criamos uma instancia da Classe Map */
var map:Map = new Map();
/* Inserimos nossa chave */
map.key = "SUA CHAVE AQUI";
/* Definimos um tamanho para o Mapa */
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
/* Adiciona o controle de zoom */
map.addControl(new ZoomControl());
/* Adiciona o controle de tipo de mapa */
map.addControl(new MapTypeControl());
/* Adiciona o Mapa ao palco */
this.addChild(map);
/* Adicionamos um eventListener chamando o evento MAP_READY */
/* Esse evento será disparado quando o Mapa estiver pronto para ser exibido */
/* O evento chama a função mapOk */
map.addEventListener(MapEvent.MAP_READY, mapOk);
/* Função chamada pelo evento MAP_READY */
function mapOk(event:MapEvent):void {
/* Criamos uma instancia da Classe Marker */
/* Passamos o local no qual queremos que o mapa esteja marcado */
/* O local é passado usando Latitude e Longitude */
var marca:Marker = new Marker(new LatLng(-23.5635963, -46.6538854));
/* Adiciona a marca ao Mapa */
map.addOverlay(marca);
/* Centraliza o Mapa de acordo com a posição desejada */
map.setCenter(new LatLng(-23.5635963, -46.6538854), 16, MapType.NORMAL_MAP_TYPE);
}
Vídeo tutorial
Não se esqueçam de inserir a chave que foi criada na linha número 12 do ActionScript, a chave precisa estar entre aspas para que não aconteça nenhum erro.
Pra quem quiser, pode ver o vídeo desse tutorial. É a primeira vez que faço um vídeo tutorial, e espero poder fazer sempre em todos os meus futuros tutoriais.
Considerações Finais
Com apenas algumas linhas do ActionScript, conseguimos criar usar o mapa de maneira fácil e sem complicação. Existem outros exemplos de como usar a API na própria página do Google Maps para o Flash.
http://code.google.com/intl/pt-BR/apis/maps/documentation/flash/examples/index.html
Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com
Um abraço a todos e até a próxima.
Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO
Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum
Escrito por Natan D. Alves
on junho 14, 2009. Arquivado em Flash.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Olá Natal. Eu venho sempre vendo os seus exemplos e de outros colegas no site da mxStudio …
e cara você traz sempre novidades e desafios muito bacanas.
To tentando fazer o google map aqui, até está dando certo….
porém quando eu coloko ele no ar…. ele da umas menssagens de erro
verificar a chave do API, a posição do swf, a versão e a disponibilidade da rede.
eu fiz igual ao que está no tutorial, e joguei no ar, porém eu queria saber se tem que colocar algo a mais na página html, para que ela possa rodar com o google map… até ja pesso desculpa pela a ignorância…. mais gostei muito do tutorial…e a última pergunta
pode usar o google map por exemplo numa página de localização de uma página da internet…por exemplo um site?
abração Natal
Já Consegui… foi falta de atenção mesmo Natal… valeu… e parabéns cara…
Agora eu to querendo fazer ele abri não como
map mais sim como satellite….
como eu faço Natal….
tem a função satellite tbm? é possível?
Para que o mapa inicie com imagens do Satelite, localiza essa linha:
MapType.NORMAL_MAP_TYPE
E troca por essa:
MapType.SATELLITE_MAP_TYPE
[]s
Natan,
Fiz o google maps no Flash! Ficou otimo, obrigado.
Porem na hora de publica, estou tendo problemas. Esta dando erro e a imagem nao abre.
O que esta dando errado?
legal vou testar..
Legal Natan , vlw pelo tutorial.
Me ajudou bastante e com certeza vai ajudar muita gente..
Parabenss..
Muito interessante esse código, fácil de usar e muito útil.
Olá, Natan…
Sou iniciante em Flash, e estou tentando add o google maps num site, fiz td oq vc mandou, deu certo (quase td…)
Quando tento abrir o arquivo, dá esse erro:
“(SecurityError: Error #2028: O arquivo SWF Local-with-filesystem file:///C:/*******************/Untitled-1.swf não pode acessar o URL http://maps.googleapis.com/mapsapi/publicapi?file=flashapi&url=file%3A%2F%2F*&key=ABQIAAAAAJHkx_S611ZMzMAt8s1uGxRFkjT1HMr2nmfp483iFNH2nQNu3xTWNpiO_RgN8JWG4Ev5JE5USQlzOQ&v=1.9a&flc=.
at flash.display::Loader/_load()
at flash.display::Loader/load()
at BootstrapConfiguration/loadAddingAcceptLanguageHeaderIfAir()
at com.google.maps::ClientBootstrap/loadUrl()
at com.google.maps::ClientBootstrap/internalLoadBootstrap()
at com.google.maps::ClientBootstrap/executeNextFrameCalls()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()”
Dps aparece a janela de segurança do flash player e fala se eu quiser permitir o acesso ao maps.googleapis.com, para clicar em configurações, clico, e vai para um erro 404 da adobe…
O que eh fiz de errado?
Desde já, agradeço…
Ps. Já consegui.
Fui em publish settings, na aba Flash, e mudei a opção Local playback security para: “access network only”.
Obrigado
Olá, olha, muiito bom o tutorial, tava procurando algo assim para por num site q estou fazendo para uma empresa, mas qndo eu testo (Ctrl+f) não aparece nada, só aparece um quadrado cinza, o q pode estar acontecendo??
desde já, obrigado.
: D
No meu pc funciona normalmente mas quando publico na internet nao aparece nada.
No meu site, tive o mesmo problema que o Rafael Magro citou, alguma dica??
Obrigado!
Olá, Natan, sou novato em Flash e muito estou aprendendo com seus tutoriais. Tenho uma questão: como defino a posição que o mapa ficará na página. Quanto ao tamanho já sei com definir.
Parabéns e obrigado.
Boa tarde! Criei o arquivo swf perfeitinho. Estou fazendo um site todo em flash as2.0. Para chamar o swf do mapa estou usando o loadMovie e o mapa não aparece mas também não da erro algum. O que estou fazendo de errado?
Salve Natan. Tudo certo contigo man? Eu vi a sua explicação sobre inserção do Google Maps no Flash. Infelizmente eu não uso o CS3. No caso você sabe como executar o processo no Flash MX?
Abraço man…
Olá Natan, aq deu tudo certo, só tenho uma ponderação a fazer.
Preciso que apareça no meu endereço.
O google disponibiliza algo que me de os dados de “Latitude e Longitude” do meu endereço ?
abraços!
Olá Natan, blz? Valeu pelo tutorial, abriu diversas possibilidades…
Gostaria de saber se é possível inserir a busca do endereço no site , como no google mesmo.
Agradeço
Olá Natan, muito bom o tutorial, fiz tudo exatamente como no tutorial, apenas mudei o tamanho do mapa, esta funcionando perfeitamente, porém, quando volto para a primeira pg do flash e volto novamenta para a pg do mapa, ele não aparece, não carrega o mapa novamente! como poderia solucionar este problema?
Obrigado
És o maior, brigadão fiz isso e deu eu neste momento ando a fazer um site para a S. João da Madeira sobre património histórico, este mapa irá dar um geitão para situar os edificios na cidade.
Isto é para a finalização do curso que estou a tirar de Técnico de Multimédia (um projecto final).
Continua a postar, tutoriais se possivel com video para ser mais fácil perceber) qualquer coisa diz, eu percebo pouco mas ajudo se for necessário.
Olá Nata, muito bom o tutorial.
Como faço para colocar mais de 1 mapa no mesmo arquivo do flash?
Natan, blz?
Cara fiz direitinho… offline está funcionando 100%mas quando mando pro ar.. aparece essa msg:
Initialization failed: please check the API key,
swf location, version and network availability.
Bom oq eu estou subindo para o meu server é a página html e o arquivo .swf Ach q eu nõ preciso subir mais nada né.. correto?
Abs!
Boa tarde Nata, obrigado pelo tuto muito legal e parabéns, mas fiquei com uma dúvida como fazer isso incluindo várias marcações, e se eu posso colocar o nome da cidade e do estado ? como faço !?
Grato pela atenção
Elias
Fala Natan,;
Cara eu estou com um problema, o meu mapa funciona corretamente eu clicando na visualizaçao crtl+enter, mas quando exportado o swf nao aparece, o que pode ser?
Natan, Resolvi o problema, eram duas coisas banais:
1- eu estava tentandoa abrir o swf do flash 8 nao do 10
2 eu esqueci de configurar o settings de exibiçao,
grande abço
Gostei muito do tutorial. Parabéns.
Só gostaria de saber como consigo fazer com que um determinado local seja exibido as informações como Nome, endereço, telefone e etc. como informações adicionais.
Ola, Natan!
fiz tudo certinho como vc disse, e o mapa ficou ok!
só que estou enfrentando um outro problema.
o site que creio é em flash normail,
e o mapa que fiz orientado por vc, é em ActionScript 3
como faço para esse mapa aparecer dentro do arquivo flash Swf?
grato
Biluz
Amigos,, onde eu instalo componentes no Flash CS5 / Windows 7..
Não ta rolando,, muito bom esse tutorial em Natan, parabens
Natan ,,, desculpe consegui instalar na minha maquina no windows XP, so mais uma pergunta, ele ta acusanado a falta de um sensor = true or false…. tentei declarar, mas da erro
dae Natan.. parabens pelo tutorial.. estou com um probleminha queria saber se voce pode ajudar.. eu fiz o site pela timeline usando gotoAndStop()… e o mapa eu estou colocando la pelo meio no frame 100.. ele funciona direitinho até clicar no frame que está o mapa..porem, quando eu clico em outro botao para ir para outro frame o mapa continua la e fica atravessado no meio da pagina.. tentei usar o map.visible = false; e this.removeChild(map); nos frames em que nao é para o mapa aparecer.. isso funciona, mas quando eu volto para o frame do mapa ele nao está mais la.. entende o q eu quero dizer?
Jose, estava com o mesmo problema e vendo a documentaçao do API, encontrei a soluçao:
So acrescentar esse valor antes de declarar a chave, comigo funcionou aqui. O valor pode ser true ou false.
map.sensor = “true”;
Nós também definir explicitamente o map é sensor de propriedade, quer “true” ou “false” , que indica se estamos a detectar a localização do usuário (através de um sensor GPS, por exemplo). (Veja Especificando o parâmetro de sensor para mais informações).
NO caso eu penso que seja falso, ja que nao to usando gps hehehehe, mas acho que o Natan poderia explicar melhor para nós leigos no assunto. fico grato.
Parabéns pelo tutorial.
Estou com um problema e agradecia muito que me ajudasse. Segui todos os passos e tudo funcionou bem até que mudei de frame. Quando volto novamente ao frame onde tenho a mapa ele não aparece e no flash dá-me indicação de que não é possivel carregar o mapa.
Eu sou absolutamente leigo nesta matéria, apenas copiei os códigos e não sei como resolver este problema, vi que alguém aqui teve o mesmo problema mas não consegui ler a solução.
Agradeço-lhe antecipadamente toda a ajuda que me puder dar.
Olá!
Gostaria de saber como se coloca o Google Maps no Flash CS5.
Fico muito grato.
Ricardo
to terminando um site e o cliente pediu pra acrescentar o mapa estilo esse do seu exemplo consegui fazer tudo certo so que qdo vou inserir ele no meu site ele esta action 3 e o site esta em action2 tem como fazer esss mudanças
estou com o mesmo problema fiz tudo certo dentro flash ele funcio só que qdo eu chamo o swf ele nao funciona
da esse erro
Error #2028
Olá Natan,
Estou com um problema que não vejo reportado aqui. Tenho o CS5 e já segui o seu site, fiz tudo direito e quando vou compilar dá o seguinte erro no separador de Output:
“Error opening URL ‘http://maps.googleapis.com/mapsapi/publicapi?file=flashapi&url=file%3A%2F%2F*&key=ABQIAAAA5cgVkJdWU2evvAGBac–hRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSXbtvsRaEDcQJOLaGV-4Wsxsx6sQ&v=1.7'”
Na tela apresenta o seguinte:
“Initialization failed: please check the API key,
swf location, version and network availability.”
Já fui em publish settings, na aba Flash, e mudei a opção Local playback security para: “access network only”, mas mesmo assim não funciona.
Alguma ideia?
Obrigado
Sou novato em Flash e fiz o exemplo igualzinho está mostrando aqui, mas está me aparecendo o seguinte erro:
the map sensor parameters is missing. please set sensor “false” or “true” or some services may not work.
como arrumo isto, o que devo fazer e mais uma pergunta é possivel na Marca fazer com que qdo coloco o mouse sobre ela apareça aquele balão com as informações do local como nome, endereço, telefone, etc…., desde já agradeço a atenção,Obrigado e ótima matéria.
Olá, tem como eu inserir esta pagina do Google Maps numa pagina criada em AC 2.0? talvez criando ele inteiro separado em AC 3.0 e inserindo no flash com “dummy_mc.loadMovie(“maps.swf”);” funcionaria?
pra quem estiver com dificuldades de posicionar o mapa no palco, uma solução simples é colocar o código dentro de um MC, o mapa será exibido onde ele estiver no palco