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.

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);