Events in and out of Google Maps

Check out how to get events from a Google Maps object to the rest of test webpage.

Fordrevet på ubestemt tid

Situationen omkring atomkraftværket Fukushima 1 er stadig meget kritisk, og den øgede stråling har betydet, at mange indbyggere i området er blevet evakueret.

Minderne fra Tjernobyl trænger sig på, for der er endnu ingen, der ved, hvornår området igen er sikkert at bo i.

Klik på evakueringszonerne for at læse nærmere om, hvad det betyder at bo inden for henholdvis 20 og 30 km fra atomkraftværket.

78.000 uden hjem og tidshorisont

Omkring 78.000 japanere, som boede inden for 20 km af Fukushima 1-værket, er blevet evakueret.

Det er endnu uvist, hvornår de igen kan komme tilbage til deres hjem, men de bliver ikke i løbet af de første dage eller uger, forklarer de japanske myndigheder.

62.000 påvirket

Der bor 62.000 japanere mellem 20 og 30 km fra atomkraftværket. De er blevet opfordret til at forlade området af de japanske myndigheder. Forlader de ikke området, bør de holde sig indendøre.

Evakueringszonen omkring Tjernobylværket var også 30 km. Inden for den grænse er der – 25 år efter – stadig næsten mennesketomt.


Using circles and events in Google Maps – the nerdy part

Here’s a little something I did after reading about the contaminated areas around the Fukushima Dai-ichi Power Plant. The danish newspaper Information has a piece here, CNN got a piece here.

The basic idea is to use the maps object “circle” to quickly put a clickable element on the map. Clicking the the circle will then of course present the relevant information. In this example I use JQuery to show() and hide() the corresponding information.

Effects – It’s a usability thing

To make the graphic seem responsive to the user I’ve added some small effects. This is quite important as it bring life to the graphic, I wanna see that something happens when I click something.

In this example, two effects are applied when clicking either of the circles. 1. The width of the line at the outer rim of the clicked circle goes from 1 pixel to 2 pixels. 2. The font-weigth of the corresponding list item goes bold.

The same thing happens when you click to list items, except for “Overblik”, which just puts both the circles line width to it’s standard of 1 pixel.

Make the map and site “listen” to each other

I won’t go in details about events in this post. You can get a taste of it here: HTML Events.

For those of you familiar with events fired in the standard HTML DOM, I’ll just point you in the right direction for making the map respond to DOM events and vice versa.

Google Maps has it’s own object model inside it. The map itself and various objects like polygons and so on can fire events like you’re used to from the HTML DOM. That makes the Google Map an powerful anchor for your dynamic website.

The information of events can also flow the opposite way by adding a DOM Listener to the map. In this example I use that feature for listening to clicks on the menu items, which in turn makes the corresponding circle respond by increasing it’s line width to 2 pixels. You can find all about event handling in Google Maps here: Google Maps JavaScript API V3 Events.

End note

First of all, if you’ve been reading this far, thank you! This is nerdy stuff, but the result are worth it.

Next of, the map seems to have issues when embedded in WordPress. If you take a look at the zoom status bar, it’s pretty much gone. Also, the satellite images doesn’t load right when you’re zoomed in. I’m not quite sure what to do about it.

That’s it, thanks for reading! Question and comments are more than welcome, of course.