Google Maps plugin for Craft CMS

googlemaps.js

This file contains the googleMaps JavaScript object. Additionally, a googleMaps variable will be automatically set as a singleton in the global scope at runtime.

Use this object as a starting point for creating maps.

const map = googleMaps.map(locations);

How it works

Internally, the googleMaps object can create multiple instances of the DynamicMap model. Each DynamicMap object will be directly tied to a Google Maps map on the page.

The googleMaps object also keeps a reference to all maps which have already been created, so you can easily access them later.

For a more comprehensive explanation of how to use the internal API, check out the docs regarding the Universal Methods and JavaScript Methods.

# Map Management Methods

# map(locations = [], options = {})

Calling this method will create a new DynamicMap map object.

// Marker locations
const locations = [
    {'lat': 40.730610, 'lng': -73.935242},  // New York
    {'lat': 34.052235, 'lng': -118.243683}, // Los Angeles
    {'lat': 41.881832, 'lng': -87.623177}   // Chicago
];

// Map options
const options = {
    'id': 'us-cities',
    'height': 300,
    'zoom': 5
};

// Create a new DynamicMap object
const map = googleMaps.map(locations, options);

The map object is 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.

Once you have the map object in hand, you can then chain methods from within the DynamicMap object to further customize the map. There is no limit as to how many methods you can chain, nor what order they should appear in.

Arguments

  • locations (coords|array) - A single set of coordinates, or an array of coordinate sets.
  • 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 (uses fitBounds) Set the default zoom level of the map. (1-22)
center coords (uses 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 (opens new window) properties.
markerOptions object null Accepts any google.maps.MarkerOptions (opens new window) properties.
infoWindowOptions object null Accepts any google.maps.InfoWindowOptions (opens new window) properties.
markerLink string null URL to go to when each marker is clicked.
markerClick function null JS callback function triggered when each marker is clicked.

Returns

  • A chainable DynamicMap object.

Locations are Skippable

If you omit the locations parameter, or pass in an empty array, a blank map will be created.

# getMap(mapId)

const map = googleMaps.getMap('my-map');

Retrieve an existing map object.

Arguments

  • mapId (string) - The ID of the map that you want to access.

Returns

  • A chainable DynamicMap object.

# Map Initialization Methods

# init(mapId = null, callback = null)

googleMaps.init();

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

Arguments

  • mapId (string|array|null) - The ID of the map that you want to access. You can also specify an array of map IDs. You can also pass null (or omit both parameters) to initialize all maps on the page.
  • callback (function) - An optional callback function, to be executed after the map has finished loading.

Depending on what is specified as the mapId value, the init method can initialize one or many maps simultaneously.

// Null - Initialize all maps on the page
googleMaps.init();

// String - Initialize only the specified map
googleMaps.init('my-map');

// Array - Initialize all specified maps
googleMaps.init(['map-one', 'map-two', 'map-three']);

You can specify a callback function to be run after the map has loaded.

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

// Pass anonymous callback function
googleMaps.init('my-map', function () {
    console.log("The map has finished loading!");
});

# Public Properties

# log

Type

  • bool - Determines whether the JavaScript methods should log their progress to the console.

Set to false by default. Can be enabled by setting to true before any methods have been run.

devMode

The log property will automatically be set to true when devMode (opens new window) is enabled.

← dynamicmap.js →