Clustering markers from geojson using google maps

Question

I created html page using Google Maps Javascript API. This map displays markers from geojson file. Everything works well. I want to add clustering of markers. But for some reason this does not work. I'm not very good with Javascript. Tell me please how to change my code.

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

In your example the initialization of markers array is missing, you probably want to extract markers from loaded GeoJSON file. If so, then replace the line:

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

with

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' });
});

Example

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

The answer of @Vadim is good, but it took me a while to find out how to use custom marker icon instead of the default red ones as

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

does not work This works:

    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;
    });