多个自动填充字段的多个谷歌地图预览

I have used google maps api autocomplete to search for a shop and display its city and country on the html form. I also update a map preview for the searched shop. This is working fine until now.

我使用google maps api autocomplete搜索商店并在html表单上显示其城市和国家/地区。我还更新了搜索商店的地图预览。到目前为止这个工作正常。

I have added a possibility to duplicate the process: adding another shop, removing one, and marking one as the "first" shop. This makes the same fields be repeated anew for the new shop. Thus autocomplete field and map preview also get duplicated. Fine.

我添加了复制流程的可能性：添加另一个商店，删除一个商店，并将其标记为“第一个”商店。这使得新商店重新重复相同的字段。因此，自动完成字段和地图预览也会重复。精细。

But when I add a shop, the map preview is not working for the second, third, ... ones.

但是当我添加一个商店时，地图预览不适用于第二个，第三个......。

Question:

How can I fix this up so that the map preview gets updated for each shop separately?

如何解决此问题，以便分别为每个商店更新地图预览？

here is my jsfiddle: LINK.

这是我的jsfiddle：LINK。

I am tracking my shops by $index:

我用$ index跟踪我的商店：

<fieldset ng-repeat="shop in myModel.shops track by $index">

I think I need to do the same indexing for map as well, but things get complicated and can't properly do it.

我认为我也需要对地图进行相同的索引编制，但事情变得复杂并且无法正常执行。

The whole code is in angularjs, by the way.

顺便说一句，整个代码都是angularjs。

update:

taking into account AHC's answer, both maps seem to get updated, but the maps are empty on mine and are greyed out. Does anybody know the reason?

考虑到AHC的答案，两张地图似乎都得到了更新，但地图上的地图是空的，并且是灰色的。有人知道原因吗？

1 个解决方案

#1

you just need to add the index to the input id and map preview id tags. and refer to them also by index in the function. Here is the jsfiddle. I hope this works for you.

您只需要将索引添加到输入ID和地图预览ID标记。并通过函数中的索引引用它们。这是jsfiddle。我希望这适合你。

id="pac-input-{{$index}}"
...
id="map_canvas-{{$index}}"

and inside the function:

并在函数内部：

  var inputID = "pac-input-"+index;
  var input = document.getElementById(inputID);

  var mapID = "map_canvas-"+index;
  map = new google.maps.Map(document.getElementById(mapID), mapOptions);

#1