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.

{% 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 properties.
markerOptions object null Accepts any google.maps.MarkerOptions properties.
infoWindowOptions object null Accepts any google.maps.InfoWindowOptions properties.
infoWindowTemplate string null Template path to use for creating info windows.
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.
markerOptions object null Accepts any google.maps.MarkerOptions properties.
infoWindowOptions object null Accepts any google.maps.InfoWindowOptions properties.
infoWindowTemplate string null Template path to use for creating info windows.
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.
{% do map.markers(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 properties.

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% 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.
{% 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.
{% do map.zoom(level) %}

# center($coords)

Re-center the map.

Arguments

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% 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.
{% 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.
{% 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.
{% do map.panToMarker(markerId) %}

# openInfoWindow($markerId)

Open the info window of a specific marker.

Arguments

  • $markerId (string) - ID of the marker with the target info window.

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% do map.openInfoWindow(markerId) %}

# setMarkerIcon($markerId, $icon)

Set the icon of an existing marker.

Arguments

  • $markerId (string) - ID of the target marker.
  • $icon (string|icon) - URL of marker icon image.

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% do map.setMarkerIcon(markerId, icon) %}

# hideMarker($markerId)

Hide a marker.

Arguments

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

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% do map.hideMarker(markerId) %}

# showMarker($markerId)

Show a marker.

Arguments

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

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% do map.showMarker(markerId) %}

# hideKml($kmlId)

Hide a KML layer.

Arguments

  • $kmlId (string) - ID of the target KML layer.

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% do map.hideKml(kmlId) %}

# showKml($kmlId)

Show a KML layer.

Arguments

  • $kmlId (string) - ID of the target KML layer.

Returns

  • self - A chainable self-reference to this DynamicMap object.
{% 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
api object {} Optional parameters for the Google Maps API.
assets bool true Whether to preload the necessary JavaScript assets.
init bool true Whether to automatically initialize the map via JavaScript.
callback string null JavaScript function to run after the map has loaded.

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.
{{ map.tag() }}

If you need to disable the automatic map initialization:

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

# 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.
{% set dna = map.dna %}
{% set dna = map.getDna() %}