Multiple google maps on one page with dynamic parameters - development

Multiple google maps on one page with dynamic parameters

I want to display multiple google maps on one page based on dynamic data from a loop, so it can be 1 map or 2 maps or 20 maps per page.

I can display one map but I do not know how (or if it is even possible) to display multiple maps with dynamic data.

<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> </p>
                        <p>
                            <label for="">Address: </label> 
                            
                        </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" style="width: 200px; height: 200px;">
                        </div>
                    </div>

                    <script>
                        function initMap() {

                            var myLatLng = {lat: , lng: };
                            var map = new google.maps.Map(document.getElementById('map'), {
                            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>

As you can see above, I am using the $i variable to make ids such as map1, map2 and so on and I am also using that variable inside of js code (which works, I get what I expect).

But I am including the google maps link once as it cannot be included multiple times, so how can I make it work?

from Laravel Questions and Answers https://laravelquestions.com/php/multiple-google-maps-on-one-page-with-dynamic-parameters/
via Lzo Media