Я обновил код, чтобы показать пример, который мне удалось получить, когда информационное окно отображается в виде боковой панели. Стили работают, но теперь я хотел бы сделать всплывающее окно infowindow и отобразить его на 100%.
Я гуглил многие сайты и, похоже, не могу найти решение. Был бы очень признателен за небольшую помощь. Спасибо. Уэсли
веб-сайт PropertyVR
Вот код: скрипка
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Property VR</title>
<style type="text/css">html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 69%;
float: left;
overflow: hidden;
border: thin solid #333;
}
#content-window {
float: right;
font-family: 'Roboto','sans-serif';
height: 100%;
line-height: 30px;
padding-left: 10px;
width: 29%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="content-window"></div>
<script>
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
gestureHandling: 'greedy',
center: {lat: -33.934444, lng: 18.869167}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://www.propertyvr.co.za/maps.kmz?timestamp='+new
Date().getTime(),
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script><script async defer
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBHb5HVZ91w3QlewCV3TNzhIQBf1jtuScE&callback=initMap">
</script></body>
</html>