Dynamic Map Model

The Dynamic Map Model is critical for generating a Dynamic Map. Thanks to the magic of chaining, it allows you to build maps that are as complex as they need to be.

# Public Properties

# `id`

string - The map's unique ID. Can be set manually or generated automatically.

# Public Methods

# `__construct($locations = [], $options = [])`

This method will be called when a new DynamicMap is initialized. It creates a starting point which sets the map-building chain in motion. You will be able to build upon the map by adding markers, KML layers, etc.

Twig
PHP

{% set map = googleMaps.map(locations) %}

The "map" variable

For each of the remaining examples on this page, the map variable will be an instance of a Dynamic Map Model. In each example, you will see how map methods can be chained at will.

It will be assumed that the map object has already been initialized, as demonstrated above.

Once you have the map object in hand, you can then chain other methods to further customize the map. There is no limit as to how many methods you can chain, nor what order they should be in.

Arguments

$locations (mixed) - See a description of acceptable locations...
$options (array) - Optional parameters to configure the map. (see below)

# Dynamic Map Options

Option	Type	Default	Description
`id`	string	`"map-{random}"`	Set the `id` attribute of the map container.
`width`	int	null	Set the width of the map (in px).
`height`	int	null	Set the height of the map (in px).
`zoom`	int	via `fitBounds`	Set the default zoom level of the map. (`1`-`22`)
`center`	coords	via `fitBounds`	Set the center position of the map.
`styles`	array	null	An array of map styles.
`cluster`	bool\|array	false	Enable marker clustering.
`mapOptions`	object	null	Accepts any `google.maps.MapOptions` (opens new window) properties.
`markerOptions`	object	null	Accepts any `google.maps.MarkerOptions` (opens new window) properties.
`infoWindowOptions`	object	null	Accepts any `google.maps.InfoWindowOptions` (opens new window) properties.
`infoWindowTemplate`	string	null	Template path to use for creating info windows.
`infoWindowData`	array	null	Additional data for passing into an info window.
`markerLink`	string	null	URL to go to when each marker is clicked.
`markerClick`	string	null	JS callback function triggered when each marker is clicked.
`field`	string\|array	null	Address field(s) to be included on the map. (includes all by default)

Returns

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

Locations are Skippable

If you skip the locations parameter, a blank map will be created.

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

Append markers to an existing map object.

Arguments

$locations (mixed) - 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\|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.
`infoWindowTemplate`	string	null	Template path to use for creating info windows.
`infoWindowData`	array	null	Additional data for passing into an info window.
`markerLink`	string	null	URL to go to when each marker is clicked.
`markerClick`	string	null	JS callback function triggered when each marker is clicked.
`field`	string\|array	null	Address field(s) to be included on the map. (includes all by default)

Returns

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

Twig
PHP

{% do map.markers(locations) %}

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

Add one or more circles to an existing map object.

Arguments

$locations (mixed) - 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.

Returns

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

Twig
PHP

{% do map.circles(locations) %}

# `kml($files, $options = [])`

Append one or more KML layers to an existing map object.

Arguments

$files (mixed)
$options (array) - Optional parameters to configure the KML layers. (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.

Returns

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

Twig
PHP

{% do map.kml(files) %}

# `styles($styleSet)`

Style a map based on a given array 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.

Returns

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

Twig
PHP

{% do map.styles(styleSet) %}

# `zoom($level)`

Change the map's zoom level.

Arguments

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

Returns

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

Twig
PHP

{% do map.zoom(level) %}

# `center($coords)`

Re-center the map.

Arguments

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

Returns

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

Twig
PHP

{% do map.center(coords) %}

# `fit()`

Zoom map to automatically fit all markers within the viewing area.

Returns

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

Twig
PHP

{% do map.fit() %}

# `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.

Generally Useless

There probably aren't a lot of good reasons to use this method in Twig or PHP, because it would be fired immediately after the map finishes rendering. It exists mainly for parity between languages.

Returns

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

Twig
PHP

{% do map.refresh() %}

# `panToMarker($markerId)`

Re-center map on the specified marker.

Arguments

$markerId (string) - ID of the target marker.

Returns

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

Twig
PHP

{% do map.panToMarker(markerId) %}

# `setMarkerIcon($markerId, $icon)`

Set the icon of an existing marker.

Arguments

$markerId (string|array|'*') - A marker ID, array of marker IDs, or '*' for all markers.
$icon (string|icon (opens new window)) - URL of marker icon image.

Returns

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

Twig
PHP

{% do map.setMarkerIcon(markerId, icon) %}

# `hideMarker($markerId)`

Hide a marker.

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.

Twig
PHP

{% do map.hideMarker(markerId) %}

# `showMarker($markerId)`

Show a marker.

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.

Twig
PHP

{% do map.showMarker(markerId) %}

# `openInfoWindow($markerId)`

Open the info window of a specific marker.

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.

Twig
PHP

{% do map.openInfoWindow(markerId) %}

# `closeInfoWindow($markerId)`

Close the info window of a specific marker.

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.

Twig
PHP

{% do map.closeInfoWindow(markerId) %}

# `hideCircle($circleId)`

Hide a 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.

Twig
PHP

{% do map.hideCircle(circleId) %}

# `showCircle($circleId)`

Show a 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.

Twig
PHP

{% do map.showCircle(circleId) %}

# `hideKml($kmlId)`

Hide a KML layer.

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.

Twig
PHP

{% do map.hideKml(kmlId) %}

# `showKml($kmlId)`

Show a KML layer.

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.

Twig
PHP

{% do map.showKml(kmlId) %}

# `tag($options = [])`

Renders the necessary <div> container to hold the map. The final <div> will contain specific attributes and data, which are then used to generate the map. Each container must be initialized in order for its dynamic map to be created.

Arguments

$options (array) - Configuration options for the rendered <div>.

Option	Type	Default	Description
`init`	bool	`true`	Whether to automatically initialize the map via JavaScript.
`assets`	bool	`true`	Whether to preload the necessary JavaScript assets.
`callback`	string	`null`	JavaScript function to run after the map has loaded.
`params`	object	`{}`	Optional parameters (opens new window) for the Google Maps API.
`api`	object	`{}`	[DEPRECATED] Use `params` instead.

By setting the init option to false, the map will not be automatically initialized in JavaScript. It must therefore be manually initialized in JavaScript when the page has completely rendered.

Returns

Markup - A Twig Markup instance, ready to be rendered in Twig with curly braces.

Twig
PHP

{{ map.tag() }}

If you need to disable the automatic map initialization:

Twig
PHP

{{ map.tag({'init': false}) }}

If you need to change the map language and/or region:

Twig
PHP

{{ map.tag({
    'params': {
        'language': 'ja',
        'region': 'JP'
    }
}) }}

# `getDna()`

Get the complete map DNA, which is used to hydrate a map's container in the DOM.

Aliased as dna property via magic method.

Returns

array - An array of data containing the complete map details.

Twig
PHP

{% set dna = map.dna %}
{% set dna = map.getDna() %}

← Visitor Model Static Map Model →

Dynamic Map Model

# Public Properties

# id

# Public Methods

# __construct($locations = [], $options = [])

Arguments

# Dynamic Map Options

Returns

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

Arguments

Returns

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

Arguments

Returns

# kml($files, $options = [])

Arguments

Returns

# styles($styleSet)

Arguments

Returns

# zoom($level)

Arguments

Returns

# center($coords)

Arguments

Returns

# fit()

Returns

# refresh()

Returns

# 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

# tag($options = [])

Arguments

Returns

# getDna()

Returns

# `id`

# `__construct($locations = [], $options = [])`

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

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

# `kml($files, $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)`

# `tag($options = [])`

# `getDna()`