Javascript ng重复can'；不要在所有列表中重复谷歌地图

我在使用ng repeat tho show 3 list时遇到一些问题。第一个列表是可以的，因为谷歌地图显示在第二个列表和第三个列表中。这是我的html

<ion-list>
            <ion-item class="animate-repeat" ng-repeat="i in rep">
                <div class="card card-wraper" >
                    <div class="item item-text-wrap" >
                        <div id="map"></div>
                        <div id="over_map">
                            <label >
                                <span class="input-label"></span>
                                <input input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type = 'date')" ng-model="trip">
                            </label>
                            <div >            
                                <select  ng-options="size as size.code for size in sizes" ng-model="item" style="background-color:#262261;color: white"ng-change="update(item)"></select>
                            </div> 
                        </div>
                    </div>
                </div>
            </ion-item>
        </ion-list>

这是我的控制器

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

  for (var i=0; i<3; i++) {  


      $scope.trip = new Date();
      $scope.item = {};
            $scope.code = {};
            $scope.sizes = [{code: 123456789, name: 'Modul 1'}, {code: 864369038803163, name: 'Modul 2'},
                {code: 864369038796946, name: 'Modul 4'}, {code: 864369038803833, name: 'Modul 5'},
                {code: 864369038816645, name: 'Modul 6'}, {code: 864369038797142, name: 'Modul 7'},
                {code: 864369038796698, name: 'Modul 8'}];
            $scope.update = function (selected) {
                $scope.item = selected;
            };

   $scope.rep.push(i);
  }

函数初始化（）{
var latlng=新的google.maps.latlng（-34.397150.644）；
变量myOptions={
缩放：8，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map”），
肌肽）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
对于（var i=0；i而言，问题在于DOM元素中的id是唯一的，您的中继器使用id
map
创建3个DOM元素
document.getElementById（“map”）
只选择其中一个。您应该创建不同的id或使用类选择器来创建多个map。
问题不在ng重复中，它是由于具有相同id的多个元素（即“
”造成的

元素ID在整个文档中应该是唯一的。
对于具有相同id的多个元素，HTML DOM只考虑该id的第一个元素，而忽略它旁边的其他元素，因此只有具有id映射的第一个列表正在生成映射

尝试使用类来选择，而不是使用id来选择

选择带有多个ID的地图

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map0 = new google.maps.Map(document.getElementsById("map0"), myOptions);
    var map1 = new google.maps.Map(document.getElementsById("map1"), myOptions);
    var map2 = new google.maps.Map(document.getElementsById("map2"), myOptions);

}

并在html中添加一个$索引（以0开头）

<div id="map{{$index}}"></div>


map未显示且存在类似以下未捕获类型的错误错误错误：无法读取未定义的属性“defaultView”如果我不知道ng repeat中有多少元素，该如何为map分配不同的ID？