70 lines
2.5 KiB
JavaScript
70 lines
2.5 KiB
JavaScript
async function initContactsMap() {
|
|
if (!window.ymaps3) {
|
|
console.error('Yandex Maps API is not loaded');
|
|
return;
|
|
}
|
|
await ymaps3.ready;
|
|
ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
|
|
'@yandex/ymaps3-default-ui-theme@0.0'
|
|
]);
|
|
const {
|
|
YMap,
|
|
YMapDefaultSchemeLayer,
|
|
YMapDefaultFeaturesLayer,
|
|
YMapMarker,
|
|
YMapControls
|
|
} = ymaps3;
|
|
const { YMapZoomControl } = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
|
|
const mapElement = document.getElementById('map');
|
|
if (!mapElement) return;
|
|
const { coordinates, address, markerIconUrl } = window.contactsMapData ?? {};
|
|
if (!coordinates || !address) {
|
|
console.error('contactsMapData is missing required fields');
|
|
return;
|
|
}
|
|
const map = new YMap(
|
|
mapElement,
|
|
{
|
|
location: { center: coordinates, zoom: 16 },
|
|
behaviors: ['drag', 'dblClick', 'pinchZoom', 'magnifier'],
|
|
showScaleInCopyrights: true
|
|
},
|
|
[
|
|
new YMapDefaultSchemeLayer({}),
|
|
new YMapDefaultFeaturesLayer({})
|
|
]
|
|
);
|
|
map.addChild(new YMapMarker({ coordinates }, createContactsMarker(address, markerIconUrl)));
|
|
const zoomControl = new YMapControls({ position: 'right' });
|
|
zoomControl.addChild(new YMapZoomControl({}));
|
|
map.addChild(zoomControl);
|
|
}
|
|
function createContactsMarker(address, iconUrl) {
|
|
const el = document.createElement('div');
|
|
el.className = 'contacts-map__marker';
|
|
el.innerHTML = `
|
|
<button class="contacts-map__marker-button" type="button" aria-label="Показать адрес">
|
|
<img class="contacts-map__marker-icon" src="${iconUrl}" alt="" width="60" height="68">
|
|
</button>
|
|
<div class="contacts-map__popup">
|
|
<button class="contacts-map__popup-close" type="button" aria-label="Закрыть">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
|
|
<path d="M1 1L11 11M11 1L1 11" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="contacts-map__popup-title">Наш адрес:</div>
|
|
<div class="contacts-map__popup-text">${address}</div>
|
|
</div>
|
|
`;
|
|
el.querySelector('.contacts-map__marker-button').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
el.classList.add('is-open');
|
|
});
|
|
el.querySelector('.contacts-map__popup-close').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
el.classList.remove('is-open');
|
|
});
|
|
document.addEventListener('click', () => el.classList.remove('is-open'));
|
|
return el;
|
|
}
|
|
document.addEventListener('DOMContentLoaded', initContactsMap); |