Google Maps: Adicionando pontos via arquivo xml

Recebi um email, a poucos dias, solicitando ajuda para implementar a API do Google Maps. O legal do código era que os dados de latitude e longitude viam de um arquivo “XML”.

Precisava, também, exibir uma descrição em cada ponto ao clicar.

Aqui compartilho como trabalhar com API Google Maps e XML.

Veja o código final:

Detalhe: Para implementar em seu site deve-se primeiro se inscrever para adquirir a chave da API do Google Maps.

– Arquivo data.xml

<markers>
   <marker lat="-23.551123" lng="-46.641319" descr="teste1"/>
   <marker lat="-20.551370" lng="-40.641499" descr="teste2"/>
</markers>

O atributo “descr” será utilizado para exibição ao se clicar no ponto correspondente.

– Arquivo index.html

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Maps - XML</title> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=informe-aqui-a-sua-chave" type="text/javascript"></script>
 
<script type="text/javascript">
function createInfoMarker(point, address) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(address);
  });
    return marker;
  }	 
 
function initialize() {
if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map_canvas"));
   map.setCenter(new GLatLng(-14.264383, -51.943359), 5, G_SATELLITE_MAP);
   map.setUIToDefault();
   GDownloadUrl("data.xml", function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
 
      for (var i = 0; i < markers.length; i++) {
        var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
             parseFloat(markers[i].getAttribute("lng")));
 
	descricao = markers[i].getAttribute("descr");
 
	var marker = createInfoMarker(latlng,descricao);
	map.addOverlay(marker);									 
      }
   });
}
}
</script> 
</head> 
<body onLoad="initialize()" onUnload="GUnload()"> 
   <div id="map_canvas" style="width: 700px; height: 500px"></div> 
</body> 
</html>

8 comentários em “Google Maps: Adicionando pontos via arquivo xml

  • 7 de dezembro de 2010 em 10:53
    Permalink

    Bom dia e obrigado pela dica, mas pra mim não funcionou… a única alteração que fiz foi na chave do google… chegaste a testar esse code?

    Resposta
  • 7 de dezembro de 2010 em 11:24
    Permalink

    Derepente o erro não poderia ser aqui: … não localizei essa function GUnload… poderia ser por isso que está dando errado?

    Resposta
  • 7 de dezembro de 2010 em 11:25
    Permalink

    Derepente o erro não poderia ser aqui: body onLoad=”initialize()” onUnload=”GUnload()”… não localizei essa function GUnload… poderia ser por isso que está dando errado?

    Resposta
    • 7 de dezembro de 2010 em 12:24
      Permalink

      Notax,

      o código que eu postei tinha um erro:

      estava faltando o “=” depois do src.

      Alterei o código.

      Abraços.

      Tiago

      Resposta
  • 20 de dezembro de 2010 em 19:57
    Permalink

    Olá, é possível substituir long e lat pelo cep ou pelo próprio endereço?

    Obrigado!

    Resposta
    • 20 de dezembro de 2010 em 21:57
      Permalink

      Olá David,

      Não sei te responder, mas se achar algo te informo.

      Abraços.

      Resposta
  • 31 de dezembro de 2010 em 11:10
    Permalink

    o mapa apareceu aqui, porém, os ponto não.
    no IE aparece este erro

    Detalhes dos erros da página da Web

    Agente de Usuário: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; HPNTDF)
    Carimbo de data/hora: Fri, 31 Dec 2010 13:22:41 UTC

    Mensagem: ‘documentElement’ é nulo ou não é um objeto
    Linha: 23
    Caractere: 7
    Código: 0
    URI: http://cbteste.vilabol.uol.com.br/index.html

    Resposta
  • 31 de dezembro de 2010 em 11:44
    Permalink

    sem problemas….
    o servidor que testei não suporta 🙁

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *