topical media & game development
professional-ria-03-GoogleYahooMashup.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Yahoo! Geocoder</title>
<link rel=StyleSheet href="../../stylesheets/RIAStyle1.css" TYPE="text/css">
<script src="../../scripts/createXMLHttpRequest.js" type="text/javascript"></script>
<script type="text/javascript" src="../../scripts/jsr_class.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT3MTfjNOb50deF4pcXwWhT9dALuQ"
type="text/javascript">
</script>
<script "text/javascript">
//<![CDATA[>
// global vars
var __xmlhttp = false;
var __lat = null;
var __lon = null;
var __appid = "YahooDemo";
var __location = null;
var __geocoderURI = "http://api.local.yahoo.com/MapsService/V1/geocode?appid="+__appid+"&output=xml";
var __geocoderProxy = "../../phpscripts/geocoder.php?";
var __trafficServer = "http://api.local.yahoo.com/MapsService/V1/trafficData?appid="+__appid;
var __trafficReq = null;
var __map = null;
<!-- GoogleMaps API Key -->
var localhostAPIKey ="ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT3MTfjNOb50deF4pcXwWhT9dALuQ";
var abraxasAPIKey = "ABQIAAAA-j4r1Ft3AXUvtHpmQed5QBSWzNBOSyak8f9TRXsmYAgq6F2hIxQ4tcYhi1JBO8vJ0i_E7BsL5NIkfw";
function callWS(target){
if(target !== ""){
if (!__xmlhttp) {__xmlhttp = createXMLHttpRequest();}
//alert("callWS: target: "+target);
var url = __geocoderProxy + target;
__xmlhttp.open('GET', url, true);
__xmlhttp.onreadystatechange = function() {
//alert("callWS: onreadystatechange: "+__xmlhttp.readyState );
if(__xmlhttp.readyState == 4 && __xmlhttp.status == 200) {
document.getElementById('Result').innerHTML = '';
document.getElementById('State').innerHTML = 'Done.';
//alert("__xmlhttp.responseText:" + __xmlhttp.responseText);
getLatLon(__xmlhttp.responseText);
loadMap();
getTrafficReport();
} else {
document.getElementById('State').innerHTML = "Working...";
}
};
//alert("callWS: sending: "+__xmlhttp);
__xmlhttp.send(null);
}
}
function getLatLon(result){
var start = (result.search(/<Latitude>/) +10 );
var end = result.search(/<\/Latitude>/);
__lat = result.substr(start, (end -start) );
start = (result.search(/<Longitude>/) +11 );
end = result.search(/<\/Longitude>/);
__lon = result.substr(start, (end -start) );
// document.getElementById("Latitude").innerHTML = __lat;
// document.getElementById("Longitude").innerHTML = __lon;
document.getElementById("State").innerHTML = "";
__xmlhttp = false;
}
function getTrafficReport(){
if (__trafficReq != null){
aObj.removeScriptTag(); // clean up the DOM
}
var __trafficReq =__trafficServer + "&location="+__location + "&output=json&callback=getTrafficData";
//alert("getTrafficReport : "+encodeURI(__trafficReq));
aObj = new JSONscriptRequest( encodeURI(__trafficReq));
aObj.buildScriptTag();
aObj.addScriptTag();
}
function getTrafficData(jData) {
if (jData.ResultSet.Result.length ==0){
document.getElementById('TrafficResults').innerHTML = "No reported tie-ups";
return;
}
alert("getTrafficData : "+jData.ResultSet.Result.length);
document.getElementById('TrafficResults').innerHTML = jData.ResultSet.Result.length+ " reported tie-ups";
for (var i = 0; i < jData.ResultSet.Result.length; i++){
var lat = jData.ResultSet.Result[i].Latitude;
var lon = jData.ResultSet.Result[i].Longitude;
var title = jData.ResultSet.Result[i].Title;
var descr = jData.ResultSet.Result[i].Description;
var severity = jData.ResultSet.Result[i].Severity;
var type = jData.ResultSet.Result[i].type;
var report = "<h2>" + title + "</h2><br /><hr/>"
+ "Lat/Lon: " + lat + "/"+ lon + "<br/>"
+ "Type: " + type + "<br/>"
+ "Severity: " + severity + "<br />"
+ "Details:" + descr;
//alert("Report "+i+":"+report);
__map.addOverlay(createMarker( new GLatLng(lat, lon), report));
}
}
function createMarker(point, report) {
//alert("createMarker: Report :"+report);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml( report );
});
return marker;
}
function loadMap() {
//alert("LAT LON (2):"+ __lat+"/"+__lon);
if (GBrowserIsCompatible()) {
__map = new GMap2(document.getElementById("map"));
__map.setCenter(new GLatLng(__lat.toString(), __lon.toString()), 13);
}
var marker = hereMarker(__map.getCenter());
__map.addOverlay(marker);
}
function hereMarker(point){
var letter = null;
var marker = null;
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/markerX.png";
marker = new GMarker(point, icon);
GEvent.addListener(marker, "click",
function() {
marker.openInfoWindowHtml(
"<b>Your Address</b>"
);
}
);
return marker;
new GMarker(point);
}
function callGeocode() {
__location = document.getElementById("geoquery").value;
// var uri = "http://api.local.yahoo.com/MapsService/V1/geocode?appid="+__appid+"&output=xml&location=" + __location;
var uri = __geocoderURI+"&location=" + __location;
callWS(uri);
}
//]]>
</script>
</head>
<body onunload="GUnload()">
<div id="header">
<h1>Simple Geocoding Example </h1>
<h2>Input a loose location description and get the traffic tie ups for the surrounding area</h2>
</div>
<br />
<div class="inputelement"><button onClick="callGeocode()">Location</button>
<input id="geoquery" value="1300 N. 17th St, Arlington VA" size="50"></input>
</div>
<br />
<div id="State"></div>
<div id="Result"></div>
<!-- <p>Latitude: <span id="Latitude" style="font-weight:bold"></span> </p>
<p>Longitude: <span id="Longitude" style="font-weight:bold"></span> </p> -->
<p>Traffic Tie Ups: <span id="TrafficResults" style="font-weight:bold"></span> </p>
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
