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.
Next, I created KML output by clicking on the KML link within MyMaps, and converted the output into an array of GLatLngs using a
PHP script. I saved this array into its own JavaScript file.
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? ;)
