1

Estou montando um sistema de cadastro baseado em geolocalização. Acontece que, em algumas vezes, o cadastro deverá ser feito por telefone, e a atendente é quem vai inserir a localização (coordenadas) do cliente.

Pelo site do Google Maps, simplesmente com um Botão Direito > O que é isto? se consegue as coordenadas exatas do local. Vejam a imagem:

Google Maps > O que é isto? Coordenadas Google Maps

O problema

Porém, não queria ter que usar a página do Google Maps, uma vez que é possível incluir o Widget na minha página. O problema é que polo widget, praticamente só dá pra dar zoom in/out; botão direito nem mesmo "funciona". Então, COMO CONSEGUIR AS COORDENADAS A PARTIR DELE?

Se NÃO FOR POSSÍVEL, qual a ALTERNATIVA de se fazer isto?

Exemplo da página: Wifget Google Maps

3 Respostas 3

1

Você pode extrair as coordenadas do centro do mapa na sua página chamando a funcão .getCenter() da API do Google Maps.
Assim o utilizador pode arrastar e centrar o mapa onde quer e depois extrair coordenadas com um botão ou outra ação.

Pode usar assim:

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

E depois chamar map.getCenter(); para obter um objecto com as coordenadas do centro do mapa

E obter (no meu exemplo):

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

Exemplo

0

Use a API do Google Maps e veincule uma função ao evento click:

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

Eu implementei algo bem parecido em uma sistema uma vez. Você pode dar uma olhada e copiar se quiser.

How-to

Como pelo visto você já tem o widget do Google Maps do seu site, basta adicionar um campo para que o usuário possa digitar o endereço que a pessoa passar pelo telefone e dois campos hidden que irão guardar os valores de latitude e longitude. O campo de endereço vai ser do tipo autocomplete, igual ao Google Maps mesmo, onde você digita o endereço e as opções vão aparecendo.

<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">

Depois, no trecho de código que você inicializa os objetos do Google Maps, você deve criar um objeto places.Autocomplete, pasando como parâmetro o input que você criou para digitar o endereço.

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

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

Feito isso, você precisa "escutar" o evento place_changed do componente de autocomplete, de modo que sempre que o usuário digitar um novo endereço, você possar pegar as coordenadas. Além de pegar as coordenadas no endereço, quando o evento ocorrer o mapa será centralizado no endereço, bem como um marker será criado no local.

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);
}); 

Finalmente, essa é a função que preenche os campos hidden de latitude e longitude:

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

Agora com os valores de latitude e longitude armazenados os inputs, você pode submeter seu formulário normalmente.

Você pode ler a documentação do Place Autocomplete nos 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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .