Как передать карту широты и долготы с помощью кнопки модели с помощью JavaScript

Question

У меня есть широта и долгота на карте.

как динамически перейти в модель карты?

Я хочу открыть карты, как это, но, Dynami c на каждой кнопке карты

Вот код файла PHP blade с 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 1

Это просто. Вы просто должны передать координаты в функции myMap() как myMap(latitude,longitude)

Отредактируйте кнопку для этого кода, написанного ниже:

<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 -->

После этого измените свой myMap() Функция для кода ниже:

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);
}

Если ваши модальные и карта работают должным образом, это откроет конкретное местоположение карты нажатой кнопки.