Second iteration of Google Map hacks
Posted 07/01/2005 by dnaffis 0 CommentsAdd Your Comment
Here’s a reworking of one of my map pages taking advantage of the new Google Map API.
Javascript:<script type="text/javascript">
var recordFound;
var ae = "";
var av = "";
var ct = 1;
var req;
var urlc = 1 + 1;
function isEmpty(s) {
return ((s == null) || (s.length == 0))
}
function gid(i) {
return document.getElementById(i);
}
function get_xml_url(xmltype) {
return 'http://www.somapper.com/xml/getXml.php?zip_code=' + gid("zip_code").value + '&type=' + xmltype;
}
function get_xsllist_url() {
var baseurl = 'http://www.somapper.com/xsl/';
if(recordFound)
return baseurl + 'infostyle_statelist.xsl';
else
return baseurl + 'infostyle_mainlist.xsl';
}
function get_xslmap_url() {
var baseurl = 'http://www.somapper.com/xsl/';
if(recordFound)
return baseurl + 'infostyle_statemap.xsl';
else
return baseurl + 'infostyle_mainmap.xsl';
}
function update(zip) {
gid("zip_code").value = zip;
wasRecordFound();
update_map();
update_list();
}
var mymarkers = new Array();
var mylocations = new Array();
var map;
function update_map() {
mymarkers = new Array();
mylocations = new Array();
map = new GMap( document.getElementById( "map" ));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var url = get_xml_url('map');
var request = GXmlHttp.create();
request.open( "GET", url, true );
request.onreadystatechange = function() {
if(request.readyState == 4) {
var xmlDoc = request.responseXML;
var center = xmlDoc.documentElement.getElementsByTagName("center");
var lng = parseFloat(center[0].getAttribute("lng"));
var lat = parseFloat(center[0].getAttribute("lat"));
var zoomLevel = 14;
if(recordFound)
zoomLevel = 5;
map.centerAndZoom(new GPoint(lng, lat), zoomLevel);
var locations = xmlDoc.documentElement.getElementsByTagName("location");
for(var i = 0; i < locations.length; i++) {
var location = createMarker(locations, i);
map.addOverlay(location);
mymarkers.push(location);
mylocations.push(locations[i]);
}
var msg = gid('eventmessage');
if(recordFound)
msg.innerHTML = locations.length + (locations.length != 1 ? ' Records' : ' Record') + ' Found.';
else
msg.innerHTML = "Sorry, no records were found. Please enter a different zip code.";
}
}
request.send(null);
}
function createMarker(locations, i) {
var points = locations[i].getElementsByTagName("point");
var lng = parseFloat(points[0].getAttribute("lng"));
var lat = parseFloat(points[0].getAttribute("lat"));
var point = new GPoint(lng, lat);
var info = locations[i].getElementsByTagName("info");
var title = info[0].getElementsByTagName("title");
var icon = new GIcon(baseIcon);
icon.image = "http://www.somapper.com/images/icon.png";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowXslt(locations[i], get_xslmap_url() );
});
GEvent.addListener(marker, "infowindowclose", function() {
keepLoading = false;
});
return marker;
}
function update_list() {
try {
var xslRef;
var xmlRef;
// get the stylesheet
var xslreq;
if(window.XMLHttpRequest)
xslreq = new XMLHttpRequest();
else if(window.ActiveXObject)
xslreq = new ActiveXObject("Microsoft.XMLHTTP");
if(xslreq) {
xslreq.open("GET", get_xsllist_url(), false);
xslreq.send(null);
}
// get the stylesheet
var listreq;
if(window.XMLHttpRequest)
listreq = new XMLHttpRequest();
else if(window.ActiveXObject)
listreq = new ActiveXObject("Microsoft.XMLHTTP");
if(listreq) {
listreq.open("GET", get_xml_url('list'), false);
listreq.send(null);
}
if(window.XMLHttpRequest) {
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xslreq.responseXML);
var fragment = xsltProcessor.transformToFragment(listreq.responseXML, document);
gid("events").innerHTML = "";
gid("events").appendChild(fragment);
}
else if(window.ActiveXObject) {
var source = new ActiveXObject("Msxml2.DOMDocument.4.0");
source.loadXML(listreq.responseText);
var stylesheet = new ActiveXObject("Msxml2.DOMDocument.4.0");
stylesheet.loadXML(xslreq.responseText);
gid("events").innerHTML = "";
gid("events").innerHTML = source.transformNode(stylesheet);
}
}
catch(e) {
alert('Exception: ' + e.message);
}
}
function wasRecordFound() {
var recreq;
if(window.XMLHttpRequest)
recreq = new XMLHttpRequest();
else if(window.ActiveXObject)
recreq = new ActiveXObject("Microsoft.XMLHTTP");
if(recreq) {
recreq.open("GET", 'http://www.somapper.com/xml/rec.php?zip_code=' + gid("zip_code").value, false);
recreq.send(null);
}
var res = recreq.responseText;
if(res == '1')
recordFound = true;
else
recordFound = false;
}
function showLoc(id) {
var i = parseInt(id);
var info = mylocations[i].getElementsByTagName("info");
var id = info[0].getElementsByTagName("id");
var name = info[0].getElementsByTagName("name");
//alert('i = ' + i +', id = ' + id + ', name = ' + name);
mymarkers[i].openInfoWindowXslt(mylocations[i], get_xslmap_url());
}
</script>Here’s one of the many XSLT files used to do the transforms.
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/">
<table style="border:0">
<thead>
<tr>
<td>
<a style="color:black; text-decoration:none;">
<xsl:attribute name="href">
javascript:void(sortby('name'))
</xsl:attribute>
Name
</a>
</td>
<td>
<a style="color:black; text-decoration:none;">
<xsl:attribute name="href">
javascript:void(sortby('address'))
</xsl:attribute>
Address
</a>
</td>
</tr>
</thead>
<tbody>
<xsl:for-each select="people/person">
<tr>
<td nowrap="nowrap">
<a style="background:white; color:#3300FF; text-decoration:underline; font-size:.8em;">
<xsl:attribute name="href">javascript:void(0)</xsl:attribute>
<xsl:attribute name="onclick">
javascript:showLoc('<xsl:value-of select="id"/>');
</xsl:attribute>
<xsl:value-of select="name"/>
</a>
</td>
<td nowrap="nowrap">
<a style="background:white; color:#3300FF; text-decoration:underline; font-size:.8em;">
<xsl:attribute name="href">javascript:void(0)</xsl:attribute>
<xsl:attribute name="onclick">
javascript:showLoc('<xsl:value-of select="id"/>');
</xsl:attribute>
<xsl:value-of select="address"/>
</a>
</td>
</tr>
</xsl:for-each>
</tbody>
</table>
</xsl:template>
</xsl:stylesheet>If you feel like digging around you can visit the site and view source to see where the other files are.
Tagged Under:
Leave a Reply