`dynamicmap.js`

This file contains the DynamicMap model, which can be used to create dynamic, chainable map objects. Each instance of a DynamicMap object correlates with a different Google Map instance.

Don't access directly

It is extremely rare to need to create a DynamicMap model directly. You will almost always use the googleMaps singleton object to create and retrieve map objects.

For a more comprehensive explanation of how to use the internal API, check out the docs regarding the Universal Methods and JavaScript Methods.

# The `map` variable

For each example on this page, a map variable will be an instance of a specific DynamicMap object. Each example assumes that the map object has already been initialized, as demonstrated on the googlemaps.js page.

Get a Map

A map can be created using googleMaps.map, or retrieved using googleMaps.getMap.

# Map Methods

# `markers(locations, options = [])`

Add markers to an existing map. Does not overwrite any existing markers.

map.markers([
    {'lat': 40.730610, 'lng': -73.935242},  // New York
    {'lat': 34.052235, 'lng': -118.243683}, // Los Angeles
    {'lat': 41.881832, 'lng': -87.623177}   // Chicago
]);

Arguments

locations (coords|array) - See a description of acceptable locations...
options (array) - Optional parameters to configure the markers. (see below)

Option	Type	Default	Description
`id`	string	`"marker-{random}"`	Reference point for each marker.
`icon`	object or string	null	An `icon` as defined by `google.maps.MarkerOptions` (opens new window).
`markerOptions`	object	null	Accepts any `google.maps.MarkerOptions` (opens new window) properties.
`infoWindowOptions`	object	null	Accepts any `google.maps.InfoWindowOptions` (opens new window) properties.
`markerLink`	string	null	URL to go to when marker is clicked.
`markerClick`	function	null	JS callback function triggered when marker is clicked.

Returns

self - A chainable self-reference to this DynamicMap object.

# `circles(locations, options = [])`

Add one or more circles to an existing map.

Arguments

locations (coords|array) - See a description of acceptable locations...
options (array) - Optional parameters to configure circles. (see below)

Option	Type	Default	Description
`id`	string	`"circle-{random}"`	Reference point for each circle.
`circleOptions`	object	null	Accepts any `google.maps.CircleOptions` (opens new window) properties.

const location = {'lat': 40.730610, 'lng': -73.935242};
const options = {'circleOptions': {
    strokeColor: "#226666",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#226666",
    fillOpacity: 0.35,
    radius: 100000
}};

map.circles(location, options);

How to Draw Circles

For a more elaborate explanation, see the guide for Drawing Circles...

Returns

self - A chainable self-reference to this DynamicMap object.

# `kml(url, options = [])`

Append a KML layer to an existing map object.

Arguments

url (string) - Publicly accessible URL of the KML file.
options (array) - Optional parameters to configure the KML layer. (see below)

Option	Type	Default	Description
`id`	string	`"kml-{random}"`	Reference point for each KML layer.
`kmlLayerOptions`	object	null	Accepts any `google.maps.KmlLayerOptions` (opens new window) properties.

map.kml('https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');

Creating a KML file

KML files can be created using Google My Maps (opens new window) or a similar service.

Must be publicly accessible

In order for a KML file to work, it must exist at a publicly available URL.

Returns

self - A chainable self-reference to this DynamicMap object.

# `styles(styleSet)`

Style a map based on a given collection of styles.

Generating Styles

For more information on how to generate a set of styles, read Styling a Map.

Arguments

styleSet (array) - A set of styles to be applied to the map.

map.styles([
    {
        "featureType": "landscape",
        "stylers": [
            {"color": "#f9ddc5"},
            {"lightness": -7}
        ]
    },
    {
        "featureType": "road",
        "stylers": [
            {"color": "#813033"},
            {"lightness": 43}
        ]
    }
]);

Returns

self - A chainable self-reference to this DynamicMap object.

# `zoom(level)`

Change the map's zoom level.

Arguments

level (int) - The new zoom level. Must be an integer between 1 - 22.

map.zoom(10);

Zoom Level Reference

1 is zoomed out, a view of the entire planet.
22 is zoomed in, as close to the ground as possible.

Returns

self - A chainable self-reference to this DynamicMap object.

# `center(coords)`

Re-center the map.

Arguments

coords (coords) A simple key-value set of coordinates.

map.center({
   'lat': 32.3113966,
   'lng': -64.7527469
});

Returns

self - A chainable self-reference to this DynamicMap object.

# `fit()`

Zoom and center map to fit all markers within the viewing area. Internally uses fitBounds (opens new window).

map.fit();

Returns

self - A chainable self-reference to this DynamicMap object.

# `refresh()`

Refresh an existing map. You may need to do this after the page has been resized, or if something has been moved or changed.

map.refresh();

Returns

self - A chainable self-reference to this DynamicMap object.

# Marker Methods

Automatically generated marker IDs

If the marker has been created from an Element, it will have a marker ID matching this formula:

    [ELEMENT ID]-[FIELD HANDLE]

Let's say you have an Address field with the handle of address attached to your Entries. When you use those entries to create a map, the markers will generate IDs similar to this:

    21-address
    33-address
    42-address
    etc...

Conversely, if the markers have been created manually via JavaScript, it will use the marker ID specified in the options, or even stowed alongside the coordinates.

If no marker ID is specified, new markers will use a randomly generated ID.

# `panToMarker(markerId)`

Re-center map on the specified marker.

map.panToMarker('33-address');

Arguments

markerId (string) - The ID of the marker that you want to pan to.

Returns

self - A chainable self-reference to this DynamicMap object.

# `setMarkerIcon(markerId, icon)`

Set the icon of an existing marker. Internally uses setIcon (opens new window).

map.setMarkerIcon('33-address', 'http://maps.google.com/mapfiles/ms/micons/green.png');

Arguments

markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.
icon (string|icon (opens new window)) - The icon to set on the specified marker.

Returns

self - A chainable self-reference to this DynamicMap object.

# `hideMarker(markerId)`

Hide a marker. The marker will not be destroyed, it will simply be detached from the map.

map.hideMarker('33-address');

Arguments

markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.

Returns

self - A chainable self-reference to this DynamicMap object.

# `showMarker(markerId)`

Show a marker. The marker will be re-attached to the map.

map.showMarker('33-address');

Arguments

markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.

Returns

self - A chainable self-reference to this DynamicMap object.

# `openInfoWindow(markerId)`

Open the info window of a specific marker.

map.openInfoWindow('33-address');

Arguments

markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all info windows.

Returns

self - A chainable self-reference to this DynamicMap object.

# `closeInfoWindow(markerId)`

Close the info window of a specific marker.

map.closeInfoWindow('33-address');

Arguments

markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all info windows.

Returns

self - A chainable self-reference to this DynamicMap object.

# `hideCircle(circleId)`

Hide a circle. The circle will not be destroyed, it will simply be detached from the map.

map.hideCircle('my-circle');

Arguments

circleId (string|array|'*') - A circle ID, array of circle IDs, or '*' for all circles.

Returns

self - A chainable self-reference to this DynamicMap object.

# `showCircle(circleId)`

Show a circle. The circle will be re-attached to the map.

map.showCircle('my-circle');

Arguments

circleId (string|array|'*') - A circle ID, array of circle IDs, or '*' for all circles.

Returns

self - A chainable self-reference to this DynamicMap object.

# `hideKml(kmlId)`

Hide a KML layer. The KML layer will not be destroyed, it will simply be detached from the map.

map.hideKml('my-kml');

Arguments

kmlId (string|array|'*') - A KML layer ID, array of KML layer IDs, or '*' for all KML layers.

Returns

self - A chainable self-reference to this DynamicMap object.

# `showKml(kmlId)`

Show a KML layer. The KML layer will be re-attached to the map.

map.showKml('my-kml');

Arguments

kmlId (string|array|'*') - A KML layer ID, array of KML layer IDs, or '*' for all KML layers.

Returns

self - A chainable self-reference to this DynamicMap object.

# Non-Chainable Methods

Breaking the Chain

The following methods are the only ones which do not return a chainable map object.

# `getMarker(markerId)`

Get the Google Maps Marker object (opens new window) of a specified marker.

const marker = map.getMarker('33-address');

Arguments

markerId (string) - The ID of the marker that you want to access.

Returns

A Google Maps Marker (opens new window) object.

# `getInfoWindow(markerId)`

Get the Google Maps Info Window object (opens new window) of a specified info window.

const infoWindow = map.getInfoWindow('33-address');

Arguments

markerId (string) - The ID of the marker with the info window that you want to access.

Returns

A Google Maps Info Window (opens new window) object.

# `getCircle(circleId)`

Get the Google Maps Circle object (opens new window) of a specified circle.

const circle = map.getCircle('my-circle');

Arguments

circleId (string) - The ID of the circle that you want to access.

Returns

A Google Maps Circle (opens new window) object.

# `getKml(kmlId)`

Get the Google Maps KML Layer object (opens new window) of a specified KML layer.

const kml = map.getKml('my-kml');

Arguments

kmlId (string) - The ID of the KML layer that you want to access.

Returns

A Google Maps KML Layer (opens new window) object.

# `getMarkerClusterer()`

If clustering is enabled, get the Google Maps MarkerClusterer object (opens new window).

const clusterer = map.getMarkerClusterer();

Returns

A Google Maps MarkerClusterer (opens new window) object.

# `getZoom()`

Get the current zoom level.

const level = map.getZoom();

Returns

An integer between 1 - 22 representing the current zoom level.

# `getCenter()`

Get the center point coordinates of the map based on its current position.

const coords = map.getCenter();

Returns

A set of coordinates representing the current map center.

# `getBounds()`

Get the bounds (opens new window) of the map based on its current position.

const bounds = map.getBounds();

Returns

A set of bounds (opens new window), which is effectively a pair of coordinates, representing the Southwest & Northeast corners of a rectangle.

# `tag(options = {})`

Creates a new <div> element, detached from the DOM. If a parentId is specified, the element will automatically be injected into the specified parent container.

map.tag({'parentId': 'target-parent-id'});

Arguments

options (array) - Configuration options for the rendered dynamic map.

Option	Type	Default	Description
`parentId`	string	`null`	The ID of the target parent container for the newly created element.

Returns

A new DOM element. Will always return the newly created element, regardless of whether it was automatically injected into a parent container.

← googlemaps.js

dynamicmap.js

# The map variable

# Map Methods

# markers(locations, options = [])

Arguments

Returns

# circles(locations, options = [])

Arguments

Returns

# kml(url, options = [])

Arguments

Returns

# styles(styleSet)

Arguments

Returns

# zoom(level)

Arguments

Returns

# center(coords)

Arguments

Returns

# fit()

Returns

# refresh()

Returns

# Marker Methods

# panToMarker(markerId)

Arguments

Returns

# setMarkerIcon(markerId, icon)

Arguments

Returns

# hideMarker(markerId)

Arguments

Returns

# showMarker(markerId)

Arguments

Returns

# openInfoWindow(markerId)

Arguments

Returns

# closeInfoWindow(markerId)

Arguments

Returns

# hideCircle(circleId)

Arguments

Returns

# showCircle(circleId)

Arguments

Returns

# hideKml(kmlId)

Arguments

Returns

# showKml(kmlId)

Arguments

Returns

# Non-Chainable Methods

# getMarker(markerId)

Arguments

Returns

# getInfoWindow(markerId)

Arguments

Returns

# getCircle(circleId)

Arguments

Returns

# getKml(kmlId)

Arguments

Returns

# getMarkerClusterer()

Returns

# getZoom()

Returns

# getCenter()

Returns

# getBounds()

Returns

# tag(options = {})

Arguments

Returns

`dynamicmap.js`

# The `map` variable

# `markers(locations, options = [])`

# `circles(locations, options = [])`

# `kml(url, options = [])`

# `styles(styleSet)`

# `zoom(level)`

# `center(coords)`

# `fit()`

# `refresh()`

# `panToMarker(markerId)`

# `setMarkerIcon(markerId, icon)`

# `hideMarker(markerId)`

# `showMarker(markerId)`

# `openInfoWindow(markerId)`

# `closeInfoWindow(markerId)`

# `hideCircle(circleId)`

# `showCircle(circleId)`

# `hideKml(kmlId)`

# `showKml(kmlId)`

# `getMarker(markerId)`

# `getInfoWindow(markerId)`

# `getCircle(circleId)`

# `getKml(kmlId)`

# `getMarkerClusterer()`

# `getZoom()`

# `getCenter()`

# `getBounds()`

# `tag(options = {})`