A Google Maps (or OpenLayers) + Olson Time Zones mashup to do a timezone picker
Python JavaScript HTML Shell
Latest commit b57a711 Oct 8, 2016 @andrewlin12 andrewlin12 committed on GitHub Merge pull request #19 from sdomino/master
updated to work with jquery ~3


Live demos


  • jQuery
  • Google Maps Javascript API v3 or OpenLayers


See gmaps_example.html and openlayers_example.html



To use in your site, extract tz_json.tgz to a web-accessible location on your server and pass in the path as the jsonRootUrl option


  • fillColor: the color of the fill of the rendered timezones (default '#ffcccc')
  • fillOpacity: the opacity of the outline of rendered timezones (default 0.5)
  • initialLat: the initial latitude for the center point of the map (default 0)
  • initialLng: the initial longitude for the center point of the map (default 0)
  • initialZoom: the initial zoom level of the map (1-20, default to 2, 1 is most zoomed out)
  • jsonRootUrl: the default root URL for the JSON data files (default '/tz_json/')
  • strokeColor: the color of the outline of rendered timezones (default '#ff0000')
  • strokeWeight: the width of the outline of rendered timezones (default 2)
  • strokeOpacity: the opacity of the outline of rendered timezones (default 0.7)
  • onHover: callback when a timezone is hovered. Parameters: utcOffset (in minutes), tzNames (array of strings)
  • onReady: callback when all the data files are loaded
  • onSelected: callback when a timezone is selected via the infowindow. Parameters: olsonName, utcOffset (in minutes), tzName (eg. EST, GMT)
  • useOpenLayers: use OpenLayers instead of Google maps


  • showInfoWindow(htmlString): show an infoWindow for the current selected region. Takes an HTML string as a parameter
  • hideInfoWindow(): hide it
  • setDate(Date): set the "relative" date for the picker for proper timezone names (eg. EST vs EDT)
  • selectZone(olsonName): programmatically select a timezone

CSS Classes

  • timezone-picker-infowindow: the main content container for the infowindow
  • NOTE: if you are using Twitter Bootstrap and Google maps or OpenLayers, you may need something like
#zonepicker img {
  max-width: none;
to prevent distortion of your map controls (thanks michaelahlers!)

For Data File Generation

You do not need to do all of the steps mentioned below if you're going to use tz_json.tgz (the timezone data JSON files are in there already).

This plugin uses a bunch of timezone data files on a web server.

  • bounding_boxes.json: an array of bounding boxes for each timezone (for hit testing)
  • hover_regions.json: an array of polygons representing hover regions for each timezone
  • polygons/*.json: polygon definitions for each timezone


  • Python 2.6+
  • libgeos-dev (sudo apt-get install libgeos-dev) (for Mac OS, install this: http://trac.osgeo.org/geos/)
  • pip (sudo easy_install pip)
  • shapely (sudo pip install shapely)
  • pytz (sudo pip install pytz)

To Generate all timezone data JSON files