Есть сайт. Бэкэнд - asp net mvc. БД - ms sql
На нем есть карта google maps js. При загрузке страницы инициализируется карта.Есть маркеры которые берутся из базы данных. У каждого маркера, при нажатии на котором появляется инфоокно. Инфоокно реализовано не стандартным InfoWindow, а через overlay, из-за дизайна.
В этом Overlay слое создается html div, в который, в цикле по каждому маркеру прикрепляется свой контент.
Каким образом можно сделать так чтобы:
1. С какой-то периодичностью (n) запрашивались новые данные из базы данных и обновлялись для каждого маркера свои контенты без перезагрузки страницы ?
2. И примерно такой же вопрос, как правильно обновлять маркеры, без перезагрузки страницы? к примеру, человек открыл страницу с картой, там на какой то момент есть маркеры, с другого места добавили маркеры, каким образом первому получить изменения без перезагрузки? это нужно делать 1 раз в секунду, думал удалять и по новому рисовать, но тоже не красиво, на карте постоянно будут дергаться маркеры.
Часть js метода рисования маркера и добавления клика
RetArr - массив из бд полученный при загрузке страницы. В нем лежат данные по маркерам, координаты и другая инфа.
RetArr.forEach(n => {
n.markerac = new google.maps.Marker({
position: new google.maps.LatLng(n.Gpslat, n.GpsLng),
map: map,
icon: '/',
zIndex:10,
content: n.CString,
});
n.markerac.addListener('click', function (e) {
infoBox1 = new InfoBox({
latlng: this.getPosition(),
map: map,
content: n.CString
});
})
InfoBox
function InfoBox(param) {
google.maps.OverlayView.call(this);
this.latlng_ = param.latlng;
this.map_ = param.map;
this.content = param.content;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 5;
var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed", function () {
return me.panMap.apply(me);
});
this.setMap(this.map_);
}
и часть метода, где создается div
InfoBox.prototype.createElement = function () {
var panes = this.getPanes();
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement("div");
div.className = "infobox"
var contentDiv = document.createElement("div");
contentDiv.className = "content"
contentDiv.innerHTML = this.content;
function removeInfoBox(ib) {
return function () {
ib.setMap(null);
};
}
div.appendChild(contentDiv);
div.style.display = 'none';
panes.floatPane.appendChild(div);
this.panMap();
} else if (div.parentNode != panes.floatPane) {
div.parentNode.removeChild(div);
panes.floatPane.appendChild(div);
}
}