$49

Smart Map

Documentation  •  Changelog

Documentation

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
smartMap.map['smartmap-mapcanvas-1']

// 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
smartMap.marker['smartmap-mapcanvas-1.33.myAddressField']

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

Info Bubble Object

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

// Info bubble object
smartMap.infoWindow['smartmap-mapcanvas-1.33.myAddressField']

// Change info bubble content
smartMap.infoWindow['smartmap-mapcanvas-1.33.myAddressField'].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 bubbles
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 bubble
smartMap.createInfoWindow(markerName, options);
// Refresh a map
smartMap.refreshMap(mapId);

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.