Making the Most of Maps:
Tips & Tricks for better UI and UX
Pamela Fox (Google)

You can't just throw your data
on a map and call it a day.
Your users deserve more than
that.

The Ubiquitous Red Marker
Just say no to G_DEFAULT_ICON: God invented Photoshop
for a reason.
Easy way: Re-color our marker, and just change .image property of
G_DEFAULT_ICON
http://code.google.com/apis/maps/documentation/examples/icon-simple.html
Hard way: Create your custom icon (image, shadow, sizing) from scratch.
http://econym.googlepages.com/custom.htm
http://www.viewletcentral.com/vc/viewlet.html?id=108110306

Markers have a size, shape, and color: Use 'em!
The more I can learn without
ever having to click on a marker,
the better.
Ideas: Use shape for categories,
color for intensity values, size
for density values.
Just remember to include a
legend (GControl extension!) if
it's non-obvious what the
variations in icons mean.

Not all Markers Need to Stand on their Toes
Consider using stemless markers that lie flat against the
map. Remember to change GIcon.iconAnchor to be the point
at the center of the icon image.
I would learn more from glancing at this map if it used stemless markers. :(

Markers as Links: A Novel Concept?
Marker ADD: The disease whereby the sufferer clicks
markers at randoms, forgets what they've clicked, and then
just clicks endlessly in the hopes that at some point they'll
have probabilistically clicked them all.
Recommended treatment: The use of GMarker.setImage to
indicate the marker 'visited' state. Will relieve much of
sufferer's anxiety.
Example of link-like marker states:
http://esa.ilmari.googlepages.com/ZMarker2.htm

Information (Marker) Overload
Common question in forum: \"When I try to display 10,000
markers on a map, my browser freezes. What's wrong?\"
Common answer: \"You're trying to display 10,000 markers
on a map.\"
Do not: display more than 200 clickable markers on a map at
one time:
The browser will hate your website, and then the user will
hate your website too.
I'm fairly certain that there doesn't exist a user that will
actually click each of your 10,000 markers.
Do: use searching, filtering, marker management, and tile
layer overlays to help your user sift through your vast
database of geospatial information.
http://www.weatherbonk.com/weather/index.jsp
http://findnearby.net/

The Neglected InfoWindow
It's called InfoWindow for a reason: Put some damn info in
it!!
vs.
Ask yourself this question: Is the stuff in my map's
infowindows worth my user's click and the map's pan?
If answer is no, then use a tooltip approach (ELabel,
EBubble, PdMarker).

And Now for Something Completely Different ...
Imitation may be the highest form of flattery, but please -
feel free to *not* use the default map controls. The
GControl and GOverlay class are your friends.
No need to re-invent the wheel: Many of us have written
custom extensions that you can easily customize for your
site.

And Now for Something Completely Different... (Take our code!)
ExtMapTypeControl:
http://gmaps-utility-library.googlecode.com/svn/trunk/extmaptypecontrol/
ZoomControl:
http://gmaps-samples.googlecode.com/svn/trunk/demo/zoomcontrol.js
EBubble:
http://econym.googlepages.com/ebubble.htm
EWindow:
http://econym.googlepages.com/ewindows.htm
ExtInfoWindow:
http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/
Some of those used here:
http://gmaps-samples.googlecode.com/svn/trunk/demo/demo.html

It's Homework Time!
Visit: http://www.programmableweb.com/tag/mapping
Try out some map mashups. Actually try to use them.
Understand what it's like to try and find information on a map.
Bookmark your favorites. Bookmark your least favorite. Learn
from them. :)

Any Questions?