Google Maps: Adicionando pontos via arquivo xml

admin 1 de março de 20107 de dezembro de 2010 8 Comments google API, google maps

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 thoughts on “Google Maps: Adicionando pontos via arquivo xml”

Notax

7 de dezembro de 2010 em 10:53

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
Notax

7 de dezembro de 2010 em 11:24

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

7 de dezembro de 2010 em 11:25

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
- Tiago
  
  7 de dezembro de 2010 em 12:24
  
  Notax,
  
  o código que eu postei tinha um erro:
  
  estava faltando o “=” depois do src.
  
  Alterei o código.
  
  Abraços.
  
  Tiago
  Resposta
David

20 de dezembro de 2010 em 19:57

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

Obrigado!
Resposta
- Tiago
  
  20 de dezembro de 2010 em 21:57
  
  Olá David,
  
  Não sei te responder, mas se achar algo te informo.
  
  Abraços.
  Resposta
Luis

31 de dezembro de 2010 em 11:10

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
Luis

31 de dezembro de 2010 em 11:44

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

Você pode gostar também

Google Fonts: Como usar offline

Google Libraries API

Guia Rápido para Usar a API Google Text-to-Speech

8 thoughts on “Google Maps: Adicionando pontos via arquivo xml”

Deixe um comentário Cancelar resposta