Google Web Maps
I've been working on a project that could benefit from an online mapping component, so I've been playing around with Google Maps. I'm not quite ready to unveil the project yet, but I do want to talk about what it takes to do the mapping portion - especially since the information out there is a bit scattered.
Basically, the Google Maps technology allows you to overlay your own information on top of a map. If you haven't seen it before, take a look at the link above, read the article in Wired, or take a look at a site like CheapGas. The things that you can do with this are pretty cool - you can also do the overlays on satellite maps, and generate routes as well.
I'd like to note up front that this is currently not officially supported by Google. Though I have heard discussions with Google employees who say that they're researching whether they can do a real API for this, they haven't yet, and they could change the details and/or discontinue the service at any time. So, with that out of the way, here's how it works...
There's a little component that runs in the browser and handles rendering the map. You give it a location to render in, and then an XML file that describes the information you want to overlay, the part of the map you want to show, etc. When you click on one of the points, the component locations the bit of XML that describes that point, extracts the "<info>" section, passes that off to an xsl for formatting, and then shows the result in a nice pop-up bubble. Pretty cool, and simple, to boot.
It did, however, take fair amount of time to get running. I relied heavily on the examples at Unofficial Google Maps Embedding How To, and I suggest you get them working on your server and then start modifying them. Trying to do both at the same time can only lead to heartbreak.
Now that I have the simple map working, I'm going to be modifying the info popup and looking at the advanced map (with sidebar).
Caveats/Warnings/Stupid things I did:
- There's an article in engadget that describes the process in a fair amount of detail. It is, unfortunately, wrong, because Google doesn't support the URL method any more. It's still worth a quick read.
- The xml and xsl files need to be on the same server as the HTML map page. If they aren't, things will also fail. I think this is also a change from the original behavior, so there may be information that doesn't mention this (the examples above do this correctly).
- If the xsl fails, your popup will not show up. If you're using a custom xsl file, like the examples do, make sure your XML conforms to their style exactly. I left out the embedded image tag for simplicity's sake, and spent a few hours figuring out that was why things weren't working. It's probably not a bad idea to apply the xsl to your XML separately to see if it works - you should be able to do this by adding something like "<?xml:stylesheet href="doc.xsl" type="text/xsl"?>" to an XML file containing an example of your <info> section. Don't quote me on this, however, I'm just starting to play around with xsl (yes, I know I'm behind the curve on that one).
- It's tempting to just cut and past the examples from IE to get the source. This works great for the source to the map page example. When you do it with the .xml and .xsl files, however, remember that if you select and cut the xml from IE, you get the all-tarted-up nicely-formatted XML, not the original XML source. If you paste that into your files, things don't work. You need to do a "view source" first, just the way you did to get the HTML, and then things are fine. I'm embarassed how long it took me to realize that I had done the wrong thing here.
- It may be caching on my ISP or on my browser, but when I update my xml file, I have to hit it directly from a browser, of the updated information doesn't make it when I refresh the map.