К сожалению, я новичок в javascript, поэтому столкнулся с проблемой, которую не смог найти в Google. У меня есть код, где я создаю круги на картах Google из массива местоположений, а также создаю маркер с динамическим текстом в середине. И тут возникает моя проблема: текст появляется только в последнем элементе массива местоположений.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var citymap = {
L1: {
center: {lat: 44.827978, lng: 18.196670}
},
L2: {
center: {lat: 44.812317, lng: 18.266185}
},
L3: {
center: {lat: 44.812317, lng: 18.366185}
},
};
function initMap()
{
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 44.827978, lng: 18.296670},
mapTypeId: 'terrain'
});
for (var city in citymap)
{
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.3,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.05,
map: map,
center: citymap[city].center,
radius: 4000
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading"><?php echo "Something";?></h1>'+
'<div id="bodyContent">'+
'<p><b><?php echo "Some";?></b><br>' +
'<?php echo "what";?>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: citymap[city].center
});
var marker = new google.maps.Marker({
position: citymap[city].center,
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCONb4RzPqTe1SSF9WwbVQ5-XNrYdRauPE&callback=initMap">
</script>
</body>
</html>
Все круги в порядке, но если я нажму на каждый из маркеров, contentString появится только на последнем маркере. Я хотел бы распечатать динамические данные для каждого из маркеров. Вот почему я поместил маркерную переменную в цикл for.
Можете ли вы помочь мне? Где я ошибся?
Спасибо!