Classes

grid_clusterer

Interfaces

cluster_marker_click_event
cluster_marker_create_event
cluster_marker_update_event
data_point
grid_clusterer_options
grid_point
grid_point_marker_click_event
grid_point_marker_create_event
grid_point_marker_update_event
grid_tile

Types

data_point_key
cluster_marker_click_handler
cluster_marker_create_handler
cluster_marker_update_handler
grid_point_marker_click_handler
grid_point_marker_create_handler
grid_point_marker_update_handler
map_marker

Class: grid_clusterer

The grid clusterer may be used to manage a large number of data_points on a Google map.

Constructor

grid_clusterer( map: google.maps.Map, data_points: Array< data_point > = [ ], opts?: grid_clusterer_options )

Creates a grid clusterer object that is associated with the given map.

Arguments

map

Required. A google.maps.Map object.

data_points

Optional. An array of data_point objects. The data points are managed by the grid clusterer and are used to display cluster and grid point markers.

opts

Optional. A grid_clusterer_options object used to set the various configuration options used by the grid clusterer.

Example

The following is a complete example showing how to instantiate the grid clusterer with a small number of random data points.

IMPORTANT:

The "grid_clusterer.min.js" file is located in the grid_clusterer.zip archive, path: "/dist/js/"
Replace "[YOUR_API_KEY]" with your Google maps API key.

 
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Clusterer - Example</title>
<script src="grid_clusterer.min.js"></script>
<style>
body, html {
   background-color: #FFFFFF;
   margin: 0;
   padding: 8px;
}

.map_viewport {
   border: 1px solid #AAAAAA;
   height: 560px;
   width: 100%;
   position: relative;
   background: #EFEFEF;
   display: block;
   overflow: hidden;
   margin: 0;
   padding: 0;
}
</style>
</head>
<body>
<div id="mvp" class="map_viewport"></div>
<script>
   // Create random data points ...

   function data_points_create( data_points_count ) {

      const k_lat_min = 37.2428323;
      const k_lon_min = -122.118501;
      const k_lat_max = 37.417548;
      const k_lon_max = -121.731920;
         
      var i;
      var lat;
      var lat_span;
      var lon;
      var lon_span;

      var data_points = new Array( data_points_count );

      lat_span = k_lat_max - k_lat_min;
      lon_span = k_lon_max - k_lon_min;
   
      for ( i = 0; i < data_points_count; i++ ) {

         lat = k_lat_min + ( Math.random() * lat_span );

         lon = k_lon_min + ( Math.random() * lon_span );

         data_points[ i ] = { key: i, lat: lat, lon: lon };

      }

      return data_points;

   }


   // Initialize Google maps and clusterer ...

   async function map_init() {

      // Request needed libraries ...

      const { Map } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

      
      // Set map options and create map ...

      var map;

      var map_center = new google.maps.LatLng( 37.296382, -121.901865 );

      var map_opts = {
         center: map_center,
         clickableIcons: false,
         gestureHandling: 'greedy',
         mapTypeControl: false,
         panControl: false,
         zoom: 11
      };

      try {

         map = new google.maps.Map( document.getElementById( 'mvp' ), map_opts );

      }
      catch ( ex ) {

         // If unable to create map object, we are doomed, exit ...

         alert( '* Unable to create map: ' + ex.toString() );

         return;

      }


      // Create some data points ...
   
      var data_points = data_points_create( 200 );


      // Set clusterer options and create clusterer ...
      
      var clusterer_opts = {
            cluster_size_min: 10
         };

      var clusterer = new grid_clusterer( map, data_points, clusterer_opts );


      // Set the clusterer to auto redraw on these map events ...

      clusterer.auto_redraw_event_add( 'dragend' );

      clusterer.auto_redraw_event_add( 'zoom_changed' );


      // Redraw after all map tiles are loaded ...

      google.maps.event.addListenerOnce( map, 'tilesloaded', () => { clusterer.redraw(); } );

   }
</script> async src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&loading=async&callback=map_init"></script>
</body>
</html>

Public Methods

auto_redraw_event_add( event_name: string )

Adds a listener for the given event name that will trigger an auto-redraw.

By default the clusterer does not auto-redraw tiles unless at least one event name is registered.

Arguments

event_name

A string containing the event name to listen for and redraw tiles when that event is triggered. Typically, you would register one or more of the Google map event names.

Returns

None

Example

Enable auto-redraw on map "bounds_changed" and "dragend" events.

clusterer.auto_redraw_event_add( 'bounds_changed' );
clusterer.auto_redraw_event_add( 'dragend' );

auto_redraw_event_remove( event_name: string ): boolean

Removes the given event name that triggers an auto-redraw.

Arguments

event_name

The event name to be removed.

Returns

True if the event name was found and the associated listener was removed.
False if the event name was not found.

Example

To disable auto-redraw on a map "dragend" event (if previously registered):

clusterer.auto_redraw_event_remove( 'dragend' );

auto_redraw_events(): Array< string >

Returns the event names registered to perform an auto-redraw.

Arguments

None

Returns

A string array of map event names that cause the clusterer to auto-redraw tiles.

auto_redraw_events_clear(): void

Clear (remove) all event names registered to preform an auto-redraw.

Arguments

None

Returns

None

clear(): void

Clears the clusterer by doing the following:

Removes tile borders (if present).
Removes all auto-redraw event listeners.
Removes all tiles (cluster and grid point markers).
Removes all data points.

Arguments

None

Returns

None

cluster_marker_click_handler_use_default(): void

Use the internal default handler to handle cluster marker click events.

By default, when the clusterer is instantiated, it will use the internal default cluster marker click handler. The default handler will call the Google maps .fitBounds() method using the latitude / longitude bounds of the data points associated with the grid tile.

You may change the default cluster marker click handler by setting the cluster_marker_click_handler property of a grid_clusterer_options object and then call the configure method.

Arguments

None

Returns

None

cluster_marker_create_use_default(): void

Use the clusterers internal default handler to create cluster markers.

By default, when a cluster marker needs to be created, it will use the internal default handler to create a cluster marker. The cluster marker will be positioned in the center of the grid tile, and the markers label will be the number of data points associated with the grid tile.

You may change the default cluster icon used by setting the cluster_marker_create_handler property of a grid_clusterer_options object and then call the configure method.

Arguments

None

Returns

None

cluster_marker_update_use_default(): void

Use the clusterers internal default handler to update cluster markers.

By default, cluster marker labels will be updated to show the number of data points associated with a grid tile when grid tiles are redrawn.

You may change the default cluster marker update handler used by setting the cluster_marker_update_handler property of a grid_clusterer_options object and then call the configure method.

If your application does not require cluster marker updates, simply set the cluster_marker_update_handler property of the grid_clusterer_options object to null and then call the configure method.

Arguments

None

Returns

None

configure( opts?: grid_clusterer_options ): void

Validate and set configuration options used by the clusterer.

Arguments

opts

An optional grid_clusterer_options object that contains the configuration options to set. If this parameter is omitted, the clusterer will be re-configured to use default values for all configuration options.

Returns

None.

data_point_delete( key: data_point_key ): boolean

Delete a data point.

Arguments

key

The data_point_key of the data_point to delete.

Returns

True if a data point was found and deleted for the given key.
False if no data point was found for the given key.

Notes

This method DOES NOT update the map viewport. To do so, call the redraw method.

data_point_exists( key: data_point_key ): boolean

Checks if the given data_point key exists.

Arguments

key

A data_point_key

Returns

True if a data point exists for the given key.
False if no data point exists for the given key.

data_point_latlon( key: data_point_key ): google.maps.LatLng

Get the latitude / longitude for the given data point key.

Arguments

data_key

A data_point_key.

Returns

A google.maps.LatLng object for the key supplied.
Undefined if the key did not exist.

data_point_upsert( data_pt: data_point ): boolean

Update or insert the given data point object.

Arguments

data_pt

The data_point to update or insert. If the data point object key exists, then the existing data point latitude and longitude values will be updated.

If the data point object key does not exist, the data point object will be added to the clusterer.

Returns

True if the data point was updated or inserted.
False if the data point was not updated or inserted, or the latitude / longitude was not valid.

Notes

This method DOES NOT update the map viewport. To do so, call the redraw method.

data_points_clear(): void

Delete (clear) all data points.

Arguments

None

Returns

None

Notes

This method DOES NOT update the map viewport. To do so, call the redraw method.

data_points_upsert( data_points: Array< data_point > ): void

Given an array of data point objects, update or insert the data points..

Arguments

data_points

An array of data_point objects to be updated or inserted.

Returns

None

Notes

This method DOES NOT update the map viewport. To do so, call the redraw method.

grid_point( tile_idx: number, grid_point_idx: number ): grid_point

Get a grid_point object from within a given tile.

Arguments

tile_idx

The index of a grid_tile.

grid_point_idx

The index of a grid_point within the tile.

Returns

A grid_point object.
Null if the tile index and/or grid point index was not valid.

grid_point_bounds( tile_idx: null, grid_point_idx: number ): google.maps.LatLngBounds

Get the latitude / longitude bounds of a grid point within a specific tile.

Arguments

tile_idx

The index of a grid_tile within the map viewport.

grid_point_idx

The index of a grid_point within the tile.

Returns

A google.maps.LatLngBounds object.
Null if the tile index or grid point index was not valid.

grid_point_marker_create_use_default(): void

Use the clusterers internal default handler to create grid point markers.

You may change the handler used to create grid point markers by setting the grid_point_marker_create_handler property in a grid_cluster_options object and then call the configure method.

Arguments

None

Returns

None

grid_point_marker_update_use_default(): void

Use the clusterers internal default handler to update grid point markers.

You may change the handler used to update grid point markers by setting the grid_point_marker_update_handler property in a grid_cluster_options object and then call the configure method.

Arguments

None

Returns

None

latlon_to_tile_index( latlon: google.maps.LatLng ): number

Get a grid tile index for a given a latitude / longitude.

Arguments

latlon

A google.maps.LatLng object.

The latlon must be within the current map bounds.

Returns

A number that is the tile index (will be 0 or greater).
-1 if unable to calculate the tile index (due to the map or map bounds not being set, or if the latlon argument was not within the map bounds).

redraw(): void

Redraws all the grid tiles within the map bounds.

Arguments

None

Returns

None

Notes

Use the auto_redraw_event_add method to add event names that will trigger an "auto-redraw".

tile( tile_idx: number ): grid_tile

Given a tile index, return a grid_tile object with that index.

Arguments

tile_idx

The index of the grid_tile object to return.

Returns

A grid_tile object if the tile index was valid.
Null if no tile exists for the given tile index.

tile_bounds( tile_idx: number ): google.maps.LatLngBounds

Get the latitude / longitude bounds of a tile within the map viewport.

Arguments

tile_idx

The index of a tile within the map viewport.

Returns

A google.maps.LatLngBounds object if the tile index was valid.
Null if the tile index was not valid.

tiles_clear(): void

Clears (deletes) all tiles and any grid points associated with the tiles.

Arguments

None

Returns

None.

Public Properties

auto_redraw_events_count: number

Read Only. Returns the number of event names registered that will cause the clusterer to auto-redraw.

data_points_count: number

Read Only. Returns the number of data_points the clusterer is currently managing.

tile_borders_visible: boolean

Get or set whether or not tile borders will be visible on the map. When set to true, tile borders will be visible. When set to false, tile borders are not displayed.

tile_count: number

Read Only. Returns the number of tiles visible in the map viewport that have data points associated with them.

tile_grid_point_cols: number

Read Only. Returns the number of grid point columns in a tile.

tile_grid_point_index_max: number

Read Only. Returns the maximum grid point index within a tile.

tile_grid_point_rows: number

Read Only. Returns the number of grid point rows in a tile.

tile_height: number

Read Only. The height of a tile in pixels.

tile_index_max: number

Read Only. Returns the maximum index for a tile that is visible in the map viewport. Will be -1 if unable to determine the maximum index (due to the map or map bounds not being set).

tile_width: number

Read Only. The width of a tile in pixels.

Interface: cluster_marker_click_event

This object is returned when a cluster marker click event is raised on the map.

Propertes

event: google.maps.MapMouseEvent

A google.maps.MapMouseEvent object.

key: string | number

A unique string or number.

lat: number

A latitude value. Latitude values must be between -85.051128 and +85.051128. Data points with latitude values outside of this range will be ignored (not used).

lon: number

A longitude value. Longitude values must be between -180 and +180. Data points with longitude values outside of this range will be ignored (not used).

Interface: grid_clusterer_options

This object is used to define the properties that can be set on a grid_clusterer.

Properties

cluster_marker_click_check: boolean

Optional. Default: true

A boolean flag used to check if a cluster marker click event resulted in tiles being updated.

By default, when a cluster marker is clicked, the clusterer will call the Google maps .fitBounds() method to fit the data points associated with the grid tile in the map viewport, and then call the clusterers redraw() method. However, there are cases when the number of data points in a tile may already "fit" in the map viewport and so no "zoom-in" effect occurs, making it appear that the cluster marker click had no effect.

Setting this flag to true will cause the clusterer to check if the tile containing the cluster marker that was clicked is still visible after the click event, and if so, will zoom in one level.

See an example that illustrates the behavior of this setting.

cluster_marker_click_event_name: string

Optional. Default: null.

A string containing the event name to use when a cluster marker is clicked. If null, then no event will be triggered. Setting this value allows you to listen for the event name which will be triggered on the map.

Example

To configure a cluster marker click event name and listen for the event:

/*
Update clusterer configuration ...

1. We set the cluster_marker_click_event_name we will listen for. 

2. We set the cluster_marker_click_handler to null, this
   disables the internal default handler. Not required, but
   if not done both handlers would be called.
*/

var opts = { 
    cluster_marker_click_event_name: 'cluster_click',
    cluster_marker_click_handler: null  
   };
   
clusterer.configure( opts );
   
/*
Tell Google maps to listen for our event name and call a handler.
The map argument is a google.maps.Map object
The evt argument is a cluster_marker_click_event 
*/

google.maps.event.addListener( map, 'cluster_click', ( evt ) => {
   
   // Do the voodoo you need to do ...
   
   console.log( 'Cluster marker clicked in tile at index: ' + evt.tile.idx );
                  
} );

cluster_marker_click_handler: cluster_marker_click_handler

Optional. Default: Use internal default handler.

The function to invoke when a grid tiles cluster marker is clicked.

If null, no handler will be invoked when a cluster marker is clicked, however, if a cluster_marker_click_event_name is set to an event name, an event with that name will be triggered on the map when a cluster marker is clicked and a listener can be set-up to act on the event.

Example

To configure a cluster marker click handler:

// Define your function to handle cluster marker click events ...
// The evt argument is a cluster_marker_click_event
   
my_cluster_marker_click_handler( evt ) {
   
   // Do the voodoo you need to do ...
         
   console.log( 'Cluster marker clicked in tile at index: ' + evt.tile.idx );
   
}
   
   
// Update clusterer configuration ...
   
var opts = { 
   cluster_marker_click_handler: my_cluster_marker_click_handler 
};
   
clusterer.configure( opts );

cluster_marker_create_handler: cluster_marker_create_handler

Optional. Default: Use the clusterers internal default function.

The function invoked by the redraw method to create cluster markers. If null, then cluster marker creation will be disabled.

Example

To configure a cluster marker create handler:

/*
Define your function to handle cluster marker create events ...
The evt argument is a cluster_marker_create_event

Note - be sure to add the following CSS style to the HTML page that contains your map:
                               
   .cluster_marker {
      background-color: #008000;
      color: #FFFFFF;
      font-size: 14px;
      padding: 16px 16px;
      position: relative;
      transform: translate(0%, 50%);
      border-radius: 8px;
      border: 2px solid #FFFFFF;
   }
*/
my_cluster_marker_create_handler( evt ) {
   
   // Use the number of data points as the marker title ...
         
   var data_key_count = evt.tile.data_keys.length;
   
   // Set background color depending on number of data keys ...
   
   var txt_color = "#FFFFFF";
   
   var bg_color = '#008000';
   
   if ( data_key_count > 100 )
   {
   
      bg_color = '#FF0000';
         
   } 
   else if ( data_key_count > 50 )
   {
   
      bg_color = '#FBEC5D';
   
      txt_color = '#000000';
            
   }
   else if ( data_key_count > 20 ) 
   {
         
      bg_color = '#0000FF';
         
   }
   
   // Create the cluster marker ...

   var cm_div = document.createElement( 'div' );
   
   cm_div.className = 'cluster_marker';
   
   cm_div.style.backgroundColor = bg_color;
   
   cm_div.style.color = txt_color;
   
   cm_div.textContent = data_key_count.toString();
   
   var marker_opts = {
          position: evt.tile.bounds.getCenter(),
          title: data_key_count.toString(),
          content: cm_div
       }
   
   return new google.maps.marker.AdvancedMarkerElement( marker_opts );
         
}
   
   
// Update clusterer configuration ...
   
var opts = { 
       cluster_marker_create_handler: my_cluster_marker_create_handler 
    };

clusterer.configure( opts );

cluster_marker_update_handler: cluster_marker_update_handler

Optional. Default: Use the clusterers internal default function.

The function invoked by the redraw method to update cluster markers. If null, then cluster marker updates will be disabled.

Example

To configure a cluster marker update handler:

// Define your function to handle cluster marker update events ...
// The evt argument is a cluster_marker_update_event
   
my_cluster_marker_update_handler( evt ) {
   
   if ( evt.tile.marker ) 
   {
   
      evt.tile.marker.title = evt.tile.data_keys.length.toString();
         
      if ( evt.tile.marker.content ) {
   
         evt.tile.marker.content.textContent = evt.tile.data_keys.length.toString();
   
      }
   
   }
   
}


// Update clusterer configuration ...
   
var opts = { 
      cluster_marker_update_handler: my_cluster_marker_update_handler 
      };

clusterer.configure( opts );

cluster_size_min: number

Optional. Default: 10, Minimum: 1, Maximum: Number.MAX_SAFE_INTEGER

The minimum number of data points that is required to form a cluster marker within a tile.

cluster_zoom_max: number

Optional. Default: 14, Minimum: 1, Maximum: Max zoom level of map.

The maximum zoom level that tile cluster markers will appear. When the map zoom level is greater than this value, only grid point markers will be displayed

grid_point_cols: number

Optional. Default: 4, Minimum: 1, Maximum: see below.

The maximum number of columns that a grid point should contain. Note that the number of columns will be limited based on the current tile size. For example, if the tile size is 128 x 128 pixels, the maximum number of columns allowed will be: 128 / 64 = 2; because the internal maximum size of a grid point (box) is 64 x 64 pixels.

grid_point_marker_click_event_name: string

Optional. Default: null.

A string containing the event name to use when a grid point marker is clicked. If null, then no event will be triggered.

Example

To configure a grid point marker click event name and listen for the event:

/*
Update clusterer configuration ...

1. We set the grid_point_marker_click_event_name we will listen for. 

2. We set the grid_point_marker_click_handler to null, this
   disables the internal default handler. Not required, but
   if not done both handlers would be called.
*/   
var opts = { 
       grid_point_marker_click_event_name: 'grid_point_click',
       grid_point_marker_click_handler: null  
    };
   
clusterer.configure( opts );
   

/*
Tell Google maps to listen for our event and call our handler.
The map argument is a google.maps.Map object
The evt argument is a grid_point_marker_click_event
*/ 
google.maps.event.addListener( map, 'grid_point_click', ( evt ) => {
   
   // Do the voodoo you need to do ...
   
   console.log( 'Grid point marker clicked in grid point at index: ' + evt.grid_point.idx );
                  
   } );

grid_point_marker_click_handler: grid_point_marker_click_handler

Optional. Default: Use internal default handler.

The function to invoke when a grid point marker is clicked.

If null, no handler will be invoked when a grid point marker is clicked, however, if a grid_point_marker_click_event_name is set to an event name, an event with that name will be triggered on the map when a grid point marker is clicked and a listener can be set-up to act on the event.

Example

To configure a grid point marker click handler:

// Define your function to handle grid point marker click events ...
// The evt argument is a grid_point_marker_click_event
   
my_grid_point_marker_click_handler( evt ) {
   
   // Do the voodoo you need to do ...
   
   console.log( 'Grid point marker clicked in grid point at index: ' + evt.grid_point.idx );
  
}
   
   
// Update clusterer configuration ...
   
var opts = { 
       grid_point_marker_click_handler: my_grid_point_marker_click_handler 
    };
   
clusterer.configure( opts );

grid_point_marker_create_handler: grid_point_marker_create_handler

Optional. Default: Use the clusterers internal default function.

The function invoked by the redraw method to create grid point markers. If null, then grid point marker creation will be disabled, that is, grid point markers will never be displayed.

Example

To configure a grid point marker create handler:

   
/*
Define your function to handle grid point marker create events ...
The evt argument is a grid_point_marker_create_event

Note - be sure to add the following CSS to the HTML page that contains your map:
   
   .grid_point_marker {
      background-color: #008000;
      color: #FFFFFF;
      font-size: 12px;
      padding: 10px 14px;
      position: relative;
      transform: translate(0%, 50%);
      border: 2px solid #FFFFFF;
   }
*/
my_grid_point_marker_create_handler( evt ) {
   
   // Use the number of data points as the marker title ...
        
   var cm_div = document.createElement( 'div' );
   
   cm_div.className = 'grid_point_marker';
   
   cm_div.textContent = evt.grid_point.data_keys.length.toString();
   
   var marker_opts = {
          position: evt.grid_point.bounds.getCenter(),
          title: evt.grid_point.data_keys.length.toString(),
          content: cm_div
       }
   
   return new google.maps.marker.AdvancedMarkerElement( marker_opts );
         
}
   
   
// Update clusterer configuration ...
   
var opts = { 
       grid_point_marker_create_handler: my_grid_point_marker_create_handler 
    };
   
clusterer.configure( opts );

grid_point_marker_update_handler: grid_point_marker_update_handler

Optional. Default: Use the clusterers internal default function..

The function invoked by the redraw method to update grid point markers. If null, then grid point marker updates will be disabled.

Example

To configure a grid point marker update handler:

// Define your function to handle grid point marker update events ...
// The evt argument is a grid_point_marker_update_event
   
my_grid_point_marker_update_handler( evt ) {
   
   if ( evt.grid_point.marker ) {
   
      evt.grid_point.marker.title = evt.grid_point.data_keys.length.toString();
   
      if ( evt.grid_point.marker.content ) {
   
         evt.grid_point.marker.content.textContent = evt.grid_point.data_keys.length.toString();
   
      }
            
   }
   
}
   
   
// Update clusterer configuration ...
   
var opts = { 
       grid_point_marker_update_handler: my_grid_point_marker_update_handler 
    };
   
clusterer.configure( opts );

grid_point_rows: number

Optional. Default: 4, Minimum: 1, Maximum: see below.

The maximum number of rows that a grid point should contain. Note that the number of rows will be limited based on the current tile size. For example, if the tile size is 128 x 128 pixels, the maximum number of rows allowed will be: 128 / 64 = 2; because the internal maximum size of a grid point (box) is 64 x 64 pixels.

tile_border_color: string

Optional. Default: '#008000'

Any valid CSS color string, for example: 'red' or '#FF0000' See: https://developer.mozilla.org/en-US/docs/Web/CSS/color

tile_border_style: string

Optional. Default: 'dashed'

Any valid CSS style string, for example: 'solid' or 'dotted' See: https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

tile_border_width: string

Optional. Default: '1px'

Any valid CSS string, for example: 'thin' or '1px' See: https://developer.mozilla.org/en-US/docs/Web/CSS/border-width

tile_borders_visible: boolean

Optional. Default: false

A boolean value used to indicate if tile borders should be visible or not. If true, tile bounds will be visible on the map. If false, tile bounds are not used.

tile_size: google.maps.Size

Optional. Default: 256 x 256, Minimum: 128 x 128, Maximum: 512 x 512

A google.maps.Size object that contains the tile size (in pixels) to be used.

tiles_redraw_end_event_name: string

Optional. Default: null

A string containing the event name to use (trigger) on the map when the redraw method ends. If null, then the event will never be triggered.

tiles_redraw_start_event_name: string

Optional. Default: null

A string containing the event name to use (trigger) on the map when the redraw method starts. If null, then the event will never be triggered.

Interface: grid_point

This object contains information about a specific grid point within a tile.

Properties

idx

The grid point index. This number will be between 0 and ( grid_point_rows * grid_point_cols ) - 1. Grid point index 0 is always the grid box in the top left corner of the tile, moving left to right in column, then row order.

tile

The grid_tile this grid point belongs to.

bounds

A google.maps.LatLngBounds object that contains latitude / longitude bounds of this grid point.

marker

A map_marker object that is the grid point marker for this grid point.

data_keys

An array of data_point keys that are associated with this grid point.

Interface: grid_point_marker_click_event

This object is returned when a grid point marker click event is raised on the map.

Properties

event

A google.maps.MapMouseEvent object.

idx

This tiles index. Tile indexes are numbered from 0 to n, where tile index 0 represents the tile that is visible in the top left corner of the map viewport. Tile index 1 is the tile to the right of tile 0, in column, then row order.

coord

A google.maps.Point object that contains this tiles x, y coordinate.

bounds

A google.maps.LatLngBounds object that is the latitude / longitude bounds of this tile.

marker

A map_marker object that is the cluster marker for this tile. Will be null if the number of data keys (points) associated with this tile is less than the minimum number required to form a cluster.

data_bounds

A google.maps.LatLngBounds object that is the latitude / longitude bounds for all the data points associated with this tile.

data_keys

One of the following:

A google.maps.marker.AdvancedMarkerElement object
null