Маркер Dynami c и API Google Maps infoWindow с помощью синтаксического анализа Google App Engine через файл JSON

Question

Привет, я новичок в stackoverflow (и кодировании), но я работаю над веб-приложением, в которое я хочу добавить динамические c маркеры и информацию windows на основе извлеченного файла JSON. Есть более 200 маркеров, поэтому они должны быть динамическими c. У меня есть код, который работает для добавления маркеров, но как только я добавляю информацию Windows, это не так. Кто-нибудь может понять почему? Вывод упал до одного маркера без информационного окна.

Вот мой код:

function initMap() {

  var myLatLng = {
    lat: 26.967,
    lng: -99.25
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  $.ajax({
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) {
      data = JSON.parse(data)
      infowindow = new google.maps.InfoWindow();

      for (element in data) {
        new google.maps.Marker({
          position: {
            lat: data[element].lat,
            lng: data[element].lon
          },
          map: map,
          title: element
        });

        infowindow.setContent(data[element].country);

        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
    }
  });
}

Я видел сообщение на stackoverflow с похожим вопросом и пробовал его таким же образом, но не сделал получить любые маркеры.

function initMap() {

  var myLatLng = {
    lat: 26.967,
    lng: -99.25
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  $.ajax({
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) {
      var json = data = JSON.parse(data);
      for (var i = 0; i < json.length; i++) {
        point = new google.maps.LatLng(json[i].lat, json[i].lon);
        contentString = json[i].Country;
        addMarkers(point, contentString);
      }
    }
  });

  function addMarkers(point, contentString) {
    marker = new google.maps.Marker({
      position: point,
      map: map
    });
    infowindow = new google.maps.InfoWindow({
      content: contentString
    });
    marker.push(marker);
    infos.push(infowindow);
    for (var j = 0; j < markers.length; j++) {
      google.maps.event.addListener(markers[j], 'click', function() {
        infos[j].open(map, markers[j]);
      })
    }
  }
}

Вывод моего JSON файла выглядит следующим образом:

{
  "AA": {
    "celsius": 32.27777777777778,
    "country": "AA",
    "day": "25",
    "lat": 12.5,
    "lon": -70.017,
    "month": "03"
  },
  ...
}

Answer 1

В вашем коде есть несколько проблем. Вы должны прочитать Использование замыканий в прослушивателях событий .

1. Вы должны установить содержимое информационного окна по щелчку маркера (не в пределах l oop, как вы сделали)
2. Вы должны объявить переменную marker, которая отсутствует
3. Любая переменная , которую вы используете, должна быть объявлена, например, for (element in data) должно быть for (var element in data)

function initMap() {

  var myLatLng = {
    lat: 26.967,
    lng: -99.25
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  $.ajax({
    type: 'GET',
    url: 'https://us-central1-cloud-calendar-project.cloudfunctions.net/InfoWindow',
    success: function(data) {
      data = JSON.parse(data)

      console.log(data);
      infowindow = new google.maps.InfoWindow();

      for (var element in data) {
        var marker = new google.maps.Marker({
          position: {
            lat: data[element].lat,
            lng: data[element].lon
          },
          map: map,
          title: element
        });

        google.maps.event.addListener(marker, 'click', (function(marker, element) {

          return function() {

            var content = 'Country: ' + data[element].country;
            content += '<br>Temperature (°C): ' + data[element].celsius;

            infowindow.setContent(content);
            infowindow.open(map, marker);
          }

        })(marker, element));
      }
    }
  });
}

initMap();

#map {
  height: 180px;
}

<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>