Google GuestMap 2007 and adding Google Maps to your Site
Two years ago I asked you "where are my readers?" Today, I ask you again, where are you?
Go sign my Google Maps Guest Map, would you, Dear Reader? It'll just take a moment, no registration required.
UPDATE: Read the Guest Map GuestBook directly, without the map.
I did a demo site with Google Maps and the GoogleMaps API recently for work. It sure is a nice clean API if you've got the data. I was able to integrate a nice map a day. I'm sure with a weeks work (which I don't have, it's just a demo) one could do some great stuff.
You just visit the Google Maps API page and sign up for an API key. You're limited to like a billion views, so don't go over! You can read the API docs as much as I can, so I won't bore you too much, but here's a little of what I did to jumpstart my demo.
(There's LOTS of ways to do this, BTW, this is just one. The sample may not be "cutting edge" but it's accessible.)
I was actually integrating the Timeline Control and its XML format with a Google Map...so, let's just say you have an existing XML format:
<data>
<event
start="Feb 13 2007 09:00:00 GMT"
end="Feb 16 2007 09:00:00 GMT"
isDuration="true"
title="Some Window of Time">
Be sure to pay attention!</event><event
start="Feb 4 2007 10:04:00 GMT-0500"
title="Chipotle $4.58"
lat="45.483484" lng="-122.800026" >Food</event><event
start="Feb 7 2007 16:00:00 GMT-0500"
title="Jack in the Box $9.44"
lat="45.493112" lng="-122.805862"
>Food</event></data>
I can just add geographic data "along for the ride," made especially easy because this data doesn't have a schema (although I could put it in another namespace).
You add this line to your page:
<script src=http://maps.google.com/maps?file=api
&v=2&key=YOURAPIKEY
type="text/javascript"></script>
Then add a map somewhere:
<div id="map" style="height: 200px" ></div>
Then hook up your Load and Unloads:
<BODY onload="GLoad();" onresize="GUnload()">
Then add a little script like this to get your XML and yank the data you need. The interesting bits are in red.
<script type="text/javascript">
function GLoad() {
if (GBrowserIsCompatible()) {
var gmarkers = [];
var htmls = [];
var i = 0;
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
//SCOTT - EXAMPLES OF OTHER STUFF YOU CAN DO
//map.addControl(new GLargeMapControl ());
//map.addControl(new GMapTypeControl());
// THE 10 is the ZOOM LEVEL
map.setCenter(new GLatLng(45.519579, -123.004303), 10);
// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "your.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("event");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker...don't bother without lat data
var latVar = markers[i].getAttribute("lat")
if(latVar != null)
{
var lat = parseFloat(latVar);
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("title"); // or whatever you like
var label = markers[i].getAttribute("title");
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
}
// put the assembled side_bar_html contents into the side_bar div
// A Sidebar is optional, you can just comment this out,
// or not have a side_bar element.
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}
request.send(null);
} else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/
}
//]]>
</script>
I can't show you the demo I did, because it's super-secret-financial stuff, but perhaps you'll think of a creative new way to include geographic data in the project you're currently working on!
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
My 
