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);
});
}
Осталось точки объединить в одну, если их много в одном месте.