CODEWITHSUNDEEP
javascriptmapsgoogle-maps-markersinfowindow
fischimportstationde
fischimportstationde

Reputation: 1

No Info Window for markers

From external file:

const pos=[
[50.739,7.0894,0,9,0],
[50.839,7.1894,10,10,100],
[50.939,7.2894,10,11,50]
];

This is my code:

<script>
  function initMap() {
  const map = new google.maps.Map(document.getElementById("map"),{zoom:8,center:{lat:50.667921396523546,lng:7.150112452250704}});

  //Start
  const infowindow = new google.maps.InfoWindow({content:"Start",ariaLabel:"Start"});
  const marker = new google.maps.Marker({position:{lat:50.667921396523546,lng:7.150112452250704},map,title:"Start"});
  marker.addListener("click", () => {infowindow.open({anchor:marker,map});});

  infowindowA = new Array;
  markerA = new Array;
  for (i=0;i<pos.length;i++){
  //infowindowA[i] = new google.maps.InfoWindow({content:"Pos",ariaLabel:"Pos"});
  infowindowA[i] = new google.maps.InfoWindow({content:"Pos "+(i+1)+"<br>Zeit "+pos[i][3]+"<br>akt. Geschwindigkeit "+pos[i][4]+"km/h<br>Distanz zu Pos"+i+" "+pos[i][2]+"km",ariaLabel:"Pos"+(i+1)}); 
  markerA[i] = new google.maps.Marker({position:{lat:pos[i][0],lng:pos[i][1]},map,title: "Pos"+(i+1)});
  markerA[i].addListener("click", () => {infowindowA[i].open({anchor:markerA[i],map});});
  }

  //Ziel
  const infowindowz = new google.maps.InfoWindow({content:"Ziel",ariaLabel:"Ziel"});
  const markerz = new google.maps.Marker({position:{lat:50.039600,lng:8.530919},map,title: "Animal Lounge"});
  markerz.addListener("click", () => {infowindowz.open({anchor:markerz,map});});
}
window.initMap = initMap;
</script>

InfoWindow only appears for Start and Ziel, but not for markers in the loop.

These two lines in the for loop may have an error:

infowindowA[i] = new google.maps.InfoWindow({content:"Pos "+(i+1)+"<br>Zeit "+pos[i][3]+"<br>akt. Geschwindigkeit "+pos[i][4]+"km/h<br>Distanz zu Pos"+i+" "+pos[i][2]+"km",ariaLabel:"Pos"+(i+1)}); 

markerA[i].addListener("click", () => {infowindowA[i].open({anchor:markerA[i],map});});

because this line works

markerA[i] = new google.maps.Marker({position:{lat:pos[i][0],lng:pos[i][1]},map,title: "Pos"+(i+1)});

I tried to check the content:

alert("Pos "+(i+1)+"<br>Zeit "+pos[i][3]+"<br>akt. Geschwindigkeit "+pos[i][4]+"km/h<br>Distanz zu Pos"+i+" "+pos[i][2]+"km");

but works fine.

Upvotes: 0

Views: 43

Answers (0)

Related Questions