1. Home >
  2. Documentation >
  3. Overlays >
  4. marker
 

marker

This function adds google.maps.Marker(s) and includes a clustering feature.

Marker usage

Parameters

Example: single marker

$("#test").gmap3({
    marker:{
      address: "Haltern am See, Weseler Str. 151"
    },
    map:{
      options:{
        zoom: 14
      }
    }
  });

Example: multiple markers

This example shows how to specify custom options for markers and how to handle marker events. It also shows how to display an infowindow over the marker on mouseover.

$("#test").gmap3({
  map:{
    options:{
      center:[46.578498,2.457275],
      zoom: 5
    }
  },
  marker:{
    values:[
      {latLng:[48.8620722, 2.352047], data:"Paris !"},
      {address:"86000 Poitiers, France", data:"Poitiers : great city !"},
      {address:"66000 Perpignan, France", data:"Perpignan ! GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
    ],
    options:{
      draggable: false
    },
    events:{
      mouseover: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker, 
              options:{content: context.data}
            }
          });
        }
      },
      mouseout: function(){
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      }
    }
  }
});

Clustering usage

If cluster option is defined, markers are grouped in clusters. It is also possible to add markers to a clusterer later.

Parameters:

  • values {array} Array of single marker properties
  • cluster {object|clusterer} Cluster definition or previous clusterer object (to add markers to an existing clusterer)
    • numeric key {object} Style associated to the threshold (key) of corresponding marker count
      • content {string} Content of the cluster overlay (html)
        • keyword CLUSTER_COUNT will be replaced by the marker count
      • width {integer} Content width
      • height {integer} Content height
      • offset {object} Offset position (optional)
        • x {integer}
        • y {integer}
    • radius {integer} Distance in pixels to merge markers in a cluster
    • maxZoom {integer} Maximum zoom to run the clustering feature (optional)
    • calculator {function(values):integer} Callback function to calculate the count markers thanks to their data (ie. to append weight to markers) (optional)
    • pane {google.maps.MapPanes} Pane of the visible overlay (optional)
  • options {google.maps.MarkerOptions} General marker options (optional)

Explanation

  • When the distance is less than radius pixels, the markers are grouped. If the count exceeds one of the numeric.
    thresholds, a cluster object representing the group is created with the associated style.
  • Markers properties (data, tag, events...) extends from general marker option + value one. This also applies to the cluster.
    • You can define a custom mouseclick for one of the marker (in the value definition), and a general mouseclick for all other
    • Notice that the extends is a replacement, not a concatenation

Notice

  • Markers are only created when displayed the first time. A marker may never exists if always grouped.
  • If displayed once, a marker is just hidden when grouped

Callback

When a clustering feature is used, callback function returns a clusterer object. This will manipulate the current clustering feature:

Clusterer

  • filter({function(values)|empty}) Set a filtering function (if empty, unset the filtering function)
    • values {array} array of markers (data sent when calling marker function)
    • Return {array} values to display
  • enable() Enable the clustering feature
  • disable() Disable the clustering feature and display all markers
  • add({function(marker, config, lock)}) Add a marker to the cluster
    • marker {google.maps.Marker}
    • property {object} Marker properties (data, tag ...) (optional)
    • lock {boolean} lock / unlock the rendering. Use this property to lock clustering while adding many markers (and unlock at the last one) (optional)
  • getById(id) Get a marker by its id
    • id {string} Id of the marker
  • clearById(id, lock) Remove a marker by its id
    • id {string} Id of the marker
    • lock {boolean} lock / unlock the rendering. Use this property to lock clustering while removing many markers (and unlock at the last one) (optional)

Event

Object sent through the events is composed by two elements, the visual one, and the shadow which is required to catch mouse event.

  • main {overlay} Visible overlay
  • shadow {overlay} Invisible overlay which catches mouse events

Example: clustered marker

This example uses a set of 4 markers (4 items in values) with two simples ([lat, lng]), one including custom options, and one including custom events. Events are binded to the clusters objects to append /remove a border on mouse over.

$("#test").gmap3({
  map:{
    options:{
      center:[46.578498,2.457275],
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  },
  marker:{
    values: [
      [49.28952958093682, 6.152559438984804],
      {
        latLng:[44.28952958093682, 6.152559438984804],
        options:{
          icon: "http://maps.google.com/mapfiles/marker_green.png"
        }
      },
      [49.28952958093682, -1.1501188139848408],
      {
        latLng:[44.28952958093682, -1.1501188139848408],
        events:{
          click:function(){
            alert("I'm the last one, and i have my own click event");
          }
        }
      }
    ],
    events:{ // events trigged by markers 
      click: function(){
        alert("Here is the default click event");
      }
    },
    cluster:{
      radius: 100,
      events:{ // events trigged by clusters 
        mouseover: function(cluster){
          $(cluster.main.getDOMElement()).css("border", "1px solid red");
        },
        mouseout: function(cluster){
          $(cluster.main.getDOMElement()).css("border", "0px");
        }
      },
      0: {
        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
        width: 53,
        height: 52
      },
      20: {
        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
        width: 56,
        height: 55
      },
      50: {
        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
        width: 66,
        height: 65
      }
    }
  }
});
Close