Skip to Main Content

JavaScript Initialization Code

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

JavaScript Initialization Code

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

Notes

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.