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&v=2&sensor=false&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> |
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?
Derepente o erro não poderia ser aqui: … não localizei essa function GUnload… poderia ser por isso que está dando errado?
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?
Notax,
o código que eu postei tinha um erro:
estava faltando o “=” depois do src.
Alterei o código.
Abraços.
Tiago
Olá, é possível substituir long e lat pelo cep ou pelo próprio endereço?
Obrigado!
Olá David,
Não sei te responder, mas se achar algo te informo.
Abraços.
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
sem problemas….
o servidor que testei não suporta 🙁