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)

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.
markerOptions JavaScript, Twig/PHP Accepts any google.maps.MarkerOptions properties.
infoWindowOptions JavaScript, Twig/PHP Accepts any google.maps.InfoWindowOptions properties.
infoWindowTemplate Twig/PHP Template path to use for creating info windows.
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.

# kml(url, options)

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 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)

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)

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)

map.center(coords);

Re-center the map.

Arguments

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

# fit()

map.fit();

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

# refresh()

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)

map.panToMarker(markerId);

Re-center map on the specified marker.

Arguments

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

# openInfoWindow(markerId)

map.openInfoWindow(markerId);

Open the info window of a specific marker.

Arguments

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

# setMarkerIcon(markerId, icon)

map.setMarkerIcon(markerId, icon);

Set the icon of an existing marker. Internally uses setIcon.

Arguments

  • markerId (string) - The ID of the marker that you want to set the icon for.
  • icon (string|icon) - The icon to set on the specified marker.

# hideMarker(markerId)

map.hideMarker(markerId);

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

Arguments

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

# showMarker(markerId)

map.showMarker(markerId);

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

Arguments

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

# hideKml(kmlId)

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) - The ID of the KML layer that you want to hide.

# showKml(kmlId)

map.showKml(kmlId);

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

Arguments

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