Smart Map plugin for Craft CMS

Manipulating the map in JavaScript

Smart Map has been replaced by Google Maps

Please install the Google Maps plugin instead. ➡️

As of February 2021, the Smart Map plugin has been completely rebuilt and replaced with the new Google Maps plugin for Craft CMS. For more details, see here...

The documentation below is for historical reference only.

After the map has been rendered in the browser, you can then continue to make adjustments via JavaScript. The Smart Map tools are in a JS object called smartMap... this is also where all of the maps & markers are stored.

Google Maps API

The map, marker, and info window JS objects are exactly the same as if this were a direct implementation of Google Maps. You can do whatever you want within the context of the Google Maps API.

# Map Object

The array key for your map is the map's id. If you didn't manually override the id, then by default it will be set to "smartmap-mapcanvas-1".

smartMap.map['smartmap-mapcanvas-1']

This is a Google Maps Map object. The smartMap.map array is a collection of google.maps.Map objects. Anything that can be done with a Map object can also be done with a smartMap.map object.

// Style your map
smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});

# Marker Object

The array key for your marker is composed like this:

  • Map ID: See Map Object (above)
  • Element ID: The id of the marker's parent element.
  • Field Handle: The handle of the address field.
smartMap.marker['<MAP ID>.<ELEMENT ID>.<FIELD HANDLE>']

// For example...
smartMap.marker['smartmap-mapcanvas-1.33.myAddressField']

This is a Google Maps Marker object. The smartMap.marker array is a collection of google.maps.Marker objects. Anything that can be done with a Marker object can also be done with a smartMap.marker object.

// Make a marker draggable
smartMap.marker['smartmap-mapcanvas-1.33.myAddressField'].setDraggable(true);

# Info Window Object

The array key for your info window is composed exactly like the Marker Object (see above).

smartMap.infoWindow['smartmap-mapcanvas-1.33.myAddressField']

This is a Google Maps InfoWindow object. The smartMap.infoWindow array is a collection of google.maps.InfoWindow objects. Anything that can be done with an InfoWindow object can also be done with a smartMap.infoWindow object.

// Change info window content
var infoWindow = smartMap.infoWindow['smartmap-mapcanvas-1.33.myAddressField'];
infoWindow.setContent('<h2>New Info</h2>');

# Additional Functions

// Get list of rendered maps
smartMap.listMaps();

// Get list of rendered markers
smartMap.listMarkers();

// Get list of rendered marker info windows
smartMap.listInfoWindows();

// Create a new map
smartMap.createMap(mapId, options);

// Create a new marker
smartMap.createMarker(markerName, options);

// Delete an existing marker
smartMap.deleteMarker(markerName);

// Create a new marker info window
smartMap.createInfoWindow(markerName, options);

// Refresh a map
smartMap.refreshMap(mapId);

← Styling a Map →