December 6th 2006 08:46 am

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.

JavaScript:
  1. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=API_KEY" type="text/javascript"></script>
  2.     <script type="text/javascript">
  3.  
  4.     //<![CDATA[
  5.     var zeroLat = new GLatLng(-23.588334358688655,-46.61230802536011); //Ponto central (local do evento)
  6.     function load() {
  7.       if (GBrowserIsCompatible()) {
  8.         var map = new GMap2(document.getElementById("map"));
  9.         map.addControl(new GLargeMapControl()); //Controles de Zoom, movimento
  10.         map.addControl(new GMapTypeControl()); // Controle de tipo de mapa
  11.         map.addControl(new GOverviewMapControl()); //Mapinha pequeno no canto        
  12.         map.setCenter(zeroLat, 5); //Setar centro do mapa, com nivel 5 de zoom
  13.  
  14.     //... MORE CODE ...
  15.    </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.

JavaScript:
  1. //Handle XML
  2. GDownloadUrl("phpconfbrasil2006.xml", function(data, responseCode) {
  3.   var xml = GXml.parse(data);
  4.   var markers = xml.documentElement.getElementsByTagName("marker"); //Ler lista de pontos
  5.  
  6.   document.getElementById('count').innerHTML = "<b>Congressistas registrados: "+markers.length+"</b>"; //Publicar contagem
  7.  
  8.   for (var i = 0; i <markers.length; i++) {
  9.     var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
  10.                             parseFloat(markers[i].getAttribute("lng")));
  11.    
  12.         if (markers[i].getAttribute("tit") == "PHP Conference Brasil 2006"){ //Exceção para ponto central
  13.         var myIcon = new GIcon(G_DEFAULT_ICON,'ev-icon.png');
  14.         myIcon.iconSize = new GSize(55, 54);
  15.         myIcon.iconAnchor = new GPoint(16, 52);
  16.     }else{
  17.         var myIcon = G_DEFAULT_ICON;
  18.     }
  19.  
  20.     var dados = { title: markers[i].getAttribute("tit"), icon: myIcon}; //Dados
  21.     map.addOverlay(new GMarker(point,dados)); //Criar marker
  22.    
  23.     //Adicionar Linha que liga ponto ao evento
  24.     var polyline = new GPolyline([
  25.         zeroLat,
  26.         point
  27.     ], "#ff0000", 1);
  28.     map.addOverlay(polyline);
  29.    
  30.     //Adicionar na Lista (HTML)
  31.     var ul = document.getElementById('ullista');
  32.     var li = document.createElement('li');
  33.     li.innerHTML = "<b>"+markers[i].getAttribute("tit")+" - \t\tDistância: "+ Math.round(point.distanceFrom(zeroLat)/1000)+ "km";
  34.     ul.appendChild(li);
  35.   }
  36. });

Estrutura do XML

XML:
  1. <?xml version="1.0"?>
  2. <markers>
  3.     <marker lat="-23.588334358688655" lng="-46.61230802536011" tit="PHP Conference Brasil 2006"/>
  4.     <marker lat="-15.83783866346968" lng="-47.816104888916016" tit="Rafael Dohms - Brasilia,DF"/>
  5. </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.

JavaScript:
  1. GEvent.addListener(map, "click", function(marker, point) {
  2.   if (marker) { //Se estiver clicando sobre marker
  3.     var tpoint = marker.getPoint(); //pegar ponto lat por long
  4.     var distance = tpoint.distanceFrom(zeroLat)/1000;
  5.    
  6.     var cnt = "<div id='popup'>";
  7.     cnt    += "<br />Distância: "+Math.round(distance)+" km"; //Calcular distancia
  8.     cnt    += "</div>";
  9.     marker.openInfoWindowHtml(cnt);
  10.   } else { //Se estiver clicando em ponto em branco
  11.     var nome = window.prompt("Digite: NOME - Cidade,Estado"); //Pegar texto para nome do marker
  12.     if (!nome){
  13.         return false
  14.     }
  15.     var dados = { title: nome }
  16.     map.addOverlay(new GMarker(point,dados));
  17.    
  18.     //Adicionar no XML via AJAX
  19.     var req = GXmlHttp.create();
  20.     req.open("POST", "addmarker.php", true);
  21.     req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  22.    
  23.         //Montar parâmetros
  24.     var param = 'tit=' + nome;
  25.     param    += '&lat=' + point.lat();
  26.     param    += '&lng=' + point.lng();
  27.     req.send(param);
  28.   }
  29. });

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.

PHP:
  1. <?
  2. //Recebe os dados e Cria um novo string no XML
  3.  
  4. //Definir Arquivo XML
  5. define('FILE',"phpconfbrasil2006.xml");
  6.  
  7. //Abrir XML
  8. $xmlDoc = new DOMDocument('1.0','utf-8');
  9. $xmlDoc->load(FILE);
  10. $xmlDoc->formatOutput = true;
  11.  
  12. //Criar novo item
  13. $nLocation = $xmlDoc->createElement('marker');
  14. $nLocation->setAttribute('lat',$_POST['lat']);
  15. $nLocation->setAttribute('lng',$_POST['lng']);
  16. $nLocation->setAttribute('tit',$_POST['tit']);
  17.  
  18. //Adicionar ao nó markers
  19. $nLocation = $xmlDoc->firstChild->appendChild($nLocation);
  20.  
  21. //Salvar arquivo
  22. $xmlDoc->save(FILE);
  23.  
  24. ?>

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

1 Star2 Stars3 Stars4 Stars5 Stars (16 votos, média: 4.50 de 5)
Loading ... Loading ...

84 Comments »

84 Responses to “Google Maps API: Um exemplo prático e comentado”

  1. Utilizando a API do Google Maps no PHP por BrPoint on 06 Dec 2006 at 10:35 #

    [...] O Rafael Dohms, explica, de forma simples e clara, como utilizar esta API em conjunto com o PHP para gerar serviços customizáveis, utilizando os mapas do Google. [...]

  2. Leandro Vieira Pinho on 07 Dec 2006 at 20:09 #

    Rapaz, que bacana viu, gostei. Vou tirar um tempo (não sei quando) para “mergulhar” nos códigos.

    Um abraço.

  3. Bruno Dulcetti on 08 Dec 2006 at 14:35 #

    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…

  4. Alexandre Fugita on 09 Dec 2006 at 19:53 #

    Legal! Vou estudar direitinho este post e tentar criar alguma aplicação com o API do Google Maps.

  5. Robson O C on 24 Dec 2006 at 19:15 #

    Testei e Gostei!

    Parabéns!!!

    Robson
    Goiânia-Goiás

  6. Leandro on 14 Jan 2007 at 14:36 #

    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!!

  7. José Ricardo on 16 Jan 2007 at 21:10 #

    Oi Rafael

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

    Parabéns.

  8. Sousa on 17 Jan 2007 at 10:56 #

    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…

  9. José Ricardo on 17 Jan 2007 at 12:02 #

    Gostaria de saber se este exemplo rodaria em minha máquina, ou se é necessário um servidor com PHP.

  10. Utilizando a API do Google Maps no PHP « Vômito Blog - AJAX, Php, Delphi, J2ME, etc. on 26 Jan 2007 at 22:48 #

    [...] O Rafael Dohms, explica, de forma simples e clara, como utilizar esta API em conjunto com o PHP para gerar serviços customizáveis, utilizando os mapas do Google. [...]

  11. Webcomestilo Blog » Blog Archive » Utilizando a API do Google Maps no PHP on 05 Feb 2007 at 7:39 #

    [...] Rafael Dohms, explica, de forma simples e clara, como utilizar esta API em conjunto com o PHP para gerar serviços [...]

  12. Linomar on 05 Feb 2007 at 10:12 #

    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 ???

  13. Fabiano on 11 Feb 2007 at 12:32 #

    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…

  14. Rafael Dohms on 11 Feb 2007 at 23:12 #

    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.

  15. flavio lima on 18 Feb 2007 at 1:40 #

    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

  16. Eduardo on 21 Feb 2007 at 10:15 #

    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.

  17. Vinicius on 25 Feb 2007 at 20:12 #

    Envia o código mapa comercial para nós.

  18. Fernando on 08 May 2007 at 6:47 #

    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

  19. Raphael on 08 May 2007 at 10:05 #

    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.

  20. Fernando on 08 May 2007 at 10:10 #

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

  21. Tiago on 08 Jun 2007 at 17:17 #

    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

  22. gustavo on 09 Jun 2007 at 11:09 #

    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

  23. Thiago Henrique on 12 Jun 2007 at 16:07 #

    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?

  24. Cassiano on 22 Jun 2007 at 0:19 #

    Não consegui rodar o código. :(

    Tem um compactado pra baixar ?

    Valeu

  25. Daniel Kenji on 29 Jun 2007 at 11:52 #

    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

  26. Alexandre Lopes on 06 Jul 2007 at 18:14 #

    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

  27. Rafael Dohms on 20 Jul 2007 at 9:10 #

    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.

  28. joao gilberto on 22 Jul 2007 at 13:21 #

    Oi! Mto bom o seu site.

    só que eu qd dou refresh os markers desaparecem.

  29. João on 24 Jul 2007 at 11:12 #

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

  30. Rafael Dohms on 24 Jul 2007 at 13:54 #

    João,

    Sim o serviço é gratuito, a licença esta no site do Google Maps

  31. João on 24 Jul 2007 at 18:07 #

    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

  32. Eduardo on 03 Aug 2007 at 16:29 #

    O Eduardo passa o codigo do mapa.php

  33. Etiene on 06 Sep 2007 at 9:00 #

    Olá…. não funcionou aqui :(

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

    ; )

  34. Utilizando a API do Google Maps no PHP « smoreira.eti.br on 12 Sep 2007 at 0:14 #

    [...] o Google disponibilizou uma API para que você possa utilizá-lo em qualquer site. O Rafael Dohms, explica, de forma simples e clara, como utilizar esta API em conjunto com o PHP para gerar serviços [...]

  35. Marcelo on 12 Sep 2007 at 23:11 #

    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.

  36. Ajude um Blog! Faça uma doação! on 28 Sep 2007 at 9:30 #

    [...] do dia dia de trabalho: “nossa estou com duvidas na API do google, o que faço?”**, “Como posso inserir texto em uma imagem usando [...]

  37. Waldir on 01 Oct 2007 at 10:48 #

    Hi, great code. The markers don’t show on IE, only on FF. Any suggestions?

  38. Romeu on 04 Oct 2007 at 10:32 #

    faz muito tempo que tentei utilizar o google api key no meu site http://www.channelfriends.com somente após esta explicação consegui realmente entender o sistema. Excelente site.
    Parabéns.

  39. leo on 11 Oct 2007 at 17:00 #

    Rafael …

    mais uma vez vlw pelas dicas …

    consegui fazer funcionar e agora vou tentar incrementar mais …

    esse blog é 10

    []s
    Leo

  40. Ferrraaao! on 13 Oct 2007 at 14:48 #

    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

  41. Ferrraaao! on 18 Oct 2007 at 21:04 #

    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

  42. Rafael Dohms on 19 Oct 2007 at 0:13 #

    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.

  43. Mario Câmara on 21 Oct 2007 at 11:42 #

    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

  44. felipe on 23 Oct 2007 at 0:11 #

    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 ?

  45. Eduardo on 23 Oct 2007 at 16:09 #

    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.

  46. Eduardo on 25 Oct 2007 at 21:19 #

    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

  47. Maicon on 31 Oct 2007 at 23:37 #

    amigo.. seria possivel saber as ruas(marcadores) em um banco de dados access?

  48. Rafael Dohms on 02 Nov 2007 at 10:25 #

    Maicon,

    Não entendi muito bem o que perguntou, mas sim, voce pode guardar os marcaores em banco de dados e carrega-los novamente.

    abraço

  49. Alex Reis on 07 Nov 2007 at 17:01 #

    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

  50. Rafael Dohms on 14 Nov 2007 at 9:01 #

    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

  51. Alex Reis on 19 Nov 2007 at 10:21 #

    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

  52. Sandra Ferreira on 26 Nov 2007 at 18:01 #

    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,

  53. Rafael Dohms on 27 Nov 2007 at 9:01 #

    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!

  54. Rafael Dohms on 27 Nov 2007 at 9:03 #

    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

  55. Alex Reis on 29 Nov 2007 at 9:14 #

    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

  56. Sandra Ferreira on 06 Dec 2007 at 11:09 #

    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?

  57. Alex Reis on 12 Dec 2007 at 14:20 #

    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

  58. Alex Reis on 12 Dec 2007 at 14:41 #

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

  59. Elaine on 27 Dec 2007 at 14:37 #

    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

  60. Rafael Dohms on 01 Jan 2008 at 16:42 #

    Elaine,

    Estou enviando os scripts para o seu email.

    Abraço

  61. Fernando on 13 Jan 2008 at 16:28 #

    Muito bom…isso que estava procurando faz tempo…agora toligado….na parada..hehe!

    http://pontuaki.com

  62. Gabriel on 28 Jan 2008 at 14:27 #

    Cara, te amo! :D

    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? :)

  63. Rafael Dohms on 28 Jan 2008 at 14:48 #

    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!

  64. Bruna Juliani on 18 Feb 2008 at 16:56 #

    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!

  65. Rafael Dohms on 19 Feb 2008 at 23:10 #

    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

  66. ergio on 21 Feb 2008 at 15:29 #

    Eduardo, nos fornece o fonte dos mapas.

    Mapas Comercial

  67. Ribon on 11 Mar 2008 at 12:38 #

    Poderia dispor os fontes.

    Obrigado.

  68. Max Almeida on 16 Mar 2008 at 2:42 #

    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!

  69. Alex Reis on 27 Mar 2008 at 9:01 #

    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

  70. Etiene on 05 May 2008 at 9:56 #

    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

  71. James Eglin on 12 Aug 2008 at 16:13 #

    Is this the latest version of this application?

  72. Matheus on 28 Oct 2008 at 10:10 #

    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

  73. Cristiano on 09 Dec 2008 at 10:19 #

    Isto esta altamente, grande trabalho mesmo.

  74. Marcelo on 16 Dec 2008 at 3:03 #

    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

  75. Alex on 30 Dec 2008 at 18:29 #

    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.

  76. Johnny on 02 Feb 2009 at 8:48 #

    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

  77. Rafael Dohms on 02 Feb 2009 at 9:53 #

    Johnny,

    É sim, voce poder fazer isso por ajax por exemplo, o importnte é fazer as chamadas javascrupt de addMarker, a fonte tanto faz.

  78. Valmor on 12 Feb 2009 at 16:58 #

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

    Alguem pode ajudar?

    Atenciosamente
    Valmor

  79. Márcio on 13 Feb 2009 at 11:07 #

    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

  80. carlos on 19 Feb 2009 at 22:28 #

    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

  81. Janio on 02 Mar 2009 at 12:03 #

    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! :D

    Um grande abraço
    Janio

  82. Wellinton on 20 Mar 2009 at 20: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!!

  83. Ferdinado on 26 Apr 2009 at 19:39 #

    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

  84. Robert Christian on 21 May 2009 at 15:36 #

    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

Trackback URI | Comments RSS

Leave a Reply

« PHP Conference Brasil – 2º Dia | dmsLiveList: Lista de itens em Tempo Real com AJAX »