使用ng-repeat（angularJs）创建多个google.maps.Map对象

Question

I want to create multiple google maps objects inside every div id="googleMap", the problem is that only in the first rotation im getting google map object and in the rest rotations of my ng-repeat im getting blank-div (lets say red background as default) without the google map object inside.

<div ng-repeat="gym in gyms track by $index ">

    <div id="gymContainer">

        <div id="googleMap"></div>

        <div class="form-group gymDes">
            Gym Name
            <input ng-model="gym.name" type="text" class="form-control" readonly>
        </div>

        <div class="form-group gymDes">
            City
            <input ng-model="gym.city" type="text" class="form-control" readonly>
        </div>

        <div class="form-group gymDes">
            Price
            <input ng-model="gym.price" type="text" class="form-control" readonly>
        </div>

        <div id="gymLogo"></div>

        <script>
            function initMap() {
                var mapDiv = document.getElementById('googleMap');
                var map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 8
                });
            }
        </script>

        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
                async defer></script>

    </div>
</div>

Answer 1

The ng-repeat will repeat the HTML specified within it, therefore, it will create several divs with the same id. However, the name of the ids in the page must be unique.

Therefore, I would suggest to make those ids to change with each iteration.

Answer 2

You have to replace the id property (that should be unique in a page) with a class property. Then use getElementsByClassName to initialize your map:

For your information, you will have to generate a unique id / class per iteration such as <div class="map_container-{{$index}}"> and find a way to generate a custom init javascript function that you would pass in the google map callback (this way is not the right and angular way to achieve what you want):

<div ng-repeat="gym in gyms track by $index ">
    <div class="gymContainer">
        <div class="map_container-{{$index}}"></div>
        <!-- ... -->
        <script>
            function initMap() {
                var mapDiv = document.getElementsByClassName('YOUR_map_container-with-index');
                var map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 8
                });
            }
        </script>
    </div>
</div>

The Angular way would be to create a custom directive, or maybe you should consider using the Angular Google Maps