Skip to content

Latest commit

 

History

History
217 lines (169 loc) · 5.46 KB

README.md

File metadata and controls

217 lines (169 loc) · 5.46 KB
Raw

⚠️ This document is aim for older versions (from 2.0.0 to 2.2.9). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

MarkerCluster class

This class extends BaseClass.

Contents

Overview

The marker cluster helps you to add bunch of markers on the map. Closed-locations are clustered to one marker, and the clustered marker displays the number of markers.

If you click on the clustered marker, the map zooms-in to the bounds that contains all markers in that area.

Create a marker cluster

The map.addMarkerCluster() method creates an instance marker cluster onto the map.

  • The markers and icons properties are required.
  • This method works after the MAP_READY event.
var options = {
    'camera': {
        'target': dummyData()[0].position,
        'zoom': 12
    }
};
var map = plugin.google.maps.Map.getMap(mapDiv, options);
map.on(plugin.google.maps.event.MAP_READY, function() {

  //------------------------------------------------------
  // Create a marker cluster.
  // Providing all locations at the creating is the best.
  //------------------------------------------------------
  map.addMarkerCluster({
    markers: dummyData(),
    icons: [
        {min: 2, max: 100, url: "./img/blue.png", anchor: {x: 16, y: 16}},
        {min: 100, max: 1000, url: "./img/yellow.png", anchor: {x: 16, y: 16}},
        {min: 1000, max: 2000, url: "./img/purple.png", anchor: {x: 24, y: 24}},
        {min: 2000, url: "./img/red.png",anchor: {x: 32,y: 32}}
    ]
  }, function (markerCluster) {

    // somethings you want to do...

  });
});

function dummyData() {
  return [
    {
      "position": {
        "lat": 21.382314,
        "lng": -157.933097
      },
      "name": "Starbucks - HI - Aiea  03641",
      "address": "Aiea Shopping Center_99-115 Aiea Heights Drive #125_Aiea, Hawaii 96701",
      "phone": "808-484-0000",
      "icon": "./img/starbucks.png"
    },
     ...
     ...
     ...
    {
      "position": {
        "lat": 21.3871,
        "lng": -157.9482
      },
      "name": "Starbucks - HI - Aiea  03642",
      "address": "Pearlridge Center_98-125 Kaonohi Street_Aiea, Hawaii 96701",
      "phone": "808-484-0000",
      "icon": "./img/starbucks.png"
    }
  ]
}

Change the text styles

You can specify a few style options.

// Available options
var labelOptions = {
  bold: true,
  fontSize: 15,
  color: "white",
  italic: true
};

map.addMarkerCluster({
  markers: dummyData(),
  icons: [
      {min: 2, max: 100, url: "./img/blue.png", anchor: {x: 16, y: 16}, label: labelOptions},
      {min: 100, max: 1000, url: "./img/yellow.png", anchor: {x: 16, y: 16}, label: labelOptions},
      {min: 1000, max: 2000, url: "./img/purple.png", anchor: {x: 24, y: 24}, label: labelOptions},
      {min: 2000, url: "./img/red.png",anchor: {x: 32,y: 32}, label: labelOptions}
  ]
}, function (markerCluster) {

});

Get your data from clicked marker

As well as regular marker, you can store your custom data, then get them later.

map.addMarkerCluster({
  markers: dummyData(),
  icons: [
      {min: 2, max: 100, url: "./img/blue.png", anchor: {x: 16, y: 16}, label: labelOptions},
      {min: 100, max: 1000, url: "./img/yellow.png", anchor: {x: 16, y: 16}, label: labelOptions},
      {min: 1000, max: 2000, url: "./img/purple.png", anchor: {x: 24, y: 24}, label: labelOptions},
      {min: 2000, url: "./img/red.png",anchor: {x: 32,y: 32}, label: labelOptions}
  ]
}, function (markerCluster) {

    markerCluster.on(plugin.google.maps.event.MARKER_CLICK, function (position, marker) {
      alert(marker.get("name"));
    });

});

Remove the red box

If you want to remove the red box, you just set boundsDraw = false.

map.addMarkerCluster({
  boundsDraw: false
  markers: dummyData(),
  icons: [
      {min: 2, max: 100, url: "./img/blue.png", anchor: {x: 16, y: 16}},
      {min: 100, max: 1000, url: "./img/yellow.png", anchor: {x: 16, y: 16}},
      {min: 1000, max: 2000, url: "./img/purple.png", anchor: {x: 24, y: 24}},
      {min: 2000, url: "./img/red.png",anchor: {x: 32,y: 32}}
  ]
}, function (markerCluster) {

});

API Reference

Create

map.addMarkerCluster() Add a marker cluster.

Methods

addMarker() Add one location.
addMarkers() Add multiple locations.
remove() Remove the marker cluster.

Events

MARKER_CLICK Arguments: LatLng, Marker
This event is fired when you click on a marker.