Creating a map with various markers, each with its own info window. However, when attempting to display an info window on multiple markers, the position remains fixed at the first clicked marker. What could be causing this issue?
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(53.033117,5.639752);
var latingSiton = new google.maps.LatLng(53.0356197730161,5.62613738302669);
var SitonImg = 'images/siton.png';
var latingZee = new google.maps.LatLng(53.0360534900284,5.62488617774811);
var ZeeImg = 'images/zee.png';
var latingHylkema = new google.maps.LatLng(53.0373853769166,5.62924255777811);
var HylkemaImg = 'images/hylkema.png';
var latingDijkstra = new google.maps.LatLng(53.0360125088934,5.62735529113307);
var DijkstraImg = 'images/dijkstra.png';
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = 'test';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latingSiton,
map: map,
icon: SitonImg,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var marker = new google.maps.Marker({
position: latingZee,
map: map,
icon: ZeeImg,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var marker = new google.maps.Marker({
position: latingHylkema,
map: map,
icon: HylkemaImg,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var marker = new google.maps.Marker({
position: latingDijkstra,
map: map,
icon: DijkstraImg,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
Any suggestions would be greatly appreciated!