I implemented something very similar in a system once. You can give a look at and copy if you want.
How-to
As it seems you already have the Google Maps widget of your site, just add a field so that the user can enter the address that the person goes by phone and two fields Hidden which will store the latitude and longitude values. The address field will be of the type autocomplete, same as Google Maps same, 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 the Google Maps objects, you must create an object places.Autocomplete
, passing as parameter the input you created to enter the address.
map = new google.maps.Map(..., ...);
var addressInput = document.getElementById('address');
var autocomplete = new google.maps.places.Autocomplete(addressInput);
autocomplete.bindTo('bounds', map);
Once this is done, you need to "listen" to the event place_changed
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 at the address, when the event occurs the map will be centered on the address, as well as a Marker will be created on site.
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 inputs, you can submit your form normally.
You can read the Place Autocomplete documentation in the links:
https://developers.google.com/maps/documentation/javascript/places?hl=pt-br#places_autocomplete
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=pt-br