|
Сообщение от Julia1991
|
|
Есть div в который подгружается карта. По умолчанию вместо этого блока отображается другой div с другим id (в этом блоке картинка). По нажатию на эту картинку меняется id на id блока с картой. В общем должно подгрузиться содержимое блока с картой. С помощью метода load() у меня получилось сделать, но подскажите как сделать без перезагрузки блока?
|
Вместо того, чтобы писать загадочно, и в терминах элементов, лучше напишите, как пример должен работать с точки зрения человека. Например, есть картинка местности, при нажатии на неё должна вместо картинки появиться карта той местности... Такое можно сделать так...
<!DOCTYPE html>
<html>
<body>
<button lat="47.5550479" lng="10.7492965" is="map-app">
<img src="https://picsum.photos/id/1040/500/400">
</button>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA1EguMI4GxbUwHxlH-CE9ZtC4KnJQzaeY">
</script>
<script>
function initMap(node) {
var center = {
lat: Number(node.getAttribute("lat")),
lng: Number(node.getAttribute("lng")),
};
var map = new google.maps.Map(node, { zoom: 15, center });
var marker = new google.maps.Marker({
position: center,
map
});
node.mapIsInitialized = true;
}
document.addEventListener("click", (event) => {
const button = event.target.closest("button[is='map-app']");
if (button && !button.mapIsInitialized) {
initMap(button);
}
});
</script>
<style>
button[is="map-app"] {
all: unset;
position: relative;
width: 500px;
max-width: 100vw;
height: 400px;
}
</style>
</body>
</html>