谷歌地图弹出的标记信息仅显示数据库中的最新内容

Question

如果有人能指出我的错误，我将不胜感激。其中一个在线教程将我链接到本教程 使用信息窗口(谷歌地图API(添加多个标记，介绍如何显示每个弹出窗口及其自己的内容。我已经访问了Stack Overflow上的其他类似帖子，但是已经整整一天了，我无法真正解决这个问题。

目标：

谷歌地图上的每个标记

将显示餐厅位置。每个地点都有一个或多个厨师推荐。

当用户点击标记时，它将弹出谷歌地图弹出信息窗口

弹出窗口信息内容仅显示已分配给该特定餐厅的厨师推荐(每个餐厅可以有多个厨师推荐(。

我已经实现的：

每个标记位置都已从数据库中检索并正确显示在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 的第一个。.当它完成时，你有相同的contentStringfor all second for 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);
});
}
}

希望这有帮助，我不能尝试代码，我不确定。.