Google Maps Coordinates through a Widget on a website

You can extract the coordinates of the center of the map on your page by calling the .getCenter() function of the Google Maps API. So the user can drag and center the map wherever and then extract coordinates with a button or other action.

You can use this:

var map = new google.maps.Map(elementoMapa, {
    zoom: 6,
    center: new google.maps.LatLng(38.684748, -9.31572),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

Then call map.getCenter(); to get an object with the coordinates of the center of the map

And get (in my example):

Q {d: -2.527066, e: -44.298419999999965, toString: function, b: function, equals: function…}
    d: -2.527066
    e: -44.298419999999965
    __proto__: Q

Example

Use the Google Maps API and twenty a function to event click :

google.maps.event.addListener(marker, 'click', function () {
  console.log('Coordenadas:', marker.getPosition());
});

I've implemented something very similar on a system once. You can give a look and copy if you want.

How-to

As you already have the Google Maps widget for your site, simply add a field so that the user can type the address that the person goes through the phone and two hidden fields that they will save latitude and longitude values. The address field will be autocomplete type, same as Google Maps itself, where you type the address and the options will appear.

<input id="address" name="school.address" type="text" placeholder="Digite o endereço da escola..." autocomplete="off">

<input id="lat" type="hidden" value="0">
<input id="lng" type="hidden" value="0">

Then, in the code snippet you initialize Google Maps objects, you must create a places.Autocomplete object, passing the input you created to enter the address as a parameter.

map = new google.maps.Map(..., ...);

var addressInput = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(addressInput);
autocomplete.bindTo('bounds', map);

Once you've done this, you need to "listen" to the place_changed event of the autocomplete component, so that whenever the user enters a new address, you can pick up the coordinates. In addition to picking up the coordinates in the address, when the event occurs the map will be centered on the address as well as a marker will be created in place.

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    // centraliza na endereço digitado e ajusta o zoom
    map.setCenter(autocomplete.getPlace().geometry.location);
    maxZoomService.getMaxZoomAtLatLng(autocomplete.getPlace().geometry.location, function(response) {
        map.setZoom(response.status == google.maps.MaxZoomStatus.OK ? parseInt(response.zoom * .85) : 16);
    });

    // adiciona uma marker para o endereço
    addrMarker.setPosition(autocomplete.getPlace().geometry.location);
    addrMarker.setVisible(true);

    // chama outra função para setar os valores os inputs
    fillGeolocFields(autocomplete.getPlace().geometry.location);
}); 

Finally, this is the function that fills the hidden fields of latitude and longitude:

function fillGeolocFields(location) {
    $('#lat').val(location.lat());
    $('#lng').val(location.lng());
}

Now with latitude and longitude values stored in inputs , you can submit your form normally.

You can read the Place Autocomplete documentation on the links: link

link