How to pass Latitude and Longitude map via model button with the help of JavaScript

I have Latitude and Longitude on the map.

how to dynamically pass in the map model?

I want to open maps like this but, dynamic on each map button

Here’s the PHP blade file code with JS…

var myLatLng = {
    lat: ??, 
    lng: ??
};
function myMap() {
    var mapProp= {
        center: myLatLng,
        zoom:15,
        gestureHandling: 'greedy'
    };
    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    placeMarker(map, myLatLng);
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
    });
}

@foreach($toilets as $toilet)
    <tr>
        <th scope="row">{{ $toilet->id }}</th>
        <td title="{{ $toilet->owner['email'] }}">
            {{ $toilet->owner['id'] }}
        </td>
        <td>{{ $toilet->toilet_name }}</td>
        <td><b>${{ $toilet->price }}</b></td>
        <td>{{ $toilet->complex_name }}</td>
        <td>{{ $toilet->address.$toilet->getFullAddress() }}</td>
        <td>
            @if($toilet->status==1) <f class="text-success">Active</f> 
            @else <f class="text-warning">Not Active</f> @endif
        </td>
        <td>
            {{ $toilet->created_at->format('d/m/Y').' at '.$toilet->created_at->format('g:i A') }}
        </td>
        <td>
            <button class="btn btn-success" class="btn btn-primary"
             data-toggle="modal" data-target="{{$toilet->toilet_lat . $toilet->toilet_lng}}">
                Map
            </button>
        </td>
    </tr>
@endforeach

Answer

This is simple. You just have to pass coords in myMap() function as myMap(latitude,longitude)

Edit your button to this code written below:

<button class="btn btn-success" data-toggle="modal" data-target="your_modal_class"
  onclick="myMap({{ $toilet->toilet_lng }},{{ $toilet->toilet_lng }})">
    Map
</button>
<!-- this will pass coords as parameter to map function -->

After this, change your myMap() function to code below:

function myMap(currentLat,currentLng) {    //getting values by reference
    var myLatLng = {
        lat: currentLat,    //set current lat value to map
        lng: currentLng     //set current long value to map
    };
    var mapProp= {
        center: myLatLng,
        zoom:15,
        gestureHandling: 'greedy'
    };
    var map = new google.maps.Map(document.getElementById("map"),mapProp);

    placeMarker(map, myLatLng);
}

If your modal and map work properly this will open clicked button’s map location specifically.