Google Maps plugin for Craft CMS

Additional JavaScript Methods

In addition to all the Universal Methods available in the API, there are a few more methods that are available exclusively in JavaScript.

# tag(options = {})

Ends the map chain. Creates a new <div> element, to be placed in the DOM as you wish.

// Inject a map into the DOM
map.tag({'parentId': 'target-parent-id'});

Same But Different

The tag method also exists in Twig & PHP, but beware that the usage is notably different.

Arguments

  • options (array) - Configuration options for the rendered dynamic map.
Option Type Default Description
parentId string null The ID of the target parent container for the newly created element.

If the parentId is provided, the new HTML element will be automatically injected into the DOM container with the specified id attribute.

// Place the HTML element automatically
map.tag({'parentId': 'target-parent-id'});

Automatic vs Manual Placement

If the parentId is specified, the new HTML element will be automatically appended to the specified parent container in the DOM.

If the parentId is omitted, the new HTML element must be manually placed into the DOM at your discretion.

Returns

  • A new <div> element which holds the fully-rendered map. If no parentId was specified, the element will still need to be manually added to the DOM.

Always returns an HTML element

The new HTML element will always be returned by the tag method, regardless of whether it was automatically injected into the DOM.

# init(mapId = null, callback = null)

Initialize a map, or a group of maps. This will be automatically run (unless disabled) for each map on the page.

Arguments

  • mapId (null|string|array) - Depending on what is specified as the mapId value, the init method can initialize one or many maps simultaneously.
  • callback (function) - The callback function will be triggered immediately after the map has finished loading.
// Initialize all maps on the page
googleMaps.init();

// Pass the callback function by reference
googleMaps.init('my-custom-map', myCallbackFunction);

# getMarker(markerId)

Get the Google Maps Marker (opens new window) object of the specified marker.

// Get the specified Marker object
const marker = map.getMarker(markerId);

Arguments

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

Returns

# getInfoWindow(markerId)

Get the Google Maps Info Window (opens new window) object of the specified info window.

// Get the specified Info Window object
const infoWindow = map.getInfoWindow(markerId);

Arguments

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

Returns

# getCircle(circleId)

Get the Google Maps Circle (opens new window) object of the specified circle.

// Get the specified circle object
const circle = map.getCircle(circleId);

Arguments

  • circleId (string) - The ID of the circle that you want to access.

Returns

# getKml(kmlId)

Get the Google Maps KML Layer (opens new window) object of the specified KML layer.

// Get the specified KML layer object
const kml = map.getKml(kmlId);

Arguments

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

Returns

# getMarkerClusterer()

If clustering is enabled, get the map's marker clustering (opens new window) object.

// Get the map's marker cluster object
const clusterer = map.getMarkerClusterer();

Returns

# getZoom()

Get the current zoom level.

// Get the current zoom level of the map
const level = map.getZoom();

Returns

  • An integer between 1 - 22 representing the current zoom level.

# getCenter()

Get the center point coordinates of the map based on its current position.

// Get the current center point of the map
const coords = map.getCenter();

Returns

  • A set of coordinates representing the current map center.

# getBounds()

Get the bounds (opens new window) of the map based on its current position.

// Get the current bounds of the map
const bounds = map.getBounds();

Returns

← Additional Twig & PHP Methods →