Google Maps JS API - Błąd w wyświetlaniu infowindow

0

Cześć i czołem!

Piszę sobie mapkę na której chce aby:

  1. Tworze sobie Jsona z Miejscowością, imieniem nazwiskiem i jakimś tam projektem.
  2. Na mapie zaznacza mi miejscowość i dodaje informację po kliknięciu kto co i po co tam jest.

Wszystko działa ok, poza podstawianiem contentu
Gdy uruchomię, pętla podstawia tylko ostatnią linię z JSONa.
infowindow.setContent(obj.dane[g].imie); <- czyli 2 linia.
A powinien dodać 3 różne, dla 3 markers.

Czy jest ktoś wstanie powiedzieć, co jest nie tak i dlaczego nie dodaje wszystkich contentów do każdego markera?
http://www.wklejto.pl/784095?fbclid=IwAR0e41hWrlb0qF4xkrxb5XLF46mxCO6n0OOpHk5yFfCgI7Vj6WqyiaFNikU

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var geocoder;
      var map;
          
          var tabela = '{"dane":[' +
'{"imie":"Adam","nazwisko":"Nazwisko","adres":"Kielce", "data":"15.11.2019","nazwaprojektu":"Projekt 1"},' +
'{"imie":"Franek","nazwisko":"Nazwisko","adres":"Gdynia", "data":"15.11.2019","nazwaprojektu":"Projekt 2"},' +
'{"imie":"Krzysztof","nazwisko":"Jerzyna","adres":"Wyrzysk", "data":"15.11.2019","nazwaprojektu":"Projekt 3"} ]}';
 
obj = JSON.parse(tabela);
 
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 7,
          center: {lat: 52.234982, lng: 21.008490}
        });
        geocoder = new google.maps.Geocoder();
        codeAddress(geocoder, map);     
      }
                
      function codeAddress(geocoder, map) {
 
          for (i = 0; i < tabela.length; i++) {  
        geocoder.geocode({'address': obj.dane[i].adres}, function(results, status) {
          if (status === 'OK') {
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
                          
            });  
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
                   
 
    var g;
    for (g = 0; g < tabela.length; g++) {  
      google.maps.event.addListener(marker, 'click', (function(marker, g) {
        return function() {
                var infowindow = new google.maps.InfoWindow();
          infowindow.setContent(obj.dane[g].imie);
          infowindow.open(map, marker);
        }
      })(marker, g));
    }
        });
          }};
    </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
1

a) 2 nowe zmienne tablicowe:
var markersArr = [];
var infowindowArr = [];

b) ostatnia pętla for -> delete

c)

for (i = 0; i < obj.dane.length; i++) {  
        geocoder.geocode({'address': obj.dane[i].adres}, function(results, status) {
          if (status === 'OK') {
            var contentString = obj.dane[i].imie + " " + obj.dane[i].nazwisko;
			infowindowArr[i] = new google.maps.InfoWindow({content: contentString});	
			
			markersArr[i] = new google.maps.Marker({
				  map: map,
				  position: results[0].geometry.location
				  
			});	
			
			google.maps.event.addListener(markersArr[i], 'click', (function(marker, i) {
			  return function() {
				infowindowArr[i].open(map, markersArr[i]);
			  }
			})(markersArr[i], i));
		
          } else {			
			alert('Geocode was not successful for the following reason: ' + status);
          }
		   

        })
	 }
0

@NewUser2k13
Już ogarnąłem wcześniej, ale wielkie dzięki za pomoc przyjacielu :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1