buildrebuild
07-17-2007, 08:14 PM
Hi,
What I would like to know is, how do I loop through an xml file containing iinformation like this and postion the markers on the map.
<PHONEBOOK>
<LISTING>
<FIRST>Karen</FIRST>
<LAST>Smith</LAST>
<PHONE>1-800-354-7967</PHONE>
<ADDRESS>10 Bodega Avenue, Sebastopol CA 95472</ADDRESS>
<EMAIL>karen@smith.com</EMAIL>
</LISTING>
</PHONEBOOK>
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADFe9MhX06QtxFg4bMNWb0hTq7R5ZCmQdqihKRTinxz3ZXz71chTfnMZ2FaaJgH8XB34TTVBE4JK-6A" type="text/javascript">
</script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 9);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 9);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
http.open('get', 'ajaxphone.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse() {
if(http.readyState == 4){
theName.innerHTML = ""
address.innerHTML = ""
phone.innerHTML = ""
email.innerHTML = ""
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
for (i=0;i<listings.length;i++) {
firstobj = listings[i].getElementsByTagName("FIRST")
if (firstobj[0].firstChild.data == document.getElementById("first").value){
firstobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
theName.innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
address.innerHTML = addressobj[0].firstChild.data
phone.innerHTML = phoneobj[0].firstChild.data
email.innerHTML = emailobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
showAddress(theAddress)
}
}
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<form id="search">
<input type="text" id="first">
<input type="button" value="Search Phonebook" onClick="sndReq()">
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
What I would like to know is, how do I loop through an xml file containing iinformation like this and postion the markers on the map.
<PHONEBOOK>
<LISTING>
<FIRST>Karen</FIRST>
<LAST>Smith</LAST>
<PHONE>1-800-354-7967</PHONE>
<ADDRESS>10 Bodega Avenue, Sebastopol CA 95472</ADDRESS>
<EMAIL>karen@smith.com</EMAIL>
</LISTING>
</PHONEBOOK>
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADFe9MhX06QtxFg4bMNWb0hTq7R5ZCmQdqihKRTinxz3ZXz71chTfnMZ2FaaJgH8XB34TTVBE4JK-6A" type="text/javascript">
</script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 9);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 9);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
function createRequestObject() {
var ro
var browser = navigator.appName
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP")
}else{
ro = new XMLHttpRequest()
}
return ro
}
var http = createRequestObject()
function sndReq() {
http.open('get', 'ajaxphone.xml', true)
http.onreadystatechange = handleResponse
http.send(null)
}
function handleResponse() {
if(http.readyState == 4){
theName.innerHTML = ""
address.innerHTML = ""
phone.innerHTML = ""
email.innerHTML = ""
var response = http.responseXML.documentElement
listings=response.getElementsByTagName("LISTING")
for (i=0;i<listings.length;i++) {
firstobj = listings[i].getElementsByTagName("FIRST")
if (firstobj[0].firstChild.data == document.getElementById("first").value){
firstobj = listings[i].getElementsByTagName("FIRST")
lastobj = listings[i].getElementsByTagName("LAST")
addressobj = listings[i].getElementsByTagName("ADDRESS")
phoneobj = listings[i].getElementsByTagName("PHONE")
emailobj = listings[i].getElementsByTagName("EMAIL")
theName.innerHTML = firstobj[0].firstChild.data + " " + lastobj[0].firstChild.data
address.innerHTML = addressobj[0].firstChild.data
phone.innerHTML = phoneobj[0].firstChild.data
email.innerHTML = emailobj[0].firstChild.data
theAddress = addressobj[0].firstChild.data
showAddress(theAddress)
}
}
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<form id="search">
<input type="text" id="first">
<input type="button" value="Search Phonebook" onClick="sndReq()">
</form>
<div id="theName"></div>
<div id="address"></div>
<div id="phone"></div>
<div id="email"></div>
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>