WebsitesCategory

A JavaScript time zone lookup example using APIs

2 min read
Cameron Laird

As eye-catching as an isolated graphic or even a live map on a web page can be, real value comes from integrating specific business data with the capabilities of an API.

APIs leverage, or multiply, the value of other business data an organization already possesses.

For example, you can use the Google Maps API — even when no maps are in sight — to perform interesting functions. In setting up a teleconference or an online help session for a client, for instance, it can be crucial to confirm which time zones are in play for participants. You can use an API to do this.

It can be distracting, time-consuming and error-prone to ask users for their time zone; an API can simply answer the question. A number of things streamline the process:

  • If an end-user’s clock is correctly configured, the browser Date object supports a getTimezoneOffset() method that reports the difference between the end-user’s time zone and UTC (the Coordinated Universal Time reference).
  • HTML5 geolocation methods give a user’s physical location, subject to privacy constraints.
  • Several services support real-time lookup of geographic location based on IP address.

Given geographic details like these, one capability of the Google Maps API is to look up time zone. This example illustrates its use:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">
    var url = "https://maps.googleapis.com/maps/api/timezone/json?location=37.3711, -122.0375&timestamp=" + (Math.round((new Date().getTime()) / 1000)).toString() + "&sensor=false";
    $.ajax({
      url: url,
    }).done(function(response) {
      alert("The timezone for Sunnyvale, CA, is " + response.timeZoneName +
        ".");
    });

<body>
  
<p>

<p>
</script>