How can i display lat and lng coordinates inside a fieldset(<input type=“text” name=“lng” id=“lng” placeholder=“Longitude”>)?

Question

I want to display my lat and lng coordinates automatically inside an input textfield shown in my infoWindow when i click a place on my map...so i can save accurate marker coordinates of user in my database...

This is from 2 different div classes. is this even possible?

<fieldset>
    <input type="text" name="userId" id="userId" placeholder="Your userID">
  </fieldset>
  <fieldset>
    <input type="text" name="firstName" id="firstName" placeholder="firsName">
  </fieldset>
  <fieldset>
    <input type="text"  name="lastName" id="lastName" placeholder="lastName">
  </fieldset>
  <fieldset>
    <input type="number" name="age" id="age" placeholder="age">
  </fieldset>
  <fieldset>
    <input type="text"  name="symptom" id="symptom" placeholder="Symptoms">
  </fieldset>
  <fieldset>
    <input type="text"   name="lat" id="lat" placeholder="Latitude">
  </fieldset>
  <fieldset>
    <input type="text"   name="lng" id="lng" placeholder="Longitude">
  </fieldset>

function initialize() {
        var myLatlng = {lat:14.5907332, lng:120.9809674};
        

        var infowindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById('map_canvas'),
         {zoom: 4, center: myLatlng});

        // Create the initial InfoWindow.
        var infoWindow = new google.maps.InfoWindow(
            {content: 'Click the map to get Lat/Lng!', position: myLatlng});
        infoWindow.open(map);

        // Configure the click listener.
        map.addListener('click', function(mapsMouseEvent) {
          // Close the current InfoWindow.
          infoWindow.close();

          // Create a new InfoWindow.
          infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
          infoWindow.setContent(mapsMouseEvent.latLng.toString());
          infoWindow.open(map);
        });

This my web

I have tried the manual way of clicking the map and copying the coordinates and putting them on my textfield then saving to my database, but it's too time consuming....

Answer 1

You can create a setter method, and call it in click event after setting the content of the info window.

function setLatLng(mapsMouseEvent){
   let latInputBox = document.getElementById("lat");
   let lngInputBox = document.getElementById("lng"); 
   latInputBox.value = mapsMouseEvent.latlng.lat();
   lngInputBox.value = mapsMouseEvent.latlng.lng();
   
}

call this method from the click event function:

     // Configure the click listener.
      map.addListener('click', function(mapsMouseEvent) {
       // Close the current InfoWindow.
       infoWindow.close();

      // Create a new InfoWindow.
      infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
      infoWindow.setContent(mapsMouseEvent.latLng.toString());
      infoWindow.open(map);
      setLatLng(mapsMouseEvent);// call to set in input fields
    });