Scott Hanselman

Google GuestMap 2007 and adding Google Maps to your Site

February 24, 2007 Comment on this post [3] Posted in ASP.NET | Javascript | Musings
Sponsored By

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, let's just say you have an existing XML format:

start="Feb 13 2007 09:00:00 GMT"
end="Feb 16 2007 09:00:00 GMT"
title="Some Window of Time">
Be sure to pay attention!</event>

start="Feb 4 2007 10:04:00 GMT-0500"
title="Chipotle $4.58"
lat="45.483484" lng="-122.800026" >Food</event>

start="Feb 7 2007 16:00:00 GMT-0500"
title="Jack in the Box $9.44"
lat="45.493112" lng="-122.805862"


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=

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() {
   // 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>';
   return marker;

  // This function picks up the click and opens the corresponding info window
  function myclick(i) {

  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GSmallMapControl());
  //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();"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);

  // 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;
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

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.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
February 24, 2007 15:37
February 24, 2007 18:53
I'm a big fan of Google Maps. I built Address Fix with it. I also did a side project where I refreshed the markers if there were any status changes (color of the marker changed).

One thing I found was that if you wanted to product a ton of markers, you're better off separating the map from the markers. With about 700 markers, you're already seeing the lag with your map. It's pretty easy to do... you can capture the x/y location of the markers when they add it and save that in your db. Then you can load divs instead all over the map with the markers they chose. It will load in seconds rather than minutes.

There are also some other marker tools out there that will 'aggregate' the markers if there in a certain perimeter. When you zoom in, they get more refined.

Fun Stuff!
April 11, 2007 9:58
Great, I also have interest like this map guestbook.

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.