Extracting latitude/longitude from javascript and passing to html form

Question

I have the following problem

I use a google map inside an html form where the user can enter an address (autocomplete) and the marker goes to the place. The marker is draggable.

What I want is to extract latitude and longitude and to pass the values to two different hidden fields In order to end up to two text fields (decimal)

The JavaScript

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// 

function initAutocomplete() {

var map = new google.maps.Map(document.getElementById('map'), {
         center: {lat: 37.9371157, lng: 22.9303688},
         zoom: 13,          
         mapTypeId: google.maps.MapTypeId.ROADMAP
});

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

         // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({           
              draggable: true,
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));    

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

This code works well. Now i need to extract latitude and longitude values and to pass them in a hidden field inside an html form

input type="hidden" name="maps_latitude" id="maps_latitude" value=""
input type="hidden" name="maps_longitude" id="maps_longitude" value=""

maps_latitude and maps_longitude are two text fields in a cms (decimal) in order to get the values

Can anyone help how I need to modify the JavaScript and the hidden fields?

Answer 1

If I am correctly understanding your problem, you can get marker position using these functions :

After dragend :

google.maps.event.addListener( marker, 'dragend', function ( event ) {
    document.getElementById( "maps_latitude" ).value = this.getPosition().lat();
    document.getElementById( "maps_longitude" ).value = this.getPosition().lng();
} ); 

on click :

google.maps.event.addListener( marker, 'click', function ( event ) {
    document.getElementById( "maps_latitude" ).value = event.latLng.lat();
    document.getElementById( "maps_longitude" ).value = event.latLng.lng();
} );

OR

google.maps.event.addListener( marker, 'click', function ( event ) {
    document.getElementById( "maps_latitude" ).value = this.getPosition().lat();
    document.getElementById( "maps_longitude" ).value = this.getPosition().lng();
} );