Cześć i czołem!
Piszę sobie mapkę na której chce aby:
- Tworze sobie Jsona z Miejscowością, imieniem nazwiskiem i jakimś tam projektem.
- 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>