Setting Marker Icons

Per the Google Maps API (opens new window):

In other words, there are two ways to configure a marker icon...

1. String - You can simply specify the path to your marker icon file.

• JavaScript
• Twig
• PHP

var icon = '/path/to/marker.png';

2. Array - Accepts parameters from Google's native Icon interface (opens new window).

• JavaScript
• Twig
• PHP

var icon = {
    'url': '/path/to/marker.png'
};

---

Control the size of a marker icon

Configure the icon as an array, specifying scaledSize to control the marker size.

• JavaScript
• Twig
• PHP

// Specify the dimensions of a marker icon
var icon = {
    'url': '/path/to/marker.png',
    'scaledSize': {'width': 30, 'height': 40}
};

---

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.

• JavaScript
• Twig
• PHP

// 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'});

---

Set icon for an existing marker

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

• JavaScript
• Twig
• PHP

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 (opens new window).
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.