我使用谷歌地图api自动完成来搜索商店并在html表单上显示其城市和国家。我还更新了搜索商店的地图预览。到目前为止，这工作正常。
我添加了复制该过程的可能性：添加另一家商店，删除一家商店，并将一家标记为"第一家"商店。这使得相同的字段在新商店中重新重复。因此，自动完成字段和地图预览也会重复。好。
但是当我添加商店时，地图预览不适用于第二个、第三个、...的。
问题：
如何解决此问题，以便分别更新每个商店的地图预览？
这是我的jsfiddle：链接。
我正在通过以下方式跟踪我的商店$index：
<fieldset ng-repeat="shop in myModel.shops track by $index">
我想我也需要对地图做同样的索引，但事情变得复杂，无法正确完成。
顺便说一下，整个代码是用angularjs编写的。
更新：
考虑到AHC的回答，两张地图似乎都更新了，但地图在我的地图上是空的，并且是灰色的。有人知道原因吗？
您只需将索引添加到输入 ID 和地图预览 ID 标签。 并在函数中通过索引引用它们。 这是jsfiddle。 我希望这对你有用。
id="pac-input-{{$index}}"
...
id="map_canvas-{{$index}}"
在函数内部：
var inputID = "pac-input-"+index;
var input = document.getElementById(inputID);
var mapID = "map_canvas-"+index;
map = new google.maps.Map(document.getElementById(mapID), mapOptions);