Не работает кластер маркеров Карт Google - PullRequest
0 голосов
/ 20 октября 2019

Я следовал руководству Google, чтобы вставить маркеры кластера, но мой код не работает. Чего мне не хватает? Я уже писал этот вопрос много раз, но никто не может мне помочь. Это так трудно? Пожалуйста, помогите мне.

Вот фрагмент кода, куда я вставляю карту:

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 45.6140747, lng: 8.8427703},
        zoom:14
    });

    var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

    }

    function clearOverlays() {
        for (var i = 0; i < markersArray.length; i++ ) {
            markersArray[i].setMap(null);
        }
        markersArray.length = 0;
    }


    $( document ).ready(function() {
        dbRef.on('value', function(snapshot) {
            snapshot.forEach(function(child) {
                var childs=child.val();
                //var dataSegn = new Date(childs.data2.year,childs.data2.month,childs.data2.date);
                var contentString = 'Segnalazione del: '+childs.data+'<br>Per: '+childs.motivo+'<br><img src="'+childs.urlimmagine+'" alt="Foto" style="width:200px;height:300px;">';

                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                if(childs.motivo =='ESCREMENTI') {
                    var marker = new google.maps.Marker({
                        position: {lat: childs.lat, lng: childs.lon},
                        map: map,
                        title: childs.motivo,
                        icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                    });
                    markersArray.push(marker);
                    marker.addListener('click', function() {
                        map.setZoom(16);
                        map.setCenter(marker.getPosition());
                        infowindow.open(map, marker);
                    });
                }
                if(childs.motivo =='PERICOLOSI'){
                    var marker = new google.maps.Marker({
                        position: {lat: childs.lat, lng: childs.lon},
                        map: map,
                        title: childs.motivo,
                        icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
                    });
                    markersArray.push(marker);
                    marker.addListener('click', function() {
                        map.setZoom(16);
                        map.setCenter(marker.getPosition());
                        infowindow.open(map, marker);
                    });
                }
                if(childs.motivo =='RANDAGIO'){
                    var marker = new google.maps.Marker({
                        position: {lat: childs.lat, lng: childs.lon},
                        map: map,
                        title: childs.motivo,
                        icon : 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
                    });
                    markersArray.push(marker);
                    marker.addListener('click', function() {
                        map.setZoom(16);
                        map.setCenter(marker.getPosition());
                        infowindow.open(map, marker);
                    });
                }
                if(childs.motivo =='MALTRATTATI'){
                    var marker = new google.maps.Marker({
                        position: {lat: childs.lat, lng: childs.lon},
                        map: map,
                        title: childs.motivo,
                        icon : 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
                    });
                    markersArray.push(marker);
                    marker.addListener('click', function() {
                        map.setZoom(16);
                        map.setCenter(marker.getPosition());
                        infowindow.open(map, marker);
                    });
                }
            });
        });

        var markerCluster = new MarkerClusterer(map, markersArray, {
            imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
        });

});

Вот как я импортирую скрипт кластера:

<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initMap"async defer></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="scrip.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...