Google Maps plugin for Craft CMS

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

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)

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)

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 (opens new window).

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

# setMarkerIcon(markerId, icon)

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)

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)

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)

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)

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)

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)

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)

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)

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.

← Additional JavaScript Methods →