Display Current Date & Time Based On Location using Google Map Geocode and Timezone API

Here I am going to show you a simple jQuery plugin that attaches a clock to a <div> or <span>. The plugin makes use of Google Maps’ Geocode and Timezone APIs to show the time in the given location. You only need to create google api key and include remoteTime.js and pass following parameter key, location name and date format and it’ll return Current Date & Time as given location.
current-date-time-location-based



Display Current Date & Time Based On Location using Google Map Geocode and Timezone API

Follow below steps to integrate Display Current Date & Time Based On Location using Google Map Geocode and Timezone API.

Libraries

Include remoteTime.js on page page after jquery core library because this plugin dependent on jquery library.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="remoteTime.js"></script>

HTML

Create a container div/span html element to display the local time of any city.

<h2>The time in Los Angeles is <span id="LATime" style="color:green">loading..</span>.</h2>
<h2>It is <span id="DCTime" style="color:green">loading..</span> in Washington DC.</h2>



JS

Call remoteTime() function and on selected id and pass api key, location of required date format.

<script>
$("#LATime").remoteTime({
				key: "Google_API_Key",
				location: "Los Angeles, California",
				format: "m/d/y g:i:s a"
			});
</script>
<script>
$("#DCTime").remoteTime({
				key: "Google_API_Key",
				location: "washington dc",
				format: "l, F jS, g:i A"
			});
</script>

Where There are only 3 parameters, all passed as properties of a single object, all required.
key A Google API key with both geocode and timezone services enabled.
location A string representing a location. Can be an address or zip code or just about anything. Google’s best guess will be used, so less ambiguous locations (addresses) are preferred.
format A string representing the format to be used to display the time. See the Formatting section below.

See live demo and download source code.

DEMO | DOWNLOAD



The following characters are recognized in the format parameter string:

format character Description Example returned values
Day
d Day of the month, 2 digits with leading zeros 01 to 31
D A textual representation of a day, three letters Mon through Sun
j Day of the month without leading zeros 1 to 31
l (lowercase ‘L’) A full textual representation of the day of the week Sunday through Saturday
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or th. Works well with j
w Numeric representation of the day of the week 0 (for Sunday) through 6 (for Saturday)
Month
F A full textual representation of a month, such as January or March January through December
m Numeric representation of a month, with leading zeros 01 through 12
M A short textual representation of a month, three letters Jan through Dec
n Numeric representation of a month, without leading zeros 1 through 12
Year
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03
Time
a Lowercase Ante meridiem and Post meridiem am or pm
A Uppercase Ante meridiem and Post meridiem AM or PM
g 12-hour format of an hour without leading zeros 1 through 12
G 24-hour format of an hour without leading zeros 0 through 23
h 12-hour format of an hour with leading zeros 01 through 12
H 24-hour format of an hour with leading zeros 00 through 23
i Minutes with leading zeros 00 to 59
s Seconds, with leading zeros 00 through 59

See official github repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.