Кластеризация маркеров с geojson с использованием карт google

Question

Я создал html-страницу с помощью API-интерфейсов Google Maps Javascript. На этой карте отображаются маркеры из файла geojson. Все работает хорошо. Я хочу добавить кластеризацию маркеров. Но почему-то это не работает. Я не очень хорошо разбираюсь в Javascript. Скажите, пожалуйста, как изменить свой код.

var map; 
 
function initMap() { 
 

 
    var styleArray = [ 
 
    { 
 
     featureType: 'all', 
 
     stylers: [ 
 
     { saturation: -80 } 
 
     ] 
 
    },{ 
 
     featureType: 'road.arterial', 
 
     elementType: 'geometry', 
 
     stylers: [ 
 
     { hue: '#00ffee' }, 
 
     { saturation: 50 } 
 
     ] 
 
    },{ 
 
     featureType: 'poi.business', 
 
     elementType: 'labels', 
 
     stylers: [ 
 
     { visibility: 'off' } 
 
     ] 
 
    } 
 
    ]; 
 

 
    var mapOptions = { 
 
    zoom: 14, 
 
    center: new google.maps.LatLng(42.34, -71.05), 
 
    styles: styleArray 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), 
 
    mapOptions); 
 

 

 
    // Load GeoJSON. 
 
    map.data.loadGeoJson('/map.geojson'); 
 

 
    map.data.setStyle(function(feature) { 
 
    return {icon:feature.getProperty('icon')}; 
 
    }); 
 

 
    
 
    var infoWindow = new google.maps.InfoWindow({ 
 
     content: "", 
 
     pixelOffset: new google.maps.Size(0, -40), 
 
     maxWidth: 250 
 
    }); 
 

 
    map.data.addListener('mouseover', function(event) { 
 
    var desc = event.feature.getProperty("description"); 
 
    var titl = event.feature.getProperty("address"); 
 
    var myadd = event.feature.getProperty("status"); 
 
    var myimage = event.feature.getProperty("image"); 
 
    var myland = event.feature.getProperty("land"); 
 
    var mysize = event.feature.getProperty("size"); 
 
    var myunits = event.feature.getProperty("units"); 
 
    var myphaze = event.feature.getProperty("permit"); 
 
    var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #0b3061;font-size: 16px;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>' + titl + '</b></strong><br></div><br><div><img src=' + myimage + 'width="100" height="100" hspace="4" vspace="1" align="left"><p align="left"><b>Address: </b>' + myadd + '<br><b>Land Sq. Feet: </b>' + myland + '<br><b>Building Size: </b>' + mysize + '<br><b>Residential Units: </b>' + myunits + '<br><b>Project Phase: </b>' + myphaze + '</p><p align="justify"><b>Project Description: </b>' + desc + '</p></div>'; 
 
    infoWindow.setContent(contentString); 
 
    
 
    var anchor = new google.maps.MVCObject(); 
 
    anchor.setValues({ //position of the point 
 
      position: event.latLng, 
 
      anchorPoint: new google.maps.Point(0, -10) 
 
    }); 
 

 
    infoWindow.open(map, anchor); 
 

 

 
    }); 
 

 
    var markerCluster = new MarkerClusterer(map, markers); 
 
    
 

 
}

Answer 1

В вашем примере инициализация markers массива отсутствует, вы, вероятно, хотите, чтобы извлечь маркеры из загруженного файла GeoJSON. Если это так, то замените строку:

map.data.loadGeoJson('/map.geojson'); 

с

map.data.loadGeoJson('/map.geojson', null, function (features) { 

    var markers = features.map(function (feature) { 
     var g = feature.getGeometry(); 
     var marker = new google.maps.Marker({ 'position': g.get(0) }); 
     return marker; 
    }); 

    var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' }); 
}); 

Пример

var map; 
 
function initMap() { 
 

 
    var styleArray = [ 
 
     { 
 
      featureType: 'all', 
 
      stylers: [ 
 
       { saturation: -80 } 
 
      ] 
 
     }, { 
 
      featureType: 'road.arterial', 
 
      elementType: 'geometry', 
 
      stylers: [ 
 
       { hue: '#00ffee' }, 
 
       { saturation: 50 } 
 
      ] 
 
     }, { 
 
      featureType: 'poi.business', 
 
      elementType: 'labels', 
 
      stylers: [ 
 
       { visibility: 'off' } 
 
      ] 
 
     } 
 
    ]; 
 

 
    var mapOptions = { 
 
     zoom: 12, 
 
     center: new google.maps.LatLng(6.3088468, 5.6223226), 
 
     styles: styleArray 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), 
 
     mapOptions); 
 

 

 

 

 
    // Load GeoJSON. 
 
    //map.data.loadGeoJson('https://gist.githubusercontent.com/vgrem/4d6ff14d50f408e864f1ee4614653c1c/raw/schools.geojson'); 
 

 
    map.data.loadGeoJson('https://gist.githubusercontent.com/vgrem/4d6ff14d50f408e864f1ee4614653c1c/raw/schools.geojson', null, function (features) { 
 

 
     var markers = features.map(function (feature) { 
 
      var g = feature.getGeometry(); 
 
      var marker = new google.maps.Marker({ 'position': g.get(0) }); 
 
      return marker; 
 
     }); 
 

 
     var markerCluster = new MarkerClusterer(map, markers,{ imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' }); 
 
    }); 
 

 

 

 
    map.data.setStyle(function (feature) { 
 
     return { icon: feature.getProperty('icon'), visible: false }; 
 
    }); 
 

 

 

 
} 
 

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

#map { 
 
    height: 400px; 
 
}

<link rel="stylesheet" href="style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script> 
 
<div> 
 
    <div id="map"></div> 
 
</div>

Answer 2

Ответ @Vadim хорош, но он принял мне немного узнать, как использовать пользовательский значок маркера вместо красных по умолчанию, как

map.data.setStyle(function(feature) { 
    return {icon:feature.getProperty('icon')}; 
}); 

не работает Это работает:

var markers = features.map(function (feature) { 
     var g = feature.getGeometry(); 
     var iconurl = feature.getProperty('icon'); 
     var marker = new google.maps.Marker({ 
      'position': g.get(0) , 
      'icon': iconurl 
     }); 
     return marker; 
    });