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
Artigos Relacionados
ShareThis
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