Custom Google Map Roundup

Google Maps has been getting a lot of customization lately. I'm beginning to wonder if a more organized approach is going to be needed, before this spirals out of control (or grinds to a halt under its own weight). Here are some ideas that I hope will get people thinking and, maybe, working, to build a better, more extensible, more usable system of custom maps and data overlays. Of course, if we go too far down this path, we'll simply be creating a custom GIS tool, but there are worse things, right?

There are now a lot of custom maps being interfaced with the Google Maps system. Here's a quick list of the maps I've seen so far:

Custom Maps with Custom Servers

Integrating Other Map Systems

Overlaying Markers on Regular Map

Other Overlays (Data Displays, not really Maps)

Drop me a note if you see others that aren't on the list, and I'll try to keep this up-to-date!

Making This Better

My Google Maps page is rapidly getting cluttered with all kinds of alternate map sources, some of which are only useful in very specific circumstances (Subway maps, for example). It doesn't make much sense for all kinds of map options to be visible where they're not useful, for one thing, and for another, we're shortly going to have all kinds of people running their own image tile servers. What we need is a central clearinghouse for this data and the scripts that describe getting to it. So, in no particular order, some thoughts about what'd be great to see done, by the community and Google:

  1. Build a central server to provide map referrals - Basically, just a list of map types and the Javascript routines to implement them. Maybe with some additional information, ala an Extension Room sort of thing. Maybe at sourceforge or mygmaps.com, or even at Google.
  2. Modify Google viewer to automatically search for appropriate maps - Perhaps the first time the Google Maps viewer initializes (from here out I'm just gonna say "GMaps," okay?), it asks the server for a list of maps relevant to the current display. If you're looking, for example, at the entire US, it'll ask for any maps that provide coverage for maybe more than half of the country. As you move downwards, it'll re-ask periodically, maybe every other zoom level or whenever you've moved too far away from your last source. Or maybe it can just grab the entire list at the beginning of the session and be done with it (unless we end up with thousands of map services).
  3. Improve the interface to handle lots of map types - Perhaps only "official" Google maps should be listed in the top of the map window (where all the map types currently appear), and other, local, 3rd party maps could be accessed in a pull-down menu. Maybe people with GMail accounts (and thus Google.com customizations) could even select some maps to always ignore, etc.
  4. Develop better overlay maps - The CTA and MBTA maps are way cool, but lack some of the detail present in the regular maps. And sometimes it helps to be able to see what's around a station, in the satellite photo. On the other hand, the DC and NYC subway maps give you all that detail, but you lose the subway lines connecting all the stations together. What's needed is a better way to overlay more complicated graphics on the Google map. Perhaps some kind of SVG support could be used, though I suspect that'd be browser dependent. The "polyline" format used for the driving directions has been decoded, but I haven't seen anyone working with it. Using that, with different colors and such, to connect subway stations using non-Google markers, would give a very useful overlay, viewable at all zoom levels.
  5. Support for different markers - GMaps is currently hard-coded to use the standard Google marker. We've been able to force a way around that, but it's not easy and still requires the same size image. It'd be good to create other markers (like the numbered circles used on the CTA map) that don't have "clickable" area around them and don't cast shadows.
  6. Live, bounded data retrieval - Currently, GMaps fetches all the points to be displayed at once. I'm not sure how it then handles the points but it does seem that when I plot a few hundred of them, my map gets very slow. It'd be nice if the system could periodically fetch points from a server, giving the server the map's current boundaries and zoom level. The server could then respond with a list of only those points on the current map, and even, taking into account the zoom level, combine some points into single (perhaps larger) marker types.
  7. Support for local site customization - Finally, it'd be great if one could simply include the GMaps widget, with an immediate application of a custom map or overlay, without having to go through the hoops that the gmaps-standalone system requires. This would be great for very specialized local maps or overlays, such as the earthquake map or a city tourism site.

Some of these would be fairly easy to do. Some would be harder, and would require extensive modifications to the GMaps code. But I really think that it'd leave us with an incredibly powerful system, even if it has to eventually be divorced from Google proper. Sort of a fork. Of course, the Google code isn't public domain, and so we can only take this hacking so far. But if we're able to come up with some great applications on our own, especially open methods of communicating maps and overlays, then maybe it'll get integrated into the official Google system eventually. (or, more likely, reimplemented by Google faster and better).

I can think of some possible uses for this technology that I haven't seen done yet:

  • Better subway maps, overlaid on all map types at all zoom levels (showing actual transit lines, not just stations)
  • Park maps, hiking trails, bike trails
  • Property maps (probably best as an overlay)
  • Educational annotation - imagine an overlay on, say, Cape Canaveral giving history for each of the launch pads
  • Environmental, climate, and weather map overlays
  • Political and other overlays - voting districts, census data, etc.

So am I just being over-idealistic, or is this a good idea? Where do we start?

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Vancouver transit map

I've put together a mashup of my own:

http://david.enigmati.ca/maps/transit.html

This transit map actually uses the new API and polylines to render the subway routes. The markers are still quite shoddy, but if I have a chance to work on it a bit more, I'll clean things up a bit.

GPX + Digital Photos + Google Map

I use the google map api to merge photos taken in route with gpx locations on the trail I navigated. The results is parsable GPX file complete with pictures of a given area on the map.

http://www.ramsays.us/trails/tracks-overview.asp

Wow.

Most excellent.

Any chance you can document how you did this?

WiGLE and Google maps

I just finished this mashup:

http://wigle.rustyredwagon.com

which combines WiGLE data with google maps

Another earthquake gmap

Hi, here another earthquake+gmaps

http://kharkoma.homelinux.com/gmaps/gmapeq.html

Bye

Weather on Google Maps

Here's one I just made for showing personal weather stations on a google map. shows temperature, wind speed, web cams, etc...
http://www.myjavaserver.com/~weathermaps

custom data in GM

nice writeups, they were quite helpful.

I've got a sample on my blog showing custom map tiles that are created in ESRI's ArcMap. It should allow you to make any type of map you want and then plug it into GM as a custom spec.

http://www.spatialdatalogic.com/CS/blogs/brian_flood/

again, thx for the in depth info
brian

Another example of a Custom Google Map

Here's one:

http://www.rustyredwagon.com/sexoffender

It plots sex offenders by zipcode and you can click on their names to get the actual details of the offense. It currently only does the state of Texas.

Another data overlay

As an addition to your roundup list, I'd like to submit a site I've developed, based on the gmaps standalone code. See http://www.satellitefriendly.com/search - I know, the map you see on the first page isn't from Google (more about that in a minute), but the subsequent ones are.

The reason the first map is overlaid on a static gif is really the "bounded data retrieval" problem. It takes too long to apply 1000+ data points, plus some areas of the map are just way too crowded. For now, I've done my own custom shading routine. I've given some thought to addressing this with gmaps, and think it can be accomplished in the JS, but haven't had time to try it yet.

Nice writeup, btw!

Yahoo Traffic on Google Maps

David,

Following our discussion on custom markers, and a post by John Resig on Yahoo Traffic RSS feeds, I made a proof of concept site based on gmaps-standalone that shows Yahoo Traffic data integrated into Google Maps:

http://supergreg.hopto.org/google-yahoo/

Cheers,

Greg

Google Maps and Blog Locations...

Here's another example of a tool built on top of Google Maps:

http://www.blogwise.com/googlemaps/

Roundup

David, thanks for the thourough roundup!

I agree with you that the "load" of daily new customizations looks like a scattering effort. A central "customization" server could bring very interesting results (and build a community) - for example, by allowing folks not necessarily interested in hacking xml files to easily create custom maps (trivial javascript hacking permitted me to make a double-clicking Gmap that popped a dialog asking to describe the location, while taking note of the longitude & latitude - add in some client-server communication, and an imperceptible reload of the xml map file, and you have an easy-as-pie map annotation tool)

mygmaps.com is a very interesting accomplishment in this direction - add in the necessary code to make routes, and we may have an almost completely customizable solution.

About the subway overlays, I'm not absolutely certain either that the current way is the best one to present the stations, lines, etc. Admittedly, the current "map line" (generated by http://www.google.com/maplinedraw ) is not very flexible - no color selection (adding a "color" GET argument didn't help, although there may be an other argument name hidden in the Google code, if any...), no way to affix a label (text or graphic) to the line, etc. Perhaps if an alternative 'maplinedraw', compatible with the "polyline format" but offering additional functionality, would javascriptingly-replace the default one, metropolitan transport maps (which would unfortunately have to be "recreated" from scratch (or possibly from GIS data, although that would require cooperation from various authorities, and a probably painstaking conversion), in contrast to the NYC/DC subway maps, that were integrated without having to worry about the individual stations' locations) could become an integral part of Google Maps. (sorry for the excessive parenthesizing).

About your wish for different markers, this has been already done: see http://69.90.152.144/collab/GoogleMapsHacks under "Greasemonkey script to follow the displayed route using a custom marker" (use the "updated script" -- some of the examples on the aforementioned wiki page are out of date with the latest GMaps code)

Cheers,

Greg
lepetitg[0x40]gmail.com

Markers - only halfway there

Thanks for the response... I agree that the current capabilities just aren't there for overlays, but I wouldn't be surprised if something like that got added eventually.

As for markers, yes, you can replace the markers, but it's my understanding that:

  • they need to be the same size/shape as the standard google marker
  • they end up casting the standard marker's shadow
  • even if you make most of the marker transparent, the "rest" of the marker is still clickable

I've been able to hack away the shadow, in the standalone mode, but it's not something that can be controlled by the data in the XML file. Nor can I change the expected size, so the cache maps I've been toying with (that use little 10x10 pixel markers) have all sorts of overlapping click zones, which gets messy in crowded areas.

Note that I'm only talking about having the marker / shadow be controlled by a custom-provided XML file. I think I have seen an injected .js fragment that can change the shadow and size of a marker, but I'm not sure that'd be too easy to integrate with a dataset calling for a dozen different marker styles.

david.

Markers with class

David,

Your reply led me to some searching through the GMaps JavaScript code - it's true that the "marker classes", i.e. the "class" argument of the elements, are hardcoded (there are declarations for two classes - "local" (the default one) and "noicon"). Nevertheless, by inserting the following line (a duplicate of the "local" marker class declaration) at the top of the _initStandAlone function ( gmaps-standalone.js file)...

_IconClass.load(new _IconClass("newiconclass",20,34,new p(9,34),new p(9,2),new p(17,23),s+"shadow50.png",37,sc));

... it was now possible to specify...

in the source XML file. The arguments to _IconClass are: name, width, height, pointCoord, infoTipCoord, shadowTipCoord, shadowURL, shadowWidth, imageMapArray.

The simplest approach I see to exploit this to get custom markers would be to include custom tags in the XML file, and pre-process them in the _load function ( gmaps-original-5.js file).

Greg

a bit more on markers with class

For more details on this, and an example, check out

http://www.gnik.com/wiki/GoogleMaps

and see the "Custom Icons (for real)" section. In particular, the imageMapArray is key as it defines a mask to make only part of the image clickable.

(edit)

The XML code was eaten up verbatim ;-) It should have read:

... it was now possible to specify...

<icon image="http://maps.google.com/mapfiles/markerA.png" class="newiconclass"/>

in the source XML file.