Second iteration of Google Map hacks
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> javascript:void(sortby('name')) Name </td> <td> javascript:void(sortby('address')) Address </td> </tr> </thead> <tbody> <xsl:for-each select="people/person"> <tr> <td nowrap="nowrap"> javascript:void(0) javascript:showLoc(''); </td> <td nowrap="nowrap"> javascript:void(0) javascript:showLoc(''); </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.
Google Maps API
Seems Google released an official Googe Maps API.
I spent the better part of today taking apart all the Google Maps code I’ve written and rewriting it using the API. I still had to hack a few parts to get the list panel to pop up the info windows. If anyone knows of a better way to do this send me an email.
If anyone needs any assistance developing a Google Maps application of their own, let me know. I would be happy to help.
I’m working on my third one now.
Mapping Sex Offenders
It seems my Sex Offender Mapper offended quite a few people. However, that’s not why I took it down. In the end after reading the posts on slashdot as well as a few convincing emails I decided it was for the best.
I’ll be adding some pages in the next few days (maybe by Monday) outlining how I made the site in case some of you out there feel like making your own Google Map hacks (to map whatever you like).
If you’re working on something and need some help/advice I would be happy to help. Email me at david@naffis.com
