Setting Marker Icons

# Set icons for a batch of markers

If you've got multiple groups of markers, you can specify a different icon for each batch of markers.

// Get all bars & restaurants
var bars        = {'lat': 37.2430548, 'lng': -115.7930198}; // Coords only in JS
var restaurants = {'lat': 57.3009274, 'lng':   -4.4496567}; // Coords only in JS

// Create a dynamic map (with no markers)
var map = googleMaps.map();

// Add all bar markers
map.markers(bars, {
    'icon': '/images/bar-icon.png'
});

// Add all restaurant markers
map.markers(restaurants, {
    'icon': '/images/restaurant-icon.png'
});

// Display map (inject into `#my-map-container`)
map.tag({'parentId': 'my-map-container'});

The icon value will be passed as a parameter of the markerOptions value.

From the Google Maps API documentation regarding MarkerOptions...

Screenshot of the Google Maps documentation featuring the definition of icon

markerOptions.icon

If you specify a markerOptions value during the initial map declaration, it will be treated as the default markerOptions value for all future markers. Since this can contain an icon value, it effectively allows you to define a specific fallback icon.


# Set icon for an existing marker

It's also possible to change the icon of an existing marker:

map.setMarkerIcon(markerId, icon);

Marker ID formula

The default formula for a markerId is as follows:

    '[ELEMENT ID]-[FIELD HANDLE]' // eg: '101-myAddressField'

Read more about the setMarkerIcon method.


Get the Marker IDs

To see the existing marker IDs (if you didn't manually specify them), do the following:

  1. Put the site into devMode.
  2. View the JS console while the map is being rendered.

In the JavaScript console, you should see a complete play-by-play of every map component being created. Simply copy & paste the marker ID's you need from there, or take note of the pattern for your own needs.