Google Maps coordinates via a Widget on a website

Question

I’m setting up a geolocation-based registration system. It happens that, sometimes, the registration should be done by phone, and the attendant is who will enter the location (coordinates) customer’s.

Through the website of Google Maps, simply with a Right Click > What is this? you get the exact coordinates of the location. See the image:

The problem

However, I didn’t want to have to use the Google Maps page, since it is possible to include the widget on my page. The problem is that polo widget, practically all you can give zoom in/out; right click not even "works". So, HOW TO GET THE COORDINATES FROM IT?

If IS NOT POSSIBLE, which the ALTERNATIVE to do this?

Page example:

Answer 1

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

You can use it like this:

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

And then call map.getCenter(); to obtain an object with the map center coordinates

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

Answer 2

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

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

Answer 3

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