WordPress.org

Make WordPress Core

Ticket #10324: timezone-demo.html

File timezone-demo.html, 2.2 KB (added by Otto42, 6 years ago)

Timezone Javascript demo

Line 
1<html>
2<head><title>Timezone test</title></head>
3<body>
4
5<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
6<script type="text/javascript">
7var apiKey = 'ABQIAAAAEB8M0z0XzjDPxdIQcbgewRSwCqCNciqQYJG-ZMSDUJkX9wEXmhTqeJNbCmDMet9ylttQxc4zmu_3_Q';
8</script>
9Autodetect using Google ClientLocation and Geonames <br />
10<button id="auto_button">Detect my Timezone from IP</button><br />
11Your timezone is: <span id="output"></span>
12<script type="text/javascript" src="http://www.google.com/jsapi?key="+apiKey></script>
13<script type="text/javascript">
14$('#auto_button').click(function() {
15        if (google.loader.ClientLocation) {
16                $('#output').text('Searching Geonames webservice...');
17                $.getJSON('http://ws.geonames.org/timezoneJSON?lat='+google.loader.ClientLocation.latitude+'&lng='+google.loader.ClientLocation.longitude+'&callback=?',
18                        function(data){
19                                $('#output').text(data.timezoneId);
20                        }
21                );
22        } else {
23                $('#output').text('Google has no idea where you are.. Sorry.');
24        }
25});
26</script>
27
28<br /><br />
29
30Manual Lookup<br />
31
32Enter a City here: <input id="detect_input"></input><br />
33<button id="detect_button">Find my Timezone</button><br />
34Your timezone is: <span id="detect_output">(result)</span><br />
35
36<script type="text/javascript">
37
38$('#detect_button').click(function () {
39        var input = $('#detect_input').val();
40        $('#detect_output').text('Asking Google where '+input+' is...');
41        if (input) {
42                $.getJSON("http://maps.google.com/maps/geo?q="+input+"&output=json&oe=utf8&sensor=false&key="+apiKey+"&callback=?",
43                        function(data, status) {
44                                if (data.Placemark[0].Point) {
45                                        $('#detect_output').text('Searching Geonames webservice...');
46                                        $.getJSON('http://ws.geonames.org/timezoneJSON?lat='+data.Placemark[0].Point.coordinates[1]+'&lng='+data.Placemark[0].Point.coordinates[0]+'&callback=?',
47                                                function(data){
48                                                        $('#detect_output').text(data.timezoneId);
49                                                }
50                                        );
51                                } else {
52                                        $('#detect_output').text('Google has no idea where that is.. Sorry.');
53                                }
54                        });
55        } else {
56                $('#detect_output').text('You should really type something in first.');
57        }
58});
59
60</script>
61
62
63</body>
64</html>