Google Map Javascript - показ всех точек

я хочу сделать карту на гугл мэпс. Задача следующая: вывести набор точек, у каждой точки должен быть паркер с HTML описанием. Если точек много в одно области, то они объединяются в одну большую и ставится цифра с их количеством. Ну и самое важное - после инициализации карты, все точки должны быть показаны, т. е. смещаем центр карты и зум.

У меня ранее всё работало на яндекс картах, там был такой параметр checkZoomRange, а код был следующий

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [53.9000000, 27.5666700],
            zoom: 9
        }, {
            searchControlProvider: 'yandex#search'
        }),
        clusterer = new ymaps.Clusterer({
            preset: 'islands#invertedVioletClusterIcons',
            clusterHideIconOnBalloonOpen: false,
            geoObjectHideIconOnBalloonOpen: false
        });

    clusterer.events
        .add(['mouseenter', 'mouseleave'], function (e) {
            var target = e.get('target'),
                type = e.get('type');
            if (typeof target.getGeoObjects != 'undefined') {
                if (type == 'mouseenter') {
                    target.options.set('preset', 'islands#invertedPinkClusterIcons');
                } else {
                    target.options.set('preset', 'islands#invertedVioletClusterIcons');
                }
            } else {
                if (type == 'mouseenter') {
                    target.options.set('preset', 'islands#pinkIcon');
                } else {
                    target.options.set('preset', 'islands#violetIcon');
                }
            }
        });

    var getPointData = function (index, points_text) {
            return {
                balloonContentBody: points_text[index]
            };
        },
        getPointOptions = function () {
            return {
                preset: 'islands#violetIcon'
            };
        },
        points = [
            [53.93001900000000,27.55036000000000],
    [53.93369800000000,27.65253400000000],
    [53.90867000000000,27.43233000000000],
    [53.90387500000000,27.54494300000000],
    [53.85507000000000,27.47963500000000]
        ],
        points_text = [
            "HTML 1",
            "HTML 2",
            "HTML 3",
            "HTML 4",
            "HTML 5"],
        geoObjects = [];

    for (var i = 0, len = points.length; i < len; i++) {
        geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i, points_text), getPointOptions());
    }

    clusterer.add(geoObjects);
    myMap.geoObjects.add(clusterer);

    myMap.setBounds(clusterer.getBounds(), {
        checkZoomRange: true
    });
});

Теперь я пытаюсь что-то похожее сделать. Пока что мой код для гугл карты такой

let points = [
        [53.93001900000000, 27.55036000000000],
        [53.93369800000000, 27.65253400000000],
        [53.90867000000000, 27.43233000000000],
        [53.90387500000000, 27.54494300000000],
        [53.85507000000000, 27.47963500000000]
    ],
    points_text = [
        "HTML 1",
        "HTML 2",
        "HTML 3",
        "HTML 4",
        "HTML 5"];

let infoWindow = new google.maps.InfoWindow();

var map;
var bounds = new google.maps.LatLngBounds();


var mapOptions = {mapTypeId: google.maps.MapTypeId.ROADMAP};

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

points.forEach(function callback(value, index) {
    let loc = new google.maps.LatLng(value[0], value[1]);
    bounds.extend(loc);
    addMarker(loc, points_text[index]);
});


map.fitBounds(bounds);
map.panToBounds(bounds);

function addMarker(location, name) {
    const marker = new google.maps.Marker({
        position: location,
        map: map,
        title: name,
        optimized: true,
    });

    marker.addListener("click", () => {
        infoWindow.close();
        infoWindow.setContent(marker.getTitle());
        infoWindow.open(marker.getMap(), marker);
    });

}

Осталось точки объединить в одну, если их много в одном месте.


Ответы (0 шт):