Как же все таки это сделать?
Нужен тёмный стиль, но что бы балун и остальные элементы карты были оригинального вида
В head делаю так:
<script src="https://api-maps.yandex.ru/2.1/?apikey={$system['yandex_geolocation_key']}&lang=ru_RU"></script>
Скрипт:
<script>
{literal}
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.yandex-map-container').forEach(async function (mapContainer) {
let location = mapContainer.getAttribute('data-location');
if (location) {
// Use Yandex Geocoder API to fetch coordinates
let geocodeUrl = `https://geocode-maps.yandex.ru/1.x/?apikey={/literal}{$system['yandex_geolocation_key']}{literal}&geocode=${encodeURIComponent(location)}&format=json`;
try {
let response = await fetch(geocodeUrl);
let data = await response.json();
// Extract coordinates
if (data.response.GeoObjectCollection.featureMember.length > 0) {
let pos = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos;
let [lon, lat] = pos.split(" "); // Yandex returns "lon lat"
// Initialize Yandex Map
ymaps.ready(function () {
let myMap = new ymaps.Map(mapContainer, {
center: [lat, lon], // Use extracted coordinates
zoom: 14,
controls: []
// Removing the standard set of buttons
}, {
suppressMapOpenBlock: true
});
// Add a placemark
myMap.geoObjects.add(new ymaps.Placemark([lat, lon], {
balloonContent: location
}));
});
} else {
console.error("Location not found:", location);
}
} catch (error) {
console.error("Geocoding error:", error);
}
}
});
});
{/literal}
</script>
Пробую использовать это:
https://yandex.ru/maps-api/map-style-editor