Scott Hanselman's Computer Zen - Google GuestMap 2007 and adding Google Maps to your Site

« The Programmer Phases of Grief: or Langu... | Main | Gerwiiatrics - Old People play the Wii »

Google GuestMap 2007 and adding Google Maps to your Site

Posted 2007-02-23 01:13 PM in ASP.NET | Javascript | Musings.

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.

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!

Saturday, February 24, 2007 3:37:25 AM (Pacific Standard Time, UTC-08:00)

Nice

Chirag

Saturday, February 24, 2007 6:53:12 AM (Pacific Standard Time, UTC-08:00)

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!
Doug