https://github.com/lpikora/cluster_test

https://github.com/lpikora/cluster_test

cordova googlemaps

Last synced: 19 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/lpikora/cluster_test
• Owner: lpikora
• Created: 2017-08-30T15:14:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-09-08T12:54:26.000Z (over 7 years ago)
• Last Synced: 2024-10-26T14:54:48.837Z (2 months ago)
• Topics: cordova, googlemaps
• Language: JavaScript
• Size: 12.5 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# marker cluster demo

![](./demo.gif)

```js

document.addEventListener("deviceready", function () {

    var mapDiv = document.getElementById("map_canvas");

    var options = {

        'camera': {

            'target': data[0].position,

            'zoom': 3

        }

    };

    var map = plugin.google.maps.Map.getMap(mapDiv, options);

    map.on(plugin.google.maps.event.MAP_READY, onMapReady);

});

function onMapReady() {

    var map = this;

    var label = document.getElementById("label");

    //------------------------------------------------------

    // Create a marker cluster.

    // Providing all locations at the creating is the best.

    //------------------------------------------------------

    map.addMarkerCluster({

      //debug: true,

      //maxZoomLevel: 5,

      markers: data,

      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) {

        //-----------------------------------------------------------------------

        // Display the resolution (in order to understand the marker cluster)

        //-----------------------------------------------------------------------

        markerCluster.on("resolution_changed", function (prev, newResolution) {

            var self = this;

            label.innerHTML = "zoom = " + self.get("zoom") + ", resolution = " + self.get("resolution") + "";

        });

        markerCluster.trigger("resolution_changed");

        //----------------------------------------------------------------------

        // Remove the marker cluster

        // (Don't remove/add repeatedly. This is really bad performance)

        //----------------------------------------------------------------------

        var removeBtn = document.getElementById("removeClusterBtn");

        removeBtn.addEventListener("click", function() {

          markerCluster.remove();

        }, {

          once: true

        });

        //------------------------------------

        // If you tap on a marker,

        // you can get the marker instnace.

        // Then you can do what ever you want.

        //------------------------------------

        var htmlInfoWnd = new plugin.google.maps.HtmlInfoWindow();

        markerCluster.on(plugin.google.maps.event.MARKER_CLICK, function (position, marker) {

          var html = [

            "
",

            "",

            "" + (marker.get("title") || marker.get("name")) + ""

          ];

          if (marker.get("address")) {

            html.push("
" + marker.get("address") + "
");

          }

          if (marker.get("phone")) {

            html.push("Tel: " + marker.get("phone") + "

");

          }

          html.push("");

          htmlInfoWnd.setContent(html.join(""));

          htmlInfoWnd.open(marker);

        });


    });

}

```