在列表视图中选择位置时，为每个标记添加信息窗口

Question

＆＃13;

＆＃13;

// inital Locations
var myLocations = [{
    name: "Istanbul",
    address: "214 S Highland Ave, Pittsburgh, PA",
    latlng: {
      lat: 41.008238,
      lng: 28.978359
    }
  
  }, {
    name: "Antalya",
    address: "5469 Penn Ave Pittsburgh, PA 15206",
    latlng: {
      lat: 36.896891,
      lng: 30.713323
    }
    
  }, {
    name: "Ankara",
    address: "236 Fifth Ave Pittsburgh, PA 15222",
    latlng: {
      lat: 39.933363,
      lng: 32.859742
    }
    
  }, {
    name: "Trabzon",
    address: "5608 Walnut St Pittsburgh, PA 15232",
    latlng: {
      lat: 41.002697,
      lng: 39.716763
    }

  }, {
    name: "Bursa",
    address: "5841 Penn Ave Pittsburgh, PA 15206",
    latlng: {
      lat: 40.188528,
      lng:29.060964
    }
    
  }, 
];

//String to display in info window


//Declare Map variable and markers array
var map;

var infoWindow;

var marker;

//Create Instance of a map from the Google maps api
//Grab the reference to the "map" id to display map
//Set the map options object properties 
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 38.963745,
      lng: 35.243322
    },
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  });
};

// tells the view model what to do when a change occurs
function mLocation(value) {
  this.name = ko.observable(value.name);
  this.address = ko.observable(value.address);
  this.description = ko.observable(value.description);
  this.latlng = ko.observable(value.lat);
};

//ViewModel
function ViewModel() {

  var self = this;
  self.markers = [];

  //Copies the values of initialLocations and stores them in sortedLocations(); observableArray
  self.sortedLocations = ko.observableArray(myLocations);

  //Adds new markers at each location in the initialLocations Array
  self.sortedLocations().forEach(function(location) {
    marker = new google.maps.Marker({
      position: location.latlng,
      map: map,
      title: location.name,
      icon: 'img/marker.png',
      animation: google.maps.Animation.DROP
    });

    location.marker = marker;
    var content = '<div id="iw_container">' +
            '<div class="iw_title">' + name + </div>';

    //Pushes each marker into the markers array
    this.markers.push(marker);
  });

  //Map info windows to each item in the markers array
  self.markers.map(function(info) {
    infoWindow = new google.maps.InfoWindow({
      content: content
    });
    //Add click event to each marker to open info window
    info.addListener('click', function() {
      infoWindow.open(map, this),
        info.setAnimation(google.maps.Animation.BOUNCE) //Markers will bounce when clicked
      setTimeout(function() {
        info.setAnimation(null)
      }, 2000); //Change value to null after 2 seconds and stop markers from bouncing
    });

  });

  //Click on item in list view
  self.listViewClick = function(loc) {
    if (loc.name) {
      map.setZoom(15); //Zoom map view
      map.panTo(loc.latlng); // Pan to correct marker when list view item is clicked
      loc.marker.setAnimation(google.maps.Animation.BOUNCE); // Bounce marker when list view item is clicked
      infoWindow.open(map, loc.marker); // Open info window on correct marker when list item is clicked
    }
    setTimeout(function() {
      loc.marker.setAnimation(null); // End animation on marker after 2 seconds
    }, 2000);
  };

  // Stores user input
  self.query = ko.observable('');

  //Filter through observableArray and filter results using knockouts utils.arrayFilter();
  self.search = ko.computed(function() {
    return ko.utils.arrayFilter(self.sortedLocations(), function(listResult) {
      return listResult.name.toLowerCase().indexOf(self.query().toLowerCase()) >= 0;
    });
  });

};

$(document).ready(function() {
  initMap();
  ko.applyBindings(ViewModel());
});

＆＃13;

＆＃13;

＆＃13;

我想问一下如何在Google地图中为标记添加信息窗口。条件是，我必须在地图上创建一个包含多个标记的程序。但是，当在视图列表中的每个位置选择时，如何为每个标记指定一个指定的信息窗口？