Home > Visualization > Google Earth 5, World Time Zone Clock - Javascript and KML

Google Earth 5, World Time Zone Clock - Javascript and KML

February 5th, 2009

World Time Zone Clock in Google Earth 5

World Time Zone Clock in Google Earth 5

Here’s a KML and Javascript(!) hack for the new Google Earth 5.

It overlays a time zone map and allows you to click anywhere on the globe to see a running clock with the current time for that location.

Grab the KML file here:

World Clock

This uses normal KML to display a balloon when a polygon is clicked. Each balloon description has its own bit of Javascript to automatically calculate and display the time for the associated time zone.

More Info
In addition to running javascript, this hooks into a couple of other implementation changes in the new GE 5.

  • Polygons are now directly clickable. Previously you had to click on them in combination with a key press to make their description bubbles appear.
  • Stylemap highlight styles are triggered by mouseovers on polygons and lines instead of just placemark icons.

The polygons in this file are drawn from Valery’s KML Timezone map, posted on the Keyhole BBS a few years ago.

Related posts:

  1. KML ZIP Scribble Map
  2. UK and Ireland Flight Maps
  3. #uksnow Twitter Animation - Google Earth 5
  4. When two satellites collide, in Google Earth
  5. Google Earth 5.0

, , , ,

  1. Pål Johansen
    February 7th, 2009 at 14:00 | #1

    Hi
    There is an error in you KML file
    tesselate is mispelled and should be spelled tessellate.

    Other than that, thanks for excellent work. Just what I needed :)

  2. February 7th, 2009 at 18:29 | #2

    Pål, thanks for the debug. It’s fixed now.

  3. Noisette
    February 9th, 2009 at 22:44 | #3

    This is great! Thank you, I’ve long wished something like this was available, and now it is :-)

  4. February 15th, 2009 at 10:26 | #4

    If you want, you can embed this addon on Ge Plugin:

    http://www.videomap.it/kml/videomap.kmz

    6000 and plus geotagged videos from Videomap community

    city place of interest nature etc..

  5. Doctore
    February 21st, 2009 at 16:21 | #5

    Hi i have a problem!!

    I have put your javascript-code in one “KML Interactive exsample” from google:
    http://kml-samples.googlecode.com/svn/trunk/interactive/index.html

    I modify the Polygons-Absolute Example.

    I put this Block:
    <![CDATA[

    var int=self.setInterval("tick()",50);
    function tick(){
    document.getElementById("clock").innerHTML=calc(-12);
    }
    function calc(offset) {
    d = new Date();
    utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    nd = new Date(utc + (3600000*offset));
    return nd.toLocaleString();
    }

    ]]>

    in the Placemark:

    Absolute test
    <![CDATA[

    var int=self.setInterval("tick()",50);
    function tick(){
    document.getElementById("clock").innerHTML=calc(-12);
    }
    function calc(offset) {
    d = new Date();
    utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    nd = new Date(utc + (3600000*offset));
    return nd.toLocaleString();
    }

    ]]>
    1
    #transBluePoly

    absolute

    -112.3372510731295,36.14888505105317,1784
    -112.3356128688403,36.14781540589019,1784
    -112.3368169371048,36.14658677734382,1784
    -112.3384408457543,36.14762778914076,1784
    -112.3372510731295,36.14888505105317,1784

    1

    but it dosnt work.

    wat do i wrong?

  6. February 23rd, 2009 at 01:58 | #6

    @Doctore - Nothing. Unfortunately it’s just a security restriction in the browser plugin. By default Javascript is blocked from running in balloons. I don’t think there’s a workaround for the KML sampler

    If you’re writing your own plug-in application, you can get a round the problem with this technique:
    http://earth-api-samples.googlecode.com/svn/trunk/examples/balloon-youtube.html

  7. Doctore
    February 28th, 2009 at 15:08 | #7

    but if i call yuor “World Clock”.kml - script, it works.

  8. Anshul
    March 1st, 2009 at 13:07 | #8

    Fantastic, I needed it desperately as I work with different places around the world. Can you display the name of city/state/country on the pointer. Sorry if I am asking for too much ;-) you spoilt. Its a very good utility you made. Keep up the good work. Cheers!

  9. March 1st, 2009 at 20:01 | #9

    @Anshul - Thanks! Adding stuff to the mouse pointer isn’t possible in GE, unfortunately.

  10. Wayne D.
    March 6th, 2009 at 03:28 | #10

    Times in Barnaul Russia are off an hour???

  11. Steve V
    March 17th, 2009 at 13:14 | #11

    Is there no way to adjust the base clock??? I see there is an issue with daylight savings time…. it says 8:00 when it’s 9:00 here. Anyway to change this? Nothing in properties.

  12. Jochen
    March 22nd, 2009 at 18:10 | #12

    yeah, I also noticed that the time is 1 hour off. I checked and according to the Internet, it’s 14.05 at the East Coast (New York) but your kml file shows me it’s 13.05. And I know, 14.05 is correct, because the NASCAR Race at Bristol, Tn (same timezone as NY) starts right now, and the starting time is set for 14.05 not 13.05. My local time here in Germany is 19.05

    However: I know, in the USA, they already use summer time since 2 weeks. In Germany, summer time starts next weekend, so maybe that is the reason why there is this 1 hour delay.

    But let me tell you: I am really glad that I found your site, I have been searching for a world clock since quite some time.

  13. Jochen
    April 5th, 2009 at 16:57 | #13

    Ok, so in the meantime, summer time is also here in Germany (since 1 week) but still, it doesn’t work correct.

    I just checked and my computer clock says it’s 18.57, but when I click on my location in GE, it says the time is 17.57.

    So, is the time setting not based on the local computer time ?

  14. July 12th, 2009 at 14:46 | #14

    It’s incorrect: Krasnoyarsk and Novosibirsk in the real world have different zones. But on this map - single zone.

  15. Dan
    August 2nd, 2009 at 11:59 | #15

    Thanks it’s very useful.
    You can also use http://www.worldtimeengine.com to get the current time around the world and see the time differences.

  16. Supriya Tenany
    September 15th, 2009 at 07:09 | #16

    Hi,

    I work on Adobe Flex 3.0 and I do not understand how to use the KML file. Also, can this be used with google maps?

  17. October 26th, 2009 at 00:14 | #17

    For those interested in having google implement *real* timezone support in the google calendar please visit here and add your voice:

    http://www.google.com/support/forum/p/Calendar/thread?tid=659883e8e50d4fd8&hl=en

  18. Steve
    November 11th, 2009 at 13:36 | #18

    OK,It works fine, but how do I get the overlay to go away? Thanks.

  19. matt fiocchi
    January 9th, 2011 at 21:04 | #19

    Great overlay! I’m living in western Alaska and wanted a way to show people how the sun could rise well after eleven and set not until close to five. This is perfect, thanks!

  1. April 16th, 2009 at 11:14 | #1