I am making a page on which the google map will render with many markers. I want infowindow to show for each marker when clicked. For this I had to add click event listener on each marker. Now since there can be hundreds of marker, I used a for loop. That is I have to add event listeners to hundreds of marker. For this I used the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#first-tab {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: green;
}
#second-tab {
position: absolute;
top: 140px;
left: 10px;
width: 100px;
height: 100px;
background-color: red;
}
#third-tab {
position: absolute;
top: 300px;
left: 10px;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<div id="map"></div>
<div id="first-tab"></div>
<div id="second-tab"></div>
<div id="third-tab"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363, lng: 131.044}
});
var contentString = [];
contentString[0] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
contentString[1] = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">New York</h1>'+
'<div id="bodyContent">'+
'<p><b>New York</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var markers = [];
locations = [{lat: -24.363, lng: 131.044}, {lat: -20.363, lng: 136.044}, {lat: -25.363, lng: 118.044}, {lat: -27.363, lng: 138.044}, {lat: -28.363, lng: 130.044}];
titles = ['rock', 'Alpha', 'beta', 'gamma', 'neta'];
for (var i = 2; i >= 0; i--) {
markers[i] = new google.maps.Marker({
position: locations[i],
map: map,
title: titles[i],
mytype: 1
});
}
for (var k = 4; k >= 3; k--) {
markers[k] = new google.maps.Marker({
position: locations[k],
map: map,
title: titles[k],
mytype: 0
});
}
var infowindow = new google.maps.InfoWindow();
function myclosure(j) {
return function() {
infowindow.setContent(contentString[j]);
infowindow.open(markers[j].get('map'), markers[j]);
}
}
for (var j = 4; j >= 0; j--) {
markers[j].addListener('click', myclosure(j) );
}
document.getElementById("second-tab").addEventListener('click', function() {
for (var i = 2; i >= 0; i--) {
markers[i].setMap(null);
}
for (var i = 4; i >= 3; i--) {
markers[i].setMap(map);
}
});
document.getElementById("first-tab").addEventListener('click', function() {
for (var i = 4; i >= 3; i--) {
markers[i].setMap(null);
}
for (var i = 2; i >= 0; i--) {
markers[i].setMap(map);
}
});
document.getElementById("third-tab").addEventListener('click', function() {
for (var i = 4; i >= 0; i--) {
markers[i].setMap(map);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBga3chd-auBMGLGITc3rjact16mozcI4Q&callback=initMap">
</script>
</body>
</html>
I get the error markers[j] isn't defined in the line including the event listener. If instead of loop I manually do the following:
markers[0].addListener('click', function(){
infowindow.setContent(contentString[0]);
infowindow.open(markers[0].get('map'), markers[0]);
});
Then the infowindow on marker[0] works fine. So,
Why isn't myclosure function working as expected?
Edit: It has been suggested that rather calling the function myclosure inside the event listener I should should use the event listener inside an immediately invoked function. But why doesn't my method work? I tried the same approach on simple dom elements and it worked. Here is the code I tried:
var cont = document.getElementById("container");
function myclosure(i){
return function(){
alert("test" + i);
}
}
for (var i = 1; i >= 0; i--) {
cont.getElementsByTagName("div")[i].addEventListener("click",myclosure(i) );
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
width: 100%;
background-color: #ffff12;
}
.one, .two {
padding: 10px;
}
.one {
background-color: #777;
}
.two {
background-color: #aaa;
}<div id="container">
<div class="one">first</div>
<div class="two">second</div>
</div>I have used exactly the same approach as I used with google maps.
Why is this code working but not the google map code?
Aucun commentaire:
Enregistrer un commentaire