Как я могу отправить данные ajax из информационного окна Google Maps на контроллер Laravel?

Question

У меня есть проект Laravel, который работает с API карт Google.У меня есть событие щелчка на карте, когда я его запускаю, я добавляю маркер на эту карту.а также я добавляю информационное окно к этому маркеру.

Я хочу показать пользователю форму при открытии InfoWindow и отправить некоторые данные в контроллер Laravel с помощью Ajax.

Как я могу это сделать?

Любое предложение будет полезным, спасибо.

Вот мой код:

var map;
var centerUrl = {lat: 29.591768, lng: 52.583698};
var markers = [] ;

            function addMyListener(aMarker, aInfoWindow) {
                aMarker.addListener('click', function () {
                    aInfoWindow.open(map, aMarker);
                });
            }
            function addMarker(lat,lng,infoWindow){
            var marker = new google.maps.Marker({
                position:{lat:lat,lng:lng},
                map:map,
            }) ;
            var content = "<div style='height: 300px;width: 300px;'>\n" +
                "    <div class='row justify-content-center mt-4 mb-4'>\n" +
                "        <div class='col-md-6 justify-content-center'>\n" +
                "            <h4 class='mb-4'>Add New User (Driver)</h4>\n" +
                "            <form>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Name: </label>\n" +
                "                    <input type='text' name='name' class='form-control' placeholder='Name ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Email: </label>\n" +
                "                    <input type='email' name='email' class='form-control' placeholder='Email ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Lat:</label>\n" +
                "                    <input id='lat' type='text' value='"+lat.toFixed(3)+"' name='lat' class='form-control' placeholder='Lat ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <label>Lng: </label>\n" +
                "                    <input type='text' id='lng' name='lng' class='form-control' value='"+lng.toFixed(3)+"' placeholder='Lng ...'>\n" +
                "                </div>\n" +
                "                <div class='form-group'>\n" +
                "                    <button class='btn btn-success btn-submit btn-lg'>Send</button>\n" +
                "                </div>\n" +
                "            </form>\n" +
                "        </div>\n" +
                "\n" +
                "    </div>\n" +
                    "<p id='newp'></p>"
                "</div>";


            infoWindow.setContent(content);
            infoWindow.open(map,marker) ;
        }

           function initMap() {


            var infoWindow = new google.maps.InfoWindow() ;
            // Create new Map Instance
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: centerUrl,
                zoom: 5
            });

            // Show Users On Map
            @forEach($users as $user)

                var lat = parseFloat({{$user->lat}});
                var lng = parseFloat({{$user->long}});
                var content = "<p>{{$user->name}}</p><hr/><p>{{$user->email}}</p><hr/><p>{{$user->id}}</p>";
                var infoWindow = new google.maps.InfoWindow({
                    content: content
                });
                var markerUrl = {lat: lat, lng: lng};
                var marker = new google.maps.Marker({
                    position: markerUrl,
                    map: map
                });

                markers.push(marker);
                addMyListener(marker, infoWindow);

            @endforeach

            // Add a marker clusterer to manage the markers.
            var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});


            // Add Marker On Click Event
            google.maps.event.addListener(map,'click',function (event) {
                addMarker(event.latLng.lat() , event.latLng.lng(),infoWindow);
            });

        }

Я редактировал вопрос.Это весь мой код.

Answer 1

У Infowindow есть событие domready .

Это событие вызывается, когда <div>, содержащий содержимое InfoWindow, присоединено к DOM. Вы можете отслеживать это событие, если вы динамически создаете содержимое информационного окна.

Таким образом, вы можете (должны) использовать это событие, если вам нужен доступ к HTML-элементам, которые вы вставляете в Infowindow.

Например:

google.maps.event.addListener(infowindow, 'domready', function () {

    // Here you are able to access your Infowindow content elements...
    // You can bind events to your form, form fields, buttons, etc.
});

Вот очень простой пример, который отображает форму в информационном окне, а затем устанавливает входное значение в качестве заголовка маркера: https://jsfiddle.net/upsidown/ZW79H/