Smart Map

Documentation  •  Changelog


Manipulating the map in JavaScript

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.

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

// 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>']
// Marker object

// Make a marker draggable

Info Bubble Object

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

// Info bubble object

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

Additional Functions

// Get list of rendered maps

// Get list of rendered markers

// Get list of rendered marker info bubbles
// Create a new map
smartMap.createMap(mapId, options);

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

// Delete an existing marker

// Create a new marker info bubble
smartMap.createInfoWindow(markerName, options);
// Refresh a map

Google Maps API

The map, marker, and info bubble 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.