Как изменять текст, который находится в блоке div при выборе select на карте google
вот сам код:
var markers = [{
latlng: [50.44701118, 30.45066833],
title: 'Пункт 1',
link: '#'
}, {
latlng: [50.4266545, 30.5430044],
title: 'Пункт 2',
link: '#'
}, {
latlng: [50.39687412, 30.5033498],
title: 'Пункт 3',
link: '#'
}];
var map = null;
var mSelect = document.querySelector('#markers');
mSelect.innerHTML += markers.map((n, i) => `<option value="${i}">${n.title}</option>`).join('')
mSelect.addEventListener('change', function() {
var marker = markers[this.value];
if (marker) {
map.setCenter({
lat: marker.latlng[0],
lng: marker.latlng[1]
})
map.setZoom(17)
}
})
document.querySelector('#use_link').addEventListener('click', function() {
var marker = markers[mSelect.value];
if (marker) {
window.location = marker.link
} else {
alert('выберите что-нибудь')
}
})
var contentString = '<div id="content">Тут всё то про что должно быть рассказано</div>';
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 10,
center: new google.maps.LatLng(50.44787896, 30.71912033),
mapTypeId: google.maps.MapTypeId.roadmap,
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}]
},
{
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
},
{
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#f5f5f5"
}]
},
{
"featureType": "administrative",
"stylers": [{
"color": "#981254"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [{
"color": "#c0c0c0"
},
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#c0c0c0"
}]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
},
{
"featureType": "poi.place_of_worship",
"stylers": [{
"color": "#eeeeee"
}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [{
"color": "#981254"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#dadada"
}]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
},
{
"featureType": "road.local",
"elementType": "labels",
"stylers": [{
"color": "#981254"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"visibility": "simplified"
}]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"color": "#e5e5e5"
}]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [{
"color": "#eeeeee"
}]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#c9c9c9"
}]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}
]
});
markers.forEach(n => new google.maps.Marker({
position: new google.maps.LatLng(...n.latlng),
map: map,
title: n.title
}));
}
google.maps.event.addDomListener(window, 'load', initialize);
.box {
position: relative;
width: 100%;
height: 500px;
}
.block-adres {
position: absolute;
width: 350px;
height: 500px;
left: 50px;
top: 0;
background-color: #c5c5c5;
opacity: 0.9;
margin-left: 64%;
z-index: 5;
}
.map {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.sel {
width: 215px;
height: 30px;
margin: 0px 9px;
border-bottom: 1px solid #a43c69;
border-radius: 2px;
background: #c5c5c5;
color: #a33c69;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
a.zabor_but {
color: #fff;
/* цвет текста */
text-decoration: none;
/* убирать подчёркивание у ссылок */
user-select: none;
/* убирать выделение текста */
background: rgb(157, 42, 92);
/* фон кнопки */
padding: .7em 1.5em;
/* отступ от текста */
outline: none;
/* убирать контур в Mozilla */
margin: 0px 9px;
}
a.zabor_but:hover {
background: #e50a7f;
}
/* при наведении курсора мышки */
a.zabor_but:active {
background: rgb(157, 42, 92);
}
/* при нажатии */
<div class="box">
<div class="map" id="map_canvas"></div>
<div class="block-adres">
<div class="container">
<div class="row">
<div class="col-xs-9 col-sm-6 adres">
<div class="bottom_line"></div>
<br><br>
<p style="margin: 0px 9px;">Выберите ближайший пункт</p><br>
<select id="markers" class="sel">
<option>Выбрать пункт</option>
</select>
<br><br>
<div>Текст, который должен меняться</div>
<br>
<a href="#" class="zabor_but" id="use_link">Выбрать</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB33HcYgZLrls9Uauth_nJGvDkiBk0lAqA"></script>