У гугл карт ест такая настройка: изменять стандартный маркер на свою картинку
var markerImageHover = new google.maps.MarkerImage(
'qqq.jpg',
new google.maps.Size(300, 300)
);
Я хочу так изменить маркер, но вместо картинки применить html тэг.Есть ли такая возможность?
Нужно сделать свой OverlayView
class HTMLMarker extends google.maps.OverlayView {
constructor(LatLngPosition, content) {
super();
this.position = LatLngPosition;
this.content = content;
this.div = document.createElement('div');
}
onAdd() {
this.div.className = 'html-marker';
this.div.style.position = 'absolute';
const panes = this.getPanes();
panes.overlayImage.appendChild(this.div);
if (typeof this.content === 'undefined') {
return;
}
if (typeof this.content === 'string') {
this.div.innerHTML = this.content;
} else if (typeof this.content.tagName !== 'undefined') {
try {
this.div.appendChild(this.content);
} catch (err) {
}
}
}
remove() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
}
draw() {
const position = this.getProjection().fromLatLngToDivPixel(this.position);
this.div.style.left = `${position.x - (this.div.offsetWidth / 2)}px`;
this.div.style.top = `${position.y - (this.div.offsetHeight / 2)}px`;
}
getPosition() {
return this.position;
}
getMarkerElement() {
return this.div;
}
}
export default HTMLMarker;
Пример создания маркера
const marker = new HTMLMarker(
new google.maps.LatLng(lat, lng), htmlContent,
);
marker.setMap(googleMapObject);
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости