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.
<br><a>Link to State Game</a><br></a><br>
P.S. My high scores are 20, 12, and 10, for easy, medium, and hard. Can you beat that? 
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.
You must log in to post a comment.