All geek questions in one place

How to group clustered Google Maps or overlap markers

Here's an example OverlappingMarkerSpiderfierusing the Overlapping Marker Spiderfier, which is an overlap marker based on their distance. Is there a way to achieve the same effect based on regions, for example, the entire country marker is overlapped and displayed as a group of markers, and after clicking on the same marker that expands.

Edited by

I have a search stack and google overflow for features, but no solution has been found if anyone has an idea / fiddle on how to manually perform clustering with the marker manager, which also use the polygon / region.

+4
source share
1 answer

Earlier on stack overflow ....

My approach to marker clustering

My approach to this problem would be to follow @geocodezip's suggestion. I would use the answer he provided at fooobar.com/questions/1651669 / ... to create a map of the regions.

Each region will know what markers it has. In addition, if you want to follow the principle of least carnality, you can also know each marker in which region it belongs. For this, I would use MarkerLibs or something similar to it.

, , . , @geocodezip https://developers.google.com/maps/articles/toomanymarkers, , ( ).

Rambo . , , , , , .

, ( ) () , .

, , .

...

" - , , , ".

.

, ... - .

- , , .

/

, , .

( ), POI (Points of Interest).

, , ( !)

POI , , , , . :

const POIS = [{
    district: 'LISBOA',
    name: 'Torre de Belem',
    coords: {
        lat: 38.69383759999999,
        lng: -9.2127885
    }
}, {
    district: 'LISBOA',
    name: 'Mosteiro dos Jeronimos',
    coords: {
        lat: 38.69703519999999,
        lng: -9.2068921
    }
},
...
];

PS: !

, , , POI (), .

, , POI, .

centroid ( - , , !) ( ).

?

. , markermanager, !

- , !

, , POI , ,

PS: , , .

, , , .

index.html. div JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ZtEnzC81C1TnUI1Ri44JgJJIh5KaltM"></script>
  </head>
  <body>
    <div id="map"></div>
    <script src="markermanager.js"></script>
    <script src="districtData.js"></script>
    <script src="poiData.js"></script>
    <script src="myscript.js"></script>
  </body>
</html>

. myscript.js. markermaner.js lib , poiData.js districtData.js.

, , . , , , setUpMarkerManager(), .

"use strict";

/*global google*/
/*global DISTRICTS*/
/*global POIS*/
/*global MarkerManager*/

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 38.184,
      lng: -7.117
    },
    mapTypeId: 'terrain'
  });

  setUpMarkerManager(map);
  drawDistricts(map);
}

//Check https://github.com/googlemaps/v3-utility-library/blob/master/markermanager/docs/reference.html
function setUpMarkerManager(aMap) {
  let mgr = new MarkerManager(aMap);

  let poisPerDistrict = new Map();
  let allPOISArray = [];


  POIS.forEach(element => {

    let poiDistrict = element.district;
    if (poisPerDistrict.has(poiDistrict)) {
      let poiCount = poisPerDistrict.get(poiDistrict) + 1;
      poisPerDistrict.set(poiDistrict, poiCount);
    }
    else
      poisPerDistrict.set(poiDistrict, 1);

    allPOISArray.push(new google.maps.Marker({
      position: new google.maps.LatLng(element.coords.lat, element.coords.lng),
      title: element.name
    }));
  });

  let inverseCenter;
  let disctrictsCenter = [];
  DISTRICTS.forEach(element => {
    inverseCenter = getPolygonCenter(element.coords.coordinates[0]);

    if (poisPerDistrict.get(element.id))

      //For cool markers check https://developers.google.com/chart/image/docs/gallery/dynamic_icons#scalable_pins
      disctrictsCenter.push(new google.maps.Marker({
        position: new google.maps.LatLng(inverseCenter[1], inverseCenter[0]),
        icon: "https://chart.googleapis.com/chart?chst=d_map_spin&chld=0.6|0|FFFFFF|12|_|" + poisPerDistrict.get(element.id),
        title: element.name
      }));
  });

  google.maps.event.addListener(mgr, 'loaded', function() {
    mgr.addMarkers(allPOISArray, 9);
    mgr.addMarkers(disctrictsCenter, 0, 8);
    mgr.refresh();
  });
}

// https://stackoverflow.com/a/37472218/1337392
function getRandomColor() {
  return '#' + Math.random().toString(16).slice(2, 8);
}

function drawDistricts(aMap) {
  let randomColor;

  DISTRICTS.forEach(element => {
    randomColor = getRandomColor();

    new google.maps.Polygon({
      paths: getPolygonCoordinates(element.coords),
      strokeColor: randomColor,
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: randomColor,
      fillOpacity: 0.35,
      map: aMap
    });
  });
}

function getPolygonCoordinates(polygon) {
  let coords = polygon.coordinates[0];
  let result = [];

  coords.forEach(element => {
    result.push({
      lng: element[0],
      lat: element[1]
    });
  });

  return result;
}

//Check https://stackoverflow.com/a/16282685/1337392
//Check https://en.wikipedia.org/wiki/Centroid
function getPolygonCenter(coords) {
  var minX, maxX, minY, maxY;
  for (var i = 0; i < coords.length; i++) {
    minX = (coords[i][0] < minX || minX == null) ? coords[i][0] : minX;
    maxX = (coords[i][0] > maxX || maxX == null) ? coords[i][0] : maxX;
    minY = (coords[i][1] < minY || minY == null) ? coords[i][1] : minY;
    maxY = (coords[i][1] > maxY || maxY == null) ? coords[i][1] : maxY;
  }
  return [(minX + maxX) / 2, (minY + maxY) / 2];
}

initMap();

, markermanager.js. , , , v1.1, URL- .

MANUALLY MADE MANUALLY CORRECTED. , , , .

, StackOverflow , GitHub, .

poiData.js - , -, , ! : https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon/blob/master/poiData.js

districtData.js . : https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon/blob/master/districtData.js

CSS, .

/ GitHub: https://github.com/Fl4m3Ph03n1x/marker-cluster-polygon

, , .

, , , , , , ! , , , , , , : P

, , , !

, , ( ) . , , , , .

, , , , , !

, , , , !

+2

Source: https://habr.com/ru/post/1651668/

More articles:


All Articles