多个Google地图预览，用于多个自动完成字段

Question

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.

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.

I am tracking my shops by $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.

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?

Answer 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="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);