1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<div class="timebox">Tokyo Time: <span id="tokyotime"></span></div>

<div class="timebox">LA Time: <span id="latime"></span></div>

<div class="timebox">Toronto Time: <span id="torontotime"></span></div>

<div class="timebox">Paris Time: <span id="paristime"></span></div>

<script>

var apikey = 'YOUR_API_KEY_HERE'

var daysofweek = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']

function currentlocaltime(divid, loc){

    var container = document.getElementById(divid)

    var targetDate = new Date() // Current date/time of user computer

    var timestamp = targetDate.getTime()/1000 + targetDate.getTimezoneOffset() * 60 // Current UTC date/time expressed as seconds since midnight, January 1, 1970 UTC

    var apicall = 'https://maps.googleapis.com/maps/api/timezone/json?location=' + loc + '×tamp=' + timestamp + '&key=' + apikey

    var xhr = new XMLHttpRequest() // create new XMLHttpRequest2 object

    xhr.open('GET', apicall) // open GET request

    xhr.onload = function(){

        if (xhr.status === 200){ // if Ajax request successful

            var output = JSON.parse(xhr.responseText) // convert returned JSON string to JSON object

            console.log(output.status) // log API return status for debugging purposes

            if (output.status == 'OK'){ // if API reports everything was returned successfully

                var offsets = output.dstOffset * 1000 + output.rawOffset * 1000 // get DST and time zone offsets in milliseconds

                var localdate = new Date(timestamp * 1000 + offsets) // Date object containing current time of target location

                var refreshDate = new Date() // get current date again to calculate time elapsed between targetDate and now

                var millisecondselapsed = refreshDate - targetDate // get amount of time elapsed between targetDate and now

                localdate.setMilliseconds(localdate.getMilliseconds()+ millisecondselapsed) // update localdate to account for any time elapsed

                setInterval(function(){

                    localdate.setSeconds(localdate.getSeconds()+1)

                    container.innerHTML = localdate.toLocaleTimeString() + ' (' + daysofweek[ localdate.getDay() ] + ')'

                }, 1000)

            }

        }

        else{

            alert('Request failed.  Returned status of ' + xhr.status)

        }

    }

    xhr.send() // send request

}

currentlocaltime('tokyotime', '35.731252, 139.730291')

currentlocaltime('latime', '34.052046, -118.259335')

currentlocaltime('torontotime', '43.656090, -79.387679')

currentlocaltime('paristime', '48.856805, 2.348242')

</script>