Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

366
Vistas
Google Maps markerClusterer.MarkerClusterer not working with geoJSON

Any ideas why my markers aren't clustering? I've tried many different ways and nothing will make them cluster. I realize there might be something wrong with the arguments I'm passing the markerClusterer but I can't find a way to make it work with anything. There's also little to no documentation on markerClusterer.MarkerClusterer (which is required when using unpkg).

function initMap() {
    //set map options
    var myMapOptions = {
        center: {lat: 40.7498024, lng: -73.9774375},
        zoom: 12,  
    }
    
    //fill the html div with a map and pass in map options
    var myNewMap = new google.maps.Map(document.getElementById('mymap'), myMapOptions);
    
    //pass in data
    myNewMap.data.loadGeoJson('missedConnections.geojson');

    //define popup windows
    var infowindow = new google.maps.InfoWindow({maxWidth: 750, autopanMargin: 10,});
    
    //create new popup windows on marker click
    myNewMap.data.addListener('click', function(event) {
        console.log(event);
        // set variables
        let videourl = event.feature.getProperty('videoURL');
        //padding/margin is wonky on mobile vs desktop
        let html = '<video style="padding-bottom: 5px; padding-right: 3px;" preload="none" autoplay width=" 90%"><source src="' + videourl + '"></video>'; 
        // show the html variable in the infowindow
        infowindow.setContent(html); 
        infowindow.setPosition(event.latLng);
        infowindow.setOptions({pixelOffset: new google.maps.Size(0, -30)}); 
        // move the infowindow up 42 pixels to the top of the default marker icon
        infowindow.open(myNewMap);
    });

    new markerClusterer.MarkerClusterer({myNewMap.data, myNewMap});

}
about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Into your html:

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

Into your js, code both of these works

var mc = new markerClusterer.MarkerClusterer({ markers, map });

or

new markerClusterer.MarkerClusterer({ markers, map });
about 4 years ago · Juan Pablo Isaza Denunciar

0

First, you are using object shorthand incorrectly.

Second, that isn't the interface for the library.

const markerCluster = new MarkerClusterer({ map, markers });

where markers is an array of google.maps.Markers. See MarkerClustererOptions.

about 4 years ago · Juan Pablo Isaza Denunciar

0

Instantiate the markerCluster like this

new MarkerClusterer({ markers: myNewMap.data, map: myNewMap});

remember that the object now receives a JSON in its constructor and keep in mind that myNewMap.data must be an array of Markers and therefore myNewMap the object with which you reference the map.

about 4 years ago · Walter Paz Londoño Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda