Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


JavaScript library for dynamic visualising of datasets as tables on Google Maps and full, well-commented example of it's work. Live example is here.

TMapsTable screenshot 0 TMapsTable screenshot 1

The usage briefly

In your HTML: <head>:
<script src=""></script>
<script src=""></script> <body>:
<div id="map"></div>

In your JavaScript:

// Arguments: ID of div
//   and GoogleMaps parameters dictionary
var container = new DataContainer("map", {
    zoom: 9,
    center: {lat: 55.7558, lng: 37.6173},
    mapTypeId: 'roadmap'

container.dataLoader = function (scale, borders) {
    ... call container.processData(some_data)

container.scaler = function getScale(zoom) {
    ... return some number

Structure of the data object:

data: {
	minLat: float,
	difLat: float,
	minLon: float,
	difLon: float,
	scale: int,
	table: [
		[value, value, ...],
		[value, value, ...],
	tocache: boolean

List of properties

You may specify the following properties of DataContainer:

  1. scaler(zoom) — translates GoogleMaps zoom to GMapsTable scale. Both are integer numbers.

  2. dataLoader(scale, borders) — is called when DataContainer needs new data. Must call DataContainer.processData(data).

borders is a JavaScript object with properties minlat, maxlat, minlon, maxlon — current bounds of Google Maps view with big padding on each side.

  1. tableBeforeInit(map, table, data) — is called when table element was created but not filled with rows and cells. map is a Google Maps object, table is an HTML element, and data is your data object for current scale. Here you can prepare your table, some variables with actual data object and current maps parameters.

  2. cellFormatter(td, val) — is called when table is generating. td is an HTML element, a cell of the table. val is a value from your data object. Here you can easily set output for multiple values or fill background according to some parameters.

  3. boundsChangedListener(zoom) — is called when Google Maps bounds are changed.

  4. minZoomLevel, maxZoomLevel — minimal and maximal zoom of Google Maps. Integer numbers ranged between 1 (world map) and 22 (street view).

Only the 1st and 2nd are necessary for DataContainer successful operation.