Custom Marker Format

this.options.markerFormatFn = function(marker) {

    // icon can be a URL to an icon image
    marker.icon = 'https://mt.googleapis.com/vt/icon/name=icons/spotlight/'
        + ((marker.data.id % 2 == 0)
           ? 'spotlight-waypoint-blue.png'
           : 'spotlight-waypoint-a.png')
        + '&scale=1.5';

    // you can change other attributes of the marker as well
    marker.title = marker.data.name.toUpperCase();
    
    // we can call google.maps.Marker object methods as well
    marker.setOpacity(0.5);

    if (marker.title == 'HOME') {
        // we can shift the marker position
        marker.setPosition( {lat: -31.82531, lng: 115.84366} );
    }
}

Processing

this.options.markerFormatFn = function(marker) {

    var population = parseFloat(marker.data.attr01);

    // icon can be a Symbol
    marker.icon = {
      path          : google.maps.SymbolPath.CIRCLE,
      fillColor     : "#dd0000",
      fillOpacity   : 0.6,
      strokeColor   : "#0000dd",
      strokeOpacity : 0.9,
      strokeWeight  : 1,
      scale         : 5 * Math.log(population)
    };

}

Processing

The page provides a function to the plugin to supply custom code to format each marker or manipulate it in other ways.

Each marker is a google.maps.Marker object with the following attributes (among others), most of which may be changed by your function:

data.id = source query id
data.name = source query name
data.info = source query info
title = based on source query name by default
icon = based on source query icon by default, plus baseIconPath if set
label = based on source query label
position = google.maps.LatLng object
data.attr01, data.attr02, .. data.attr10 = source query flex fields

You can also call Google Maps API methods on the Marker object, such as setAnimation, setOpacity, setDraggable, etc.

Note that the marker.icon property can be a URL to an image to show, or to a Symbol.

JavaScript Initialization Code

JavaScript Initialization Code

Notes