[ANSWERED] javascript – Markerclusterer get cluster size in meters

Question 1

You should probably use MarkerClustererPlus which is more recent than what you are using https://github.com/googlemaps/v3-utility-library/tree/master/packages/markerclustererplus

You can use the overlay created by the Marker Clusterer and use its projection to convert 2 points separated by n pixels, where n is your grid size. You can use the fromContainerPixelToLatLng method for that.

Then you can compute the distance between the 2 LatLng points by using the Geometry library (you need to include it with the API call) by using the computeDistanceBetween method.

Proof of concept: here

var map;
var markers = [];
var markerCluster;

function initialize() {

  var center = new google.maps.LatLng(0, 0);

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    minZoom: 1,
    center: center,
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // Cluster all the markers
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://ccplugins.co/markerclusterer/images/m',
    gridSize: 100,
    minimumClusterSize: 10
  });

  google.maps.event.addListener(map, 'idle', function() {

    getGridSizeInMeters();
  });
}

function getGridSizeInMeters() {

  var size = markerCluster.getGridSize();

  var p1 = markerCluster.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, 0));
  var p2 = markerCluster.getProjection().fromContainerPixelToLatLng(new google.maps.Point(0, size));

  var meters = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);

  console.log('Grid size is %i meters / %i kilometers', meters, meters / 1000);
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 180px;
}

<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/markerclustererplus/2.1.4/markerclusterer.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

Warning though, as depending on the zoom level, the latitude, and therefore the part of the map projection on which you do the calculation, you might get very different results due to the Mercator projection.

Question 2

I am learning google maps in javascript. I am following the tutorial code and so far I have the map with some markers on it which get clustered on zooming out. Here is the code –

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      #map {
        height: 500px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        var markers = locations.map(function(location) {
          return new google.maps.Marker({
            position: location
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
        );
        google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
            console.log(markerCluster.getGridSize());
        });
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer_compiled.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE&callback=initMap">
    </script>
  </body>
</html>

I would like to get the cluster size when I click on the cluster,which as of now I am using getGridSize to get,but it returns the value in pixels. Is there anyway I can get this value in meters or kilometers?

Bollate

[ANSWERED] javascript – Markerclusterer get cluster size in meters

By

Solution 1 :

Problem :

Comments

Comment posted by MrUpsidown

By

Related Post

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate