Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

371
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda