Я создал карту Google с наложением SVG. Она отлично работает и выравнивается. Однако у меня есть некоторые события onclick, mouseover и другие внутри файла svg. Когда я нажимаю элемент внутри файла svg, загруженного с помощью Google Maps Api Overlay, ничего не происходит.
Есть ли способ достичь sh этого? Есть ли способ манипулировать svg после его загрузки в Google Maps в виде наложения?
<div class="content">
<div id="map"></div>
<div class="actions">
<button id="btnMapGetCenterCoordinates" type="button">Mostrar coordenadas</button>
<span id="mapConfigEl"></span>
<button id="btnLoadSvg" type="button">Carregar SVG</button>
</div>
</div>
<script>
$(function() {
function mapGetConfig() {
let lat = map.getCenter().lat();
let lng = map.getCenter().lng();
let zoom = map.getZoom();
return { lat, lng, zoom };
}
function mapLoadSvg() {
let bounds = {
north: map.getBounds().getNorthEast().lat(),
south: map.getBounds().getSouthWest().lat(),
east: map.getBounds().getNorthEast().lng(),
west: map.getBounds().getSouthWest().lng()
};
const overlay = new google.maps.GroundOverlay('map.svg', bounds);
overlay.setMap(map);
}
let mapConfigEl = document.querySelector('#mapConfigEl');
let btnMapGetCenterCoordinates = document.querySelector('#btnMapGetCenterCoordinates');
btnMapGetCenterCoordinates.addEventListener('click', function (e) {
let mapConfig = mapGetConfig();
mapConfigEl.innerHTML = `lat: ${mapConfig.lat}<br>lnt: ${mapConfig.lng}<br>zoom: ${mapConfig.zoom}`;
});
let btnLoadSvg = document.querySelector('#btnLoadSvg');
btnLoadSvg.addEventListener('click', function (e) {
mapLoadSvg();
});
});
</script>