Universal Methods

The following methods apply equally, whether you are working in JavaScript, Twig, or PHP. These methods have nearly identical parameters and behaviors across all three languages.

The Magic of Chaining

Each of these methods can be chained together in any order you'd like. Chaining can be a powerful technique, allowing you to build complex maps with ease.

There are also a few language-specific methods to be aware of. In addition to the Universal Methods below, check out the extended documentation for JavaScript Methods and Twig & PHP Methods.

markers(locations, options)

• JavaScript
• Twig
• PHP

map.markers(locations, options);

Places additional markers onto the map.

Arguments

• locations (locations) - Will be used to create additional markers for the map.
• options (array|null) - The options parameter allows you to configure the markers in greater detail. These options will only apply to the markers created in this method call.

Available Options

Most, but not all, of these options are available across JavaScript, Twig, and PHP. Please note the few options which are not universally available.

Option	Available	Description
id	JavaScript, Twig/PHP	Reference point for each marker.
icon	JavaScript, Twig/PHP	An icon as defined by google.maps.MarkerOptions (opens new window).
markerOptions	JavaScript, Twig/PHP	Accepts any google.maps.MarkerOptions (opens new window) properties.
infoWindowOptions	JavaScript, Twig/PHP	Accepts any google.maps.InfoWindowOptions (opens new window) properties.
infoWindowTemplate	Twig/PHP	Template path to use for creating info windows.
infoWindowData	Twig/PHP	Additional data for passing into an info window.
markerLink	JS/Twig/PHP	URL to go to when marker is clicked.
markerClick	JS/Twig/PHP	JS callback function triggered when marker is clicked.
field	Twig/PHP	Address field(s) to be included on the map. (includes all by default)

Additional Options Details

For more info, please consult either the JavaScript object or the Dynamic Map model.

circles(locations, options)

• JavaScript
• Twig
• PHP

map.circles(locations, options);

Places one or more circles onto the map.

Arguments

• locations (locations) - Will be used to add circles to the map.
• options (array|null) - The options parameter allows you to configure circles in greater detail.

Option	Available	Description
id	JavaScript, Twig/PHP	Reference point for each circle.
circleOptions	JavaScript, Twig/PHP	Accepts any google.maps.CircleOptions (opens new window) properties.

How to Draw Circles

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

kml(url, options)

• JavaScript
• Twig
• PHP

map.kml(url, options);

Applies a KML layer to the map.

Arguments

• url (string) - The URL of a given KML layer. It must be publicly hosted on the internet. Google needs to parse the KML file, so it will not work if hosted locally or behind a private URL.
• options (array|null) - The options parameter allows you to configure this KML layer in greater detail.

Option	Available	Description
id	JavaScript, Twig/PHP	Reference point for each KML layer.
kmlLayerOptions	JavaScript, Twig/PHP	Accepts any google.maps.KmlLayerOptions (opens new window) properties.

ID required to dynamically adjust KML layers

In order to further manipulate a KML layer, you must provide an id option value.

For more information, see the KML Layers guide.

styles(styleSet)

• JavaScript
• Twig
• PHP

map.styles(styleSet);

Arguments

• styleSet (array) - A collection of styles, most likely generated elsewhere.

For more information, see the Styling a Map guide.

zoom(level)

• JavaScript
• Twig
• PHP

map.zoom(level);

Change the map's zoom level.

Arguments

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

Zoom Level Reference

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

center(coords)

• JavaScript
• Twig
• PHP

map.center(coords);

Re-center the map.

Arguments

• coords (coords) - New center point of map.

fit()

• JavaScript
• Twig
• PHP

map.fit();

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

refresh()

• JavaScript
• Twig
• PHP

map.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.

---

Marker ID formula

The remaining methods all refer to a markerId value.

Formula

The default formula for a markerId is as follows:

    '[ELEMENT ID]-[FIELD HANDLE]' // eg: '101-myAddressField'

panToMarker(markerId)

• JavaScript
• Twig
• PHP

map.panToMarker(markerId);

Re-center map on the specified marker.

Arguments

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

setMarkerIcon(markerId, icon)

• JavaScript
• Twig
• PHP

map.setMarkerIcon(markerId, icon);

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

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.

hideMarker(markerId)

• JavaScript
• Twig
• PHP

map.hideMarker(markerId);

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

Arguments

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

showMarker(markerId)

• JavaScript
• Twig
• PHP

map.showMarker(markerId);

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

Arguments

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

openInfoWindow(markerId)

• JavaScript
• Twig
• PHP

map.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.

closeInfoWindow(markerId)

• JavaScript
• Twig
• PHP

map.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.

hideCircle(circleId)

• JavaScript
• Twig
• PHP

map.hideCircle(circleId);

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

Arguments

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

showCircle(circleId)

• JavaScript
• Twig
• PHP

map.showCircle(circleId);

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

Arguments

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

hideKml(kmlId)

• JavaScript
• Twig
• PHP

map.hideKml(kmlId);

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

Arguments

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

showKml(kmlId)

• JavaScript
• Twig
• PHP

map.showKml(kmlId);

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

Arguments

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