Несколько карт Google на одной странице с динамическими параметрами

Question

Я хочу отображать несколько карт Google на одной странице на основе динамических данных из цикла, поэтому это может быть 1 карта или 2 карты или 20 карт на странице.

Я могу отобразить одну карту, но я не знаю, как (или если это вообще возможно) отобразить несколько карт с динамическими данными.

<div class="container results">

    <div class="row">
        <div class="col-12">
            @if (count($results) > 0)
                @php
                $i = 1;
                @endphp
                @foreach ($results as $r)
                    <div class="result">
                        <p><label for="">Name: </label> {{ $r->name }}</p>
                        <p>
                            <label for="">Address: </label> 
                            {{ $r->street }}
                        </p>

                        @php
                        $address = $r->street . ' ' . $city . ' ' . 'UK';

                        $formattedAddr = str_replace(' ','+',$address);
                        $arrContextOptions=array(
                            "ssl"=>array(
                                "verify_peer"=>false,
                                "verify_peer_name"=>false,
                            ),
                        );  
                        $geocodeFromAddr = file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?key=MY_API_KEY&address='.$formattedAddr.'&sensor=false', false, stream_context_create($arrContextOptions)); 
                        $output = json_decode($geocodeFromAddr);
                        $latitude  = $output->results[0]->geometry->location->lat; 
                        $longitude = $output->results[0]->geometry->location->lng;

                        @endphp
                        <div id="map{{$i}}" style="width: 200px; height: 200px;">
                        </div>
                    </div>

                    <script>
                        function initMap() {

                            var myLatLng = {lat: {{$latitude}}, lng: {{$longitude}}};
                            var map = new google.maps.Map(document.getElementById('map{{$i}}'), {
                            zoom: 15,
                            center: myLatLng
                            });

                            var marker = new google.maps.Marker({
                            position: myLatLng,
                            map: map,
                            title: 'Hello World!'
                            });
                        }
                    </script>

                    @php $i++ @endphp

                @endforeach   

        @endif
        </div>
    </div>
</div>

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

Как вы можете видеть выше, я использую переменную $i для создания идентификаторов, таких как map1, map2 и так далее, и я также использую эту переменную внутри кода js (который работает, я получаю то, что Я ожидаю).

Но я включаю ссылку на карты Google один раз, так как ее нельзя включить несколько раз, так как я могу заставить ее работать?

Answer 1

Вам не нужно включать скрипт несколько раз.

Это

<script type="text/javascript" src="https://maps.google.com/maps/api/js?callback=initMap"></script>

и это

var map1 = new google.maps.Map(document.getElementById('map1'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 5
})

var map2 = new google.maps.Map(document.getElementById('map2'), {
    center: {lat: 42.948766, lng: -82.691497},
    zoom: 4
})

должно быть достаточно.

Вот рабочая скрипка:

https://jsfiddle.net/anatolysukhanov/a6e5bbtr/