Boa Noite, estou fazendo um trabalho pra faculdade mas estou tendo dificuldade, eu vou falar o objetivo da aplicação e a dificuldade...lembrando que eu sou novato pessoal então não reparem nas burradas que eu fiz no código...rsrsr
Eu tenho que montar um arquivo XML com o nome,endereço,telefone e email de pessoas, depois através do HTML eu vou ler o nome das pessoas e criar um combox que deverá aparece somente o nome de todas elas (até ai já foi mó trampo)...depois eu vou usar o google maps pra mostrar o endereço que eu coloquei no XML, isso deve ser feito quando eu clicar em um nome no combobox, ou seja, cada nome tem seu endereço associado a ele e quando eu clicar no nome o google maps mi mostra o endereço pertencente aquela pessoa.
Bom, eu consegui fazer a parte de criar o XML e o combobox com o nome de todos e associar um endereço a cada um deles, a duvida está sendo na função " codeAddress() ", ela deve receber o endereço que eu quero geocodificar, se eu colocar um ID fixo lá dentro eu consigo mas a intenção é passar o endereço da pessoa que eu cliquei no combobox, vou dar um exemplo pra ficar menos dificil de intender.
Vamos supor que eu tenho 3 contatos: contato1,contato2 e contato3 e um endereço pra cada um deles, quando eu criei o meu combobox eu coloquei um ID pra cada option criado, ID=A,ID=B e ID=C, e esses ID's estão associados aos meus contatos, quando eu clicar em um contato eu vou chamar a função codeAddress() e vou passar pra ele o value(que seria o endereço) atraves do ID do meu option, o problema está em passar o ID de cada um deles, se eu clicar no contato1 eu quero passar o ID=A, se eu clicar no contato2 eu quero passar o ID=B e assim por diante.
Por favor mi ajudem, e se alguem tiver uma idéia de como criar o meu combox de uma forma mais elegante e eficiente eu aceito sugestões, lembrando pessoal que eu ainda não aprendi nada diferente de XML, HTML e javascript, ou seja, eu tenho que achar uma solução usando apenar eles...eu sei que estou exigindo mto, mas eu não tenho mais pra quem recorrer.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title>Busca Contatos</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function displayContatos(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Contatos.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("Pessoa");
i = 0;
var select = "<select id='select'></select>";
document.getElementById("combo").innerHTML = select;
var codigo = ' ';
for(i = 0; i < x.length; i++){
nome = (x[i].getElementsByTagName("Nome")[0].childNodes[0].nodeValue);
endereco = (x[i].getElementsByTagName("Endereco")[0].childNodes[0].nodeValue);
telefone = (x[i].getElementsByTagName("Telefone")[0].childNodes[0].nodeValue);
email = (x[i].getElementsByTagName("Email")[0].childNodes[0].nodeValue);
var codigo = codigo + "<option id='"+ nome +"' value='"+ endereco +"'onclick='codeAddress()'>"+ nome + "</option>";
}
document.getElementById("select").innerHTML = codigo;
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
displayContatos();
}
function codeAddress() {
var address = document.getElementById("Natalia").value;
if (geocoder) {
geocoder.geocode( { 'address' : address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="combo"></div>
<div id='map_canvas' style="width: 800px; height: 600px;"></div>
</body>
</html>
