How can i send ajax data from google maps infowindow to laravel controller?

Question

I have a Laravel project that works with Google maps API . I have a map click event that when it is fired i add a marker to that map . and also i add an info window to that marker .

i want to show a form to user when InfoWindow is opened , and send some data to Laravel controller with Ajax.

How can i do that ?

any suggestion will be helpfull , thankyou .

Here is my code :

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

        }

I edited the question . This is all of my code .

Answer 1

The Infowindow has a domready event .

This event is fired when the <div> containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dynamically.

So you can (should) use this event if you need to have access to the HTML elements that you inject in the Infowindow.

For example:

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

Here is a very basic example which displays a form in the Infowindow, then sets the input value as the marker title: https://jsfiddle.net/upsidown/ZW79H/