title: How can i send ajax data from google maps infowindow to laravel controller?
body: <p>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  . </p>
  
  <p>i want to show a form to user when InfoWindow is opened , and send some data to Laravel controller with Ajax. </p>
  
  <p>How can i do that ? </p>
  
  <p>any suggestion will be helpfull , thankyou . </p>
  
  <p>Here is my code : </p>
  
  <pre><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 = "&lt;div style='height: 300px;width: 300px;'&gt;\n" +
                  "    &lt;div class='row justify-content-center mt-4 mb-4'&gt;\n" +
                  "        &lt;div class='col-md-6 justify-content-center'&gt;\n" +
                  "            &lt;h4 class='mb-4'&gt;Add New User (Driver)&lt;/h4&gt;\n" +
                  "            &lt;form&gt;\n" +
                  "                &lt;div class='form-group'&gt;\n" +
                  "                    &lt;label&gt;Name: &lt;/label&gt;\n" +
                  "                    &lt;input type='text' name='name' class='form-control' placeholder='Name ...'&gt;\n" +
                  "                &lt;/div&gt;\n" +
                  "                &lt;div class='form-group'&gt;\n" +
                  "                    &lt;label&gt;Email: &lt;/label&gt;\n" +
                  "                    &lt;input type='email' name='email' class='form-control' placeholder='Email ...'&gt;\n" +
                  "                &lt;/div&gt;\n" +
                  "                &lt;div class='form-group'&gt;\n" +
                  "                    &lt;label&gt;Lat:&lt;/label&gt;\n" +
                  "                    &lt;input id='lat' type='text' value='"+lat.toFixed(3)+"' name='lat' class='form-control' placeholder='Lat ...'&gt;\n" +
                  "                &lt;/div&gt;\n" +
                  "                &lt;div class='form-group'&gt;\n" +
                  "                    &lt;label&gt;Lng: &lt;/label&gt;\n" +
                  "                    &lt;input type='text' id='lng' name='lng' class='form-control' value='"+lng.toFixed(3)+"' placeholder='Lng ...'&gt;\n" +
                  "                &lt;/div&gt;\n" +
                  "                &lt;div class='form-group'&gt;\n" +
                  "                    &lt;button class='btn btn-success btn-submit btn-lg'&gt;Send&lt;/button&gt;\n" +
                  "                &lt;/div&gt;\n" +
                  "            &lt;/form&gt;\n" +
                  "        &lt;/div&gt;\n" +
                  "\n" +
                  "    &lt;/div&gt;\n" +
                      "&lt;p id='newp'&gt;&lt;/p&gt;"
                  "&lt;/div&gt;";
  
  
              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-&gt;lat}});
                  var lng = parseFloat({{$user-&gt;long}});
                  var content = "&lt;p&gt;{{$user-&gt;name}}&lt;/p&gt;&lt;hr/&gt;&lt;p&gt;{{$user-&gt;email}}&lt;/p&gt;&lt;hr/&gt;&lt;p&gt;{{$user-&gt;id}}&lt;/p&gt;";
                  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);
              });
  
          }
  </code></pre>
  
  <p>I edited the question . 
  This is all of my code .</p>