Информация о маркере всплывающих окон на Картах Google показывает только последний контент из базы данных

Question

Я буду очень благодарен, если кто-нибудь сможет указать на мою ошибку.Один из интерактивных руководств, связывающих меня с этим учебником Добавление нескольких маркеров с информационными окнами (Google Maps API) о том, как отображать каждое всплывающее окно с собственным содержимым.Я посещал другие подобные посты о переполнении стека, но это было целыми днями, и я не могу обдумать этот вопрос.

Цель:

каждый маркер на Картах Google

покажет расположение ресторана.В каждом месте есть одна или несколько рекомендаций от шеф-повара.

когда пользователь нажимает на маркер, он отображает всплывающие информационные окна Google Карт

Во всплывающих окнах с информацией отображаются только рекомендации шеф-повара:был назначен на этот конкретный ресторан (каждый реутрант может иметь несколько рекомендаций от шеф-повара).

Чего я уже достиг:

Каждая позиция маркера была найдена и правильно показана на Картах Google из базы данных.

Каждый маркер имеет свои собственные всплывающие окна.

Каждое всплывающее информационное окно может отображать контент.

Проблема:

В каждом всплывающем окне на маркере будет содержаться рекомендованный шеф-поваром контент, который в данный момент является последней строкой базы данных.

Спасибо.

// ******** Begin Google Maps ********* //
function initMap() {

  var restMarker = "somePathToImage.png";

  var map = new google.maps.Map(
    document.getElementById('googleMaps'), {
      zoom: 17, 
      center: { lat: gon.locations[0].latitude, lng: gon.locations[0].longitude}
    });

    // ******** BEGIN WINDOW INFO CONTENT ******** //
    for (var x = 0; x < gon.restaurant.length; x++){
      var contentString = 
      '<div id="content1">'+
        '<div class="container">'+
          gon.restaurant[x].chefRecommend +
        '</div>'+
      '</div>'
      ;
    }
   // ******** END WINDOW INFO CONTENT ******** //

   for (var i = 0; i < gon.locations.length; i++){
    var gMapsMarker = new google.maps.Marker({
      position: { lat: gon.locations[i].latitude, lng: gon.locations[i].longitude},
      map: map,
      icon: restMarker
    });

    var gMapsInfo = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 250 
    });

    gMapsMarker.gMapsInfo = gMapsInfo;

    google.maps.event.addListener(gMapsMarker, 'click', function() {
      this.gMapsInfo.open(map, this);
    });
  }
}

Answer 1

Привет, я думаю, что проблема в первом для cicle .. Когда он закончен, у вас есть то же самое contentString для всех вторых для cicle .. Вы должны сделать все то же самое для:

// ******** Begin Google Maps ********* //
function initMap() {

  var restMarker = "somePathToImage.png";

  var map = new google.maps.Map(
    document.getElementById('googleMaps'), {
      zoom: 17, 
      center: { lat: gon.locations[0].latitude, lng: gon.locations[0].longitude}
    });


   for (var i = 0; i < gon.locations.length; i++){
    var contentString = "";
     if (i<gon.restaurant.length){
      contentString=
        '<div id="content1">'+
          '<div class="container">'+
            gon.restaurant[i].chefRecommend +
          '</div>'+
        '</div>'
    }
    var gMapsMarker = new google.maps.Marker({
      position: { lat: gon.locations[i].latitude, lng: gon.locations[i].longitude},
      map: map,
      icon: restMarker
    });

    var gMapsInfo = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 250 
    });

    gMapsMarker.gMapsInfo = gMapsInfo;

    google.maps.event.addListener(gMapsMarker, 'click', function() {
      this.gMapsInfo.open(map, this);
    });
  }
}

Надеюсь, что эта справка, я не могу попробовать код, и я не уверен ..