1

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?

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();
} );
  • Hello Vinni and than you for your response – Kostas Romporas Jun 6 '16 at 16:37
  • well i placed it after the marker like that map.addListener(marker, 'dragend', function () { document.getElementById("maps_latitude").value = this.getPosition().lat(); document.getElementById("maps_longitude").value = this.getPosition().lng(); }); – Kostas Romporas Jun 6 '16 at 16:51
  • nothing happened ... also do you have any idea what will be passed to the hidden field as a value? <input type="hidden" name="maps_latitude" id="maps_latitude" value="maps_latitude"> – Kostas Romporas Jun 6 '16 at 16:51
  • this is the code [link] openkorinthos.gr/index.php/profile2/new-entry2 [/link] – Kostas Romporas Jun 6 '16 at 16:52
  • you can use this example : jsfiddle.net/vinni0803/wk7kqnc2 on click of red marker you will get lat long and if it works mark this as answer – vinni Jun 6 '16 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.