Google Maps API: Um exemplo prático e comentado

Esta semana montei um serviço bem simples para poder testar o uso da API do Google Maps. O serviço foi oferecido aos congressistas do evento PHP Conference Brasil 2006 e era bem simples: cada um entrava e deixava marcado seu ponto de origem, com isso obteríamos um mapa demonstrando de onde os participantes vieram e quantos kilometros viajaram.

Ainda restam aplicar algumas funções à este serviço, mas ele serviu como meu teste inicial. Resolvi então abrir o código fonte e o fluxo de dados do serviço para que vocês possam conhecer e quem sabe começar utilizar a Google Maps API também.

Utilizando o Google Maps API para localizar congressistas

Atenção: Para usar a API você deve registrar sua própria API Key: veja aqui

Fluxo dos dados

A primeira parte deste sistema, conforme o diagrama anterior, se trata do arquivo .htm onde colocamos o código do Google Maps API, que é todo escrito em javascript.

Este arquivo se resume as seguintes funções:

1. Inicializar o Mapa
Neste ponto devemos inicializar o código do mapa, setando os controles que desejamos ter além de setar a posição (center) inicial do mapa e seu zoom.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY" type="text/javascript"></script>
    <script type="text/javascript">

    //< ![CDATA[
    var zeroLat = new GLatLng(-23.588334358688655,-46.61230802536011); //Ponto central (local do evento)
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl()); //Controles de Zoom, movimento
		map.addControl(new GMapTypeControl()); // Controle de tipo de mapa
		map.addControl(new GOverviewMapControl()); //Mapinha pequeno no canto
        map.setCenter(zeroLat, 5); //Setar centro do mapa, com nivel 5 de zoom

    //... MORE CODE ...
   </script>

2. Ler dados do XML
Agora devemos criar uma função que fará a leitura de nosso arquivo XML e criará uma instância de cada item como um marker no Mapa. Note que para o evento, que é nosso ponto central, setamos um ponto (latitude,longitude) central e utilizamos um ícone especial para o mesmo.

//Handle XML
GDownloadUrl("phpconfbrasil2006.xml", function(data, responseCode) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker"); //Ler lista de pontos

  document.getElementById('count').innerHTML = "<b>Congressistas registrados: "+markers.length+"</b>"; //Publicar contagem

  for (var i = 0; i < markers.length; i++) {
	var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
							parseFloat(markers[i].getAttribute("lng")));

        if (markers[i].getAttribute("tit") == "PHP Conference Brasil 2006"){ //Exceção para ponto central
		var myIcon = new GIcon(G_DEFAULT_ICON,'ev-icon.png');
		myIcon.iconSize = new GSize(55, 54);
		myIcon.iconAnchor = new GPoint(16, 52);
	}else{
		var myIcon = G_DEFAULT_ICON;
	}

	var dados = { title: markers[i].getAttribute("tit"), icon: myIcon}; //Dados
	map.addOverlay(new GMarker(point,dados)); //Criar marker

	//Adicionar Linha que liga ponto ao evento
	var polyline = new GPolyline([
		zeroLat,
		point
	], "#ff0000", 1);
	map.addOverlay(polyline);

	//Adicionar na Lista (HTML)
	var ul = document.getElementById('ullista');
	var li = document.createElement('li');
	li.innerHTML = "<b>"+markers[i].getAttribute("tit")+" - \t\tDistância: "+ Math.round(point.distanceFrom(zeroLat)/1000)+ "km";
	ul.appendChild(li);
  }
});

Estrutura do XML

< ?xml version="1.0"?>
<markers>
	<marker lat="-23.588334358688655" lng="-46.61230802536011" tit="PHP Conference Brasil 2006"/>
	<marker lat="-15.83783866346968" lng="-47.816104888916016" tit="Rafael Dohms - Brasilia,DF"/>
</markers>

3. Setar handler do Click
Agora devemos dizer ao mapa que ao clicar sobre ele deve ser fornecida uma caixa de dialogo cujos dados serão usados para criar o marker. Após criar este marker o sistema deve instanciar uma conexão AJAX para um backend PHP. Caso o usuário clique sobre um marker o script deve fazer o calculo ate o ponto central e apresentar uma janela de informação com este dado.

GEvent.addListener(map, "click", function(marker, point) {
  if (marker) { //Se estiver clicando sobre marker
	var tpoint = marker.getPoint(); //pegar ponto lat por long
	var distance = tpoint.distanceFrom(zeroLat)/1000;

	var cnt = "<div id='popup'>";
	cnt    += "<br />Distância: "+Math.round(distance)+" km"; //Calcular distancia
	cnt    += "</div>";
	marker.openInfoWindowHtml(cnt);
  } else { //Se estiver clicando em ponto em branco
	var nome = window.prompt("Digite: NOME - Cidade,Estado"); //Pegar texto para nome do marker
	if (!nome){
		return false
	}
	var dados = { title: nome }
	map.addOverlay(new GMarker(point,dados));

	//Adicionar no XML via AJAX
	var req = GXmlHttp.create();
	req.open("POST", "addmarker.php", true);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        //Montar parâmetros
	var param = 'tit=' + nome;
	param 	 += '&lat=' + point.lat();
	param 	 += '&lng=' + point.lng();
	req.send(param);
  }
});

A segunda parte do sistema se trata de um arquivo PHP responsável por receber os dados do ponto criado e criar um registro no XML deste ponto. Cada ponto possui uma latitude, uma longitude e um título. Como este xml só será usado na próxima atualização o script não necessita de retornar dados ao script original.

< ?
//Recebe os dados e Cria um novo string no XML

//Definir Arquivo XML
define('FILE',"phpconfbrasil2006.xml");

//Abrir XML
$xmlDoc = new DOMDocument('1.0','utf-8');
$xmlDoc->load(FILE);
$xmlDoc->formatOutput = true;

//Criar novo item
$nLocation = $xmlDoc->createElement('marker');
$nLocation->setAttribute('lat',$_POST['lat']);
$nLocation->setAttribute('lng',$_POST['lng']);
$nLocation->setAttribute('tit',$_POST['tit']);

//Adicionar ao nó markers
$nLocation = $xmlDoc->firstChild->appendChild($nLocation);

//Salvar arquivo
$xmlDoc->save(FILE);

?>

Assim temos um script completo. Neste caso pedimos para que além de mostrar o mapa com os marker o script deve também imprimir uma LIST com o texto de todos registros e uma contagem de quantos estes são.

O exemplo é bem simples, mas acho que passa uma idéia inicial do que pode ser feito e como pode ser feito utilizando o Google Maps API. Toda documentação pode ser encontrada nos link abaixo:

Google Maps API
Google Maps API – Documentation

102 comentários sobre “Google Maps API: Um exemplo prático e comentado

  1. parabéns cara… muito interessante… assim como o leandro falow, mais tarde “tentarei” entender e estudar a estrutura…

    estou meio no início…

    Aquele abraço…

  2. Rafael,
    eutou tentando fazer um ex mas da uma msg de que a key é de um site deferente mas eu ja criei vaias key e da a mesma msg, sabe pq esse pro? me dá uma luz.

    obrigado pela atençao!!

  3. Oi Rafael

    Por gentileza, coloca o link para download dos arquivos, pois não estou conseguido colocar para rodar 100%.

    Parabéns.

  4. Rafael Montei um servidor aqui para fazer algo para fazer um teste mas não consigo não deu certo pois diz que a key ja estar sendo usada por outro site ja gerei varias vezes mesmo assim da o mesmo erro. Será que vc podi mim ajudar

    Agradeço a Atenção…

  5. Muito bom exemplo.

    Gostaria de saber se baseado nesse exemplo posso fazer um que fique mostrando sempre o conteudo do XML (pode ser de tempos em tempos (n segundos)) , se eu alterar o XML (adicionando um Marker novo ou alterando um icone de um Marker existente) o mapa recebe essa atualização e de um refresh com os dados novos. Tem como fazer isso ???

  6. Gostaria de saber se com o exemplo que vc passou eu posso por exemplo montar um site com uma espécie de localização. Ex um sistema de transportadora para saber onde se encontra determinado caminhão da frota? Se é possível do que eu precisaria? De um GPS para saber as coordenadas de latitude e longitude?
    Preciso saber disso pois, gostaria de implementar esse recurso no meu trabalho de conclusão de curso, me ajude…

  7. Fabiano,

    Acabo de listar como meu objetivo para 2007 fazer um projeto de pesquisa sobre este assunto, rastreamento usando Google Maps.

    Acredito que seja possivel sim, mas a medida que eu for andando com a pesquisa eu vou postar aqui no blog.

  8. Gostei muito mas devido a minha pouca experiencia não consegui que gravasse, seria muito interessante, gostaria que conferisse no site, e me ajudasse a resolver, teria um enorme prazer em retribuir

  9. Mapa comercial via Google Maps

    Depois de escolhido o tipo de comércio, o site pesquisa o banco de dados(que contém os estabelecimentos comerciais cadastrados), procurando pelo tipo de comércio selecionado pelo usuário. O site então retorna com os estabelecimentos que atendem à pesquisa solicitada, marcando a posição geográfica de cada um, via Google Maps.

    Exemplos:

    Pizzaria: http://201.22.184.125/~edumanzi/mapa.php?comercio=58
    Drogaria: http://201.22.184.125/~edumanzi/mapa.php?comercio=30
    Comida chinesa: http://201.22.184.125/~edumanzi/mapa.php?comercio=44
    Sebo de livros: http://201.22.184.125/~edumanzi/mapa.php?comercio=29
    Locadora de filmes: http://201.22.184.125/~edumanzi/mapa.php?comercio=6
    lotética: http://201.22.184.125/~edumanzi/mapa.php?comercio=27
    Revista Veja “o melhor da cidade”: http://201.22.184.125/~edumanzi/mapa.php?comercio=82

    Sistema instalado: Mac OS X (da Apple, com o Apache instalado), Banco de dados MySQL, PHP para pesquisa e inserção de dados.

  10. Excelente exemplo! Ao tentar reutilizar o seu código deparei com erros quando tento aceder com o IE, e verifiquei que no seu site isso também ocorre – só aparece o marker da conferencia e do primeiro conferencista, e sem a linha de ligação… Sabe de alguma solução para este problema? Obrigado! Fernando

  11. Esta API é show de bola.. Estamos pensando em bolar um negócio legal utilizando celular pra acesso a um portal de localização. Mas faltam detalhes devido ao tamanho da imagem a ser baixada no celular.

  12. Respondendo a mim proprio 🙂
    O IE não se entende com as polylines, removendo-as funciona bem no IE e no Firefox!

  13. Viva!

    Estive a ler o seu exemplo prático e comentado sobre Google Maps API, mas ainda não consegui ler/escrever no XML e PHP… 🙁

    Já consigo marcar no mapa, mas quando faço refresh as marcas saem :s

    Será que você me pode enviar os seus ficheiros?

    Obrigado! Seu site está muito bom! =P

    Aqui fica o meu email: poweragopedro@hotmail.com

  14. oi..Rafael, tenho duas questões para vc, caso possa me responder.
    1 – o marker adicionado, quando dou um refresh ele não fica no mapa, estou fazendo algo de errado ou o seu sistema nao esta programado para tal?

    2 – vc saberia me dizer como eu poderia ajustar essas programação utilizando a API para rodar em mobile? Smatphone e/ou pocket?

    abraço

    obrigado

  15. Ola estou com um problema…estou precisando carregar o mapa dentro de uma div na qual é criada pelo javascript e carrega a pagina com o mapa atraves do ajax…porem nao funciona….nao da para carregar a pagina do mapa com ajax?

  16. Olá. Quero parabenizar o autor pelo artigo. Quero me oferecer para colaborar com aqueles interessados em obter informações sobre o uso do Google Maps
    para logística, uma vez que atuo como desenvolvedor em uma empresa de rastreamento de veículos e tenho domínio sob uma boa parte da estrutura.

    [ ]´s

  17. Rafael… gostei muito desse seu exemplo com o google map.

    vc tem alguma coisa parecida com ASP, estou precisando e nao to conseguindo fazer…..
    manda no meu email

    Att: Alexandre Lopes
    Agradecimentos

  18. Gustavo,
    1. Neste exemplo deveria permanecer, pois esta sendo gravado em XML
    2. Verifique no site do GMaps API que deve haver maiores detalhes

    Thiago Henrique,
    Acredito que não, mas não tive tempo de verificar.

    Daniel,
    Obrigado pela ajuda

    Alexandre,
    Para ASP somente é necessário alterar o trecho em PHP que nada mais faz do que receber dados e gravar os mesmo no XML, é só implementar o mesmo com o ASP, mas eu não tenho experiência nem host ASP para testar.

  19. Olá, gostaria de saber se esse serviço é de graça… se posso colocar isso em um site de um cliente por exemplo.

  20. Mas li que não pode ser usado para fins comerciais, ou seja, se eu colocar em um site de um cliente meu pode dar rolo?

    vlw

  21. Olá…. não funcionou aqui 🙁

    Eduardo passa o codigo do MAPA.PHP… gostei muito do site!!!

    ; )

  22. Rafael, estive procurando no google, sobre APIs e cheguei no seu site.
    Adorei, muito bom, está me ajudando muito no meu blog.
    Os comentários dos usuários ajudam muito, tirei minhas duvidas neles.
    Obrigado
    E que o conteudo continue excelente.

  23. Rafael …

    mais uma vez vlw pelas dicas …

    consegui fazer funcionar e agora vou tentar incrementar mais …

    esse blog é 10

    []s
    Leo

  24. Bem elucidativo o post.
    Tenho um projeto em mente que deve utilizar a API do googleMaps para renderizar alguns dados em um mapa. Assim como o seu exemplo, acredito que serão muitos markers então devo trabalhar com filtros.

    Só tenho dúvidas quanto quanto à performance do sistema pois, tratando-se de processamento client-side, há uma boa possibilidade de o perfil de hardware dos usuários não atender exatamente o grau de processamento.

    Minha máquina é dual core, 2GbRam e seu exemplo sofreu um bocado para ser renderizado.. =/

    É isso ae!
    []`s

  25. Respondendo a dois problemas encontrados neste sistema e verificados em meu estudo:

    1. Os pontos não foram gerados no fireFox, possivelmente pelo script que gera os markers estarem utilizando uma variável utilizada em outra função.
    Eu estava utilizando a função $() para recuperar atributos de elementos através do DOM, esse era meu problema.
    ERRO///////////////////////////////////////////////////////////////
    var map = new GMap2($(“map”));
    CORRETO////////////////////////////////////////////////////////
    var map = new GMap2(document.getElementById(“map”));

    2. Para otimizar a renderização do mapa e seus markers e evitar memory leak,
    é possível renderizar apenas os markers localizados dentro dos limites atuais de exibição do mapa.
    É possível tratar este problema utilizando a função: map.getBounds();

    É isso. Em breve meu projeto estará online e postarei algumas notas a respeito no meu blog.

    []’s

  26. Ferrao,

    Sobre o ponto 1, não sei se faz muito sentido, pois o $() é uma função implementada e sugerida pelo google, mesma forma usada por prototype e outras bibliotecas, e na verdade ele é uma mascara pra o getElementById. Mas se funcionaou ótimo.

    O ponto 2, bem realmente, era apenas um teste, feito puramente em xml se base de dados, acontece que teve tanta visita e tantas adições que eu nao tive tempo de entrar e esvaziar de vez enquando o arquivo.

    Vou ficar de olho para ver o que esta projetando.

    Abraço.

  27. Caro Rafael Dohms

    Excelente sua contribuição para os iniciantes da API Google Maps darem os primeiros passos e visualizarem sua aplicabilidade.
    Há uns três meses atrás me deparei com seu trabalho, digo sem o intuito de florear, muito bem documentado e esclarecedor.
    Pois então, deixo agora também minha contribuição, com a implementação de um rastreador veicular que utilizou a mesma gama de ferramentas (API Google Maps, JavaScript, PHP, XML, Ajax e pouquinho de MySQL).
    Divirtam-se:
    http://www.gpstesouro.com/php/wally.htm
    Muito obrigado pelo pontapé inicial …

    Mario Câmara

  28. Ferrãããoooo…

    será que tem alguma jeito de usar esse: map.getBounds()

    de forma que ele carregue novos markers a medida que a pessoa navegar pelo mapa ?

  29. Felipe, crie um evento no mapa, tipo “moveend”; toda vez que o movimento do mapa termina (movimento de pan, zoom, etc), este evento será disparado. Então leia as coordendas da borda ( getBounds() ) e verifique se cada marker está entre estas coordenadas.

  30. Fiz uma nova atualização do “Mapa Comercial”, usando novos recursos do Google Maps e utilizando uma função que achei na internet que funcionou bem (para um “tooltip” personalizado).

    Pode-se escolher o estado (ou cidade, etc) diretamente no mapa, ou através dos menus pop-up iguais ao do site antigo. Veja em:

    http://201.22.184.125/~edumanzi/mapa.php

    Pode-se visualizar – agrupados por estado ou cidade –
    todos os pontos cadastrados que tenham o mesmo “tipo
    de comércio”. Por exemplo:

    Concessionárias FIAT (274 pontos cadastrados):
    http://201.22.184.125/~edumanzi/mapa.php?comercio=123

    McDonalds (338 pontos cadastrados):
    http://201.22.184.125/~edumanzi/mapa.php?comercio=102

    Comida italiana (157 pontos cadastrados):
    http://201.22.184.125/~edumanzi/mapa.php?comercio=80

    Posto de combustível (1260 pontos cadastrados):
    http://201.22.184.125/~edumanzi/mapa.php?comercio=121

  31. Olá…
    Consegui muita coisa com seu tutorial , realmente vc esta de parabens, mas tenho uam duvida, eu presiva variar meu zoom, posi se tenho duas coordenada na mesma cidade tudo bem, elas estao viiveis, masi se tiver uam em cidades diferentes, como faça pra que esse zoom se adpte as duas coordenadas, fiz uam media entre elas, assim o sistema mostra o centro de todas, mas teria como eu variar esse zoom ?
    Abraços

  32. Alex,

    Vou ficar te devendo esta dúvida por enquanto. Vou precisar dar uma olhada na API para buscar esta informação, pois não sei ela ainda, e meu tempo esta um pouco curto atualmente.

    abraço

  33. Rafael…
    bom dia
    Valeu por ter respondido, vou pesquisar mais e qualquer cisa eu posto aqui. OK !
    Me tura outra duvida, estou tendo problemas pra exibir os mapas no internet explorer, vc ja esbarrou com isso da o seguinte erro:

    Linha: 60
    Caracter: 39
    Erro: Identificador, sequencia ou numero esperado.
    codigo: 0
    url : http:…..meusite

    abraços

  34. Boa tarde.

    Gostaria de ajuda.

    Criei um arquivo kml para inserir no mapa que criei no google maps. Mas não estou conseguindo fazer com que esse arquivo apareça no mapa, o meu kml, foi feito localmente. Não sei qual é a função em javascript que chama esse arquivo e mostra.

    No aguardo,

  35. Alex,

    Estes alertas do IE são o mesmo que nada, procure executar esta pagina no firefox, usando a extensão firebug e ai pdoerá identificar pontualmente o erro, no IE é tentativa e erro.

    abraço!

  36. Sandra,

    Infelizmente não tenho a resposta neste momento, a API tem progredido e eu não acompanhei ainda, mas assim que puder vou me atualizar e lhe mando uma resposta.

    abraço

  37. Rodrigo, resolvido o problema, valeupela dica do firebug, ele tb nao achou o erro mas tinha um pequeno detalhe lá, analisei o codigo fonte gerado na pagina e descobri.
    Abraços

    Aindo to agarrado com o zoom

  38. Rafael, ainda não estou consegindo colocar o kml para mostrar no mapa. Consigo visualizar o mapa, estou com o arquivo kml pronto em xml, só não sei como representar na página, de acordo com o exemplo que vc fez em php, primeiro fez a função em php que cria o mapa e depois o xml, mas como coloco no meu site?

  39. Rafael, ja consegui fazer isso que te perguntei ai acima, agora so preciso mudar o desenho o gif do marker…

  40. Rafael, boa tarde,me tira uamduvida aqui, tenho feito aqui e funcionando certinho o mapa mostrando o marker vermelho, porem como faço pra trocar essa cor e fazer tb o seguinte, eu busco esse marker em um banco de dados de coordenadas, quero colcoar um outro marker de uam cor difrente buscando em outro banco de dados, ou seja dois markers diferentes, … deu pra entender ?

    abraços

    Alex Reis

  41. Olá Rafael…
    interessantíssimo o seu post sobre as Api´s do Google.
    Eu não tenho muito conhecimento de XML, você poderia me mandar os scripts por e-mail??
    Grata!
    Elaine

  42. Cara, te amo! 😀

    Não sabe como tô feliz! hahahaha
    \o/

    Tirando minha empolgação de lado, tô fazendo um sisteminha, você me recomenda usar banco de dados ou XML? 🙂

  43. Gabriel,

    Depende do tamanho do seu sistema e informações a mais que irá guardar, se for algo bem simples como o meu exemplo, XML, qualquer coisa um pouco maior e com mais de um usuário simultâneo, banco de dados.

    Abraço!

  44. Oi Rafael,

    Como todos já disseram seu post é só elogios!

    Eu não entendo muito de PHP vou ser sincera, rs, mas no seu exemplo você fez tudo o que eu preciso fazer para concluir meu tcc da faculdade, queria saber se é possível usar as funções de distancia e de traçar uma linha que vc utilizou apenas com o html passando as coordenadas? Será que você pode me passar seus scripts?

    Muito Grata desde já!

    E Parabens pelo ótimo artigo!

  45. Bruna,

    Excelente, adoraria inclusive depois ver a monografia, adoro aparecer em bibliografias. É possível usar apenas o HTML sim, você pode criar todos os pontos direto no javascript, ou usar o xml mesmo como eu fiz, o PHP que usei é apenas para gravar novos pontos, o que pode ser desabilitado facilmente.

    Os arquivos q vc precisa é so esse do “serviço” que publiquei, basta salvar, todo javascript esta nele, basta apenas buscar o resto do google e fazer sua API Key.

    Qualquer coisa, grita que dou uma força! e aguardo uma cópia da mono em!?

    Abraço

  46. Parabens Rafael,
    Muito bem elaborado seu post, ele é o pontapé inicial para muitos…
    Mas seguinte , gostaria de saber se posso contratar seus serviços para customização de 4 diferentes paginas php. para serem adicionadas a um projeto que estou desenvolvendo.

    Os itens para estas paginas seria estes.
    Criação de pontos de refentencias no mapa
    Ciação de cercas eletronicas no mapa
    Criação de rotas no mapa, inserindo ponto de origem e destino
    Criação de cercas com base em uma rota.

    Segue abaixo os exemplos de paginas que implementam os itens acima

    http://esa.ilmari.googlepages.com/circle.htm
    http://maps.forum.nu/gm_anti-meridian.html
    http://maps.forum.nu/gm_driving_directions2.html
    http://maps.forum.nu/gm_texas.html

    Todas as paginas exceto a de geração da rota devem ter informações de latitude e longitude dos pontos dos poligonos armazenados no banco de dados para integração da aplicação externa.

    Abraço!

  47. Rafael, bom dia…
    suas dicas me ajudaram muito, porem estou com uma certa dificuldade, vou te explicar, talves vc ou alguem aqui posso me ajudar.
    Tenho o mapa com os marker’s, porem de certo em certo tempo esse marker vai mudar de posição pois irá receber uma nova coordenada, como faço pra que apenas o marker atualize e nao o mapa, conseguiu entender o que quero ?

    espero que consigam me ajudar.

    Grande abraço

    Alex Reis

  48. Esse tópico foi realmente muito util…. mas, ainda assim estou precisando de algo um pouco diferente e talvez vc possa me ajudar.. é algo simples!

    Eu preciso colocar ORIGEM e DESTINO e necessito que retorne o nome de todas as cidades entre esses dois pontos… entende?

    Agradeço a ajuda…
    Abraços

    Etiene

  49. Muito bom Rafael,
    Estou precisando de algum exemplo de como definir rotas usando google maps
    Ex.: Digito lugar de origem e destino, e através dele encontro por quais ruas devo passar, etc..
    Abraços

  50. Olá, estou precisando de uma ajuda, será que alguém pode me ajudar.

    A um tempinho atrás eu montei um mapa para o meu serviço de mapa de ameaças múltiplas pelo sistema do google mapa, onde identificam as áreas de riscos de cada município, sendo que de uns 3 meses pra cá o google mudou a sua versão e os ícones e as imagens do mapa que eu fiz sumiram tudo, bom eu fiz o mapa em código html e em java para aparecer as imagens e me parece que o google trocou a versão para xml. peço que se alguém puder me ajudar a configurar este mapa pois eu não sou experiente nesse campo de mapas , fiz por uma sorte e deu certo, sendo que agora só aparece o mapa puro e as imagens sumiram todas. se alguém puder me responder meu e-mail é marcelovieira@cbmerj.rj.gov.br ou MSN mpstudio1@hotmail.com agradeço !!!

    Marcelo Medeiros

  51. Rafael, boa noite. Boa noite a todos. Sei que estou um pouco atrasado, pois a matéria não é recente. Acontece que somente agora a encontrei, pois estou com uma dúvida no que diz respeito a interação entre arquivos kml (ou xml) numa aplicação que estou desenvolvendo com mapas (API – Google Maps). Necessito fazer uma página na qual o internauta digite sua localização (endereço), e tenha como retorno no mapa determinados estabelecimentos mais próximos a sua residência, já previamente demarcados e etc… As demarcações já foram feitas e salvas como mapas personalizados no próprio Google Maps. Porém, não sei se essa é forma correta de se fazer (se existe a possibilidade da pesquisa retornar mapas personalizados em meu site).
    Será que essa é a lógica correta: criar um arquivo (kml, xml ?) com a lista dos locais que deverão aparecer demarcados no mapa, e interagir esse arquivo com os resultados da pesquisa? Será que poderia me dar uma luz a esse respeito?

    Agradeço imensamente!

    Aguardo retorno.

  52. Parabens pelas suas dicas.
    Me de uma ajuda…
    É possível carregar direto do banco de dados no lugar dos XML?
    Assim posso ter um refresh das informações e pontos no mapa?

    João Ribeiro

  53. Estou desenvolvendo um trabalho pra universidade e gostaria de saber como seria um codigo para gerar rotas.

    Alguem pode ajudar?

    Atenciosamente
    Valmor

  54. Olá Rafael!

    Estou como iniciante na API do Google Maps, mas quero trocar idéias com você quando tiver aprendido mais. minha dúvida é a seguinte: criei um mapa no Google Maps e coloquei o link no meu blog com todos os markers sem problemas. o que quero fazer é aproveitar or markers já feitos nestes mapas e utilizar a sua orientação acima, isto é, gerar o arquivo XML ou base de dados a partir destes mapas já criados. Tem como?

    Um abraço,
    Márcio

  55. Eu desenvolvi um sistema em delphi que traça as rotas usando a api do google maps porem gostaria de colocar as informações nos marcadores como implemento isso tem algum codigo que acese os marcadores de texto . para mudar as mensagens

  56. Olá Rafael,

    Parabéns pelo excelente sistema, estou tentando acessar os sites hospedados no domínio:
    http://201.22.184.125

    Porém todos estão offline, poderia upar os exemplos em algum outro site para que pudéssemos ver funcionando, pois, me parece ser muito interessante! 😀

    Um grande abraço
    Janio

  57. Olá Rafael!

    Gostaria de tirar uma dúvida em relação a API do Google Maps.

    Eu tenho um formulário onde o usuário cadastra uma localização, este cadastro vai para um banco de dados e daí é exportado para um XML.

    Tenho um outro mapa que pega latitude e longitude de todos os cadastros nesse XML e transforma esses dados em marcadores.

    Então aí vai minha dúvida: É possível fazer com que o mapa fique indo de ponto em ponto automaticamente?? Tipo uma animação!! Já pesquisei sobre a função panTo() , mas pelo que entendi só é possível animar o mapa com essa função se vc digitar a latitude e a longitude no código. Essa função não pega as informações de um XML.

    Se puder me ajudar eu agradeço!!

    Valew!! Abraços!!

  58. So para ajudar os amigos, no caso de nao estar fazendo a gravação dos novos pontos no arquivo XML.

    Mude o chmod para 777 para efetuar a gravação, fiz aqui e funcionou na hora.

    Caro Eduardo, vc fez o levantamento dos dados que mostra no seu site, ou é uma função de filtrar as informações. Percebi que usa o PHP para selecionas as informações, mais para chegar nelas, foi na “unha” ou filtrou?

    Obrigado Rafael pela oportunidade.

    Ferdinando

  59. Boa Tarde Rafael,

    Realmente muito interessante o seu post sobre as Api´s do Google.
    Eu não tenho muito conhecimento de XML e PHP, estou aprendendo ainda. Você poderia me mandar os scripts por e-mail?

    Agradeço,
    Robert Christian

  60. Rafael,

    Não encontrei o código em php para a adicionar os marcadores que você chamou de addmarker.php, seria possivel diponibiliza-lo?

    Obrigado

  61. puts… quase 3 anos de post e ele ainda serve como referencia…

    Devo-lhe parabenizar pela porpagação do conhecimento.
    Estou começando no php e fiz conforme o figurino… porém ao executar o .htm observo ele captando dados do google mas não aparece nada.
    será que poderia me enviar os arquivos? já rodei o código umas 6 vezes ;D

    Agradecido e continue com o site… mt ajudou muito com outros posts.

  62. Galera é o seguinte..
    Tenho cadastrado em um banco de dados alguns registros que tenham Lag e Lng e partir dai vou fazer um select trazendo estes dados do bd, com isso vou criar os marcadores.
    MASSSS…soh vou poder trazer no select o range de registros que irão aparecer no mapa, ou seja,
    vamos supôr que eu esteje visualizando zoom 10 e meu marcador esteje na lat lng 0 (ponto 0) a partir daí calcular o mínimo/máximo de Latitude e Longitude para filtrar o select..como consigo as informações de min e max a partir do ponto do marcador central para saber quais registros trazer no select??
    Agradeço
    Felipe

  63. Na boa cara, vc ta precisando de mais didatica nem seus posts. Voce como professor e uma merda..

  64. Rafael, excelente post parabéns…Estou criando uma aplicacao para projeto da faculdade, utilizando recursos do google maps.. Esta em localHost onde gero um xml com marcadores contendo as posicoes…No caso que vc descreve onde no disco rigido esta o Arquivo.XML ?? Estou utilizando JSP, VRAPTOR e HIBERNATE.. Da pra fazer como localHost , Lendo um xml com a GDownloadUrl ???
    Obrigado mesmo…

  65. Fala Galera,

    Estou passando aqui, para deixar o link de um sistema que desenvolvemos aqui para a nossa universidade (UFMS) utilizando o google maps.

    http://alunos.dct.ufms.br/~ufmsmaps/

    Programamos em PHP. Os pontos cadastrados são todos gerenciados(add, edit, exclud) por administradores.

    Talvez sirva de exemplo para alguém interessado.

    att

    DEUS abençoe

  66. Raffa tudo bem? olha, Como é que eu faço para agarrar numa rota em .KML e calcular o seu ponto central e o zoom ideal dessa mesma rota para meter no metodo setCenter(new GLatLng(x,y), zoom) ??

  67. Ola Rafael, gostei muito deste tópico, mas quando clico em um ponto marcado no mapa, aparece o balão com a distancia, mas não estou conseguindo mostrar os dados com Nome, cidade e estado. Você sabe como fazer isso?

    Obrigado.

  68. Olá Rafael, parabéns pelo seu trabalho.

    Estou no entanto com um problema.

    o mapa aparece, bem como os markers que constam no xml. O erro é quando faço adicionar, editar ou apagar, eles simplesmente não aparecem. Já verifiquei com o firebug obtenho código 200, o xml está chmod 777, as variáveis post na barra de endereços estão correctas.

    Não alterei qualquer linha de código sem ser API key.

    Testei nos seguintes webservers:

    Windows: php5
    Mac: php5
    Linux: php5

    até já coloquei o register globals on

    Alguma ideia?

    pode ver: http://85.139.251.145/maps/edit.php

    Obrigado.

  69. parabéns Rafael, realmente o seu artigo é ótimo, gostaria de saber se é possível fazer o seguinte (situação hipotética):
    Possuo um veiculo que diariamente realiza um mesmo percurso, esse veículo passa pelas mesmas ruas para chegar de um local A a um local B e essas informações (veiculo e ruas) são armazenadas em um banco de dados, seria possível traçar esse percurso em uma aplicação utilizando a API do google maps? Se possível, como seria feito.

    Bateu essa duvida, se você poder me ajudar será legal =)

    Aquele abraço…

  70. Meu Deus, que monstro, parece mais um frankenstein. O Larry Page estaria se revirando no tumulo se não estivesse vivo. Abrir o fonte deste lixo? rsrsrs..Era só o que me faltava mesmo.

  71. @Marcelo

    Cara, se tiver alguma critica construtiva pra contribuir estou aqui para ouvir, se quiser trollar apenas por favor procure algum outro blog que tenha espaço para isso.

    Obrigado.

  72. Olá Rafael,

    Primeiramente gostaria de te parabenizar pela qualidade e quantidade de conteúdos do teu blog. Estou em meio ao meu TCC e gostaria de saber se há possibilidade de você colaborar com meu trabalho no sentido de me enviar os scripts para que eu possa analisá-los melhor, podes ficar tranquilo que não pretendo copiar qualquer tipo de conteúdo, e que também serás citados em minhas referências. Outra dúvida seria em relação ao uso das API’s via plataforma .NET, preferencialmente com Windows Forms, tens algum conhecimento ou dica ?

    Abração.

    Att,
    Tiago.

  73. Muito bom!!!! Ando há algumas semanas a procurar a funcionalidade que demonstra neste exemplo. No entanto tentei experimentar e dá-me muitos erros no código (sobretudo nos tags HTML). Eu tenho conhecimentos limitados sobre programação para a web e, por isso, pedia-lhe que me pudesse disponibilizar os ficheiros fonte. Muito obrigado e parabéns pelo site.

Os comentários estão desativados.