Remember way back in the 90s when every website's front page included a clickable image map? Those were good times, and I'm always a fan of bringing back good times. When a developer suggested in the forum that invisible clickable
GPolygons could be used to create a pseudo image map, I jumped at the opportunity to try it out.
To start, I drew simple borders on U.S. states using the fabulous polygon creation tools in Google My Maps. When I was finished, I had a MyMap of the 48 continental U.S. states in outline.
Finally, I created my first image map map (image map²?). I chose to pop up info windows when the user clicks a state, but you could also use
window.location.href to bring the user to a new page, old school style.
After proving that this technique worked, I decided to take it a step further. I'm a bi-coastal girl (CA/NY) and I tend to have a very hazy knowledge of all the states in-between. I used the now-clickable states to create a multi-level educational game which prompts you with a state, and rewards you when you correctly click on that state. The easy level uses
G_NORMAL_MAP with invisible polys, the medium level uses
G_SATELLITE_MAP with outlined polys, and the hard (extreme!) level uses
G_SATELLITE_MAP with invisible polys. Try it out below!
Warning: this game may make you hate the existence of such tiny states as Rhode Island, Delaware, etc.
P.S. My high scores are 20, 12, and 10, for easy, medium, and hard. Can you beat that? ;)