3

Sou novo no desenvolvimento com essa API e gostaria de mostrar no mapa que estou desenvolvendo a posição atual do usuário.

Meu código:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB7s0zDs4RMWrpqWjAmr7OD-BQbq8LubZk&amp;sensor=false"></script>
<script>
var geocoder;
var map;
var marker;

  function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);
}

  $(document).ready(function () {
    initialize();
});

0

1 Resposta 1

7

Você pode usar o método getCurrentPosition() do objeto Geolocation para pegar o local atual do usuário.

Exemplo baseado no seu código:

var geocoder;
var map;
var marker;

  function initialize() {
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);
    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);

    geocoder = new google.maps.Geocoder();

    marker = new google.maps.Marker({
        map: map,
        draggable: true,
    });

    marker.setPosition(latlng);
}

// verifica se o navegador tem suporte a geolocalização
if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){ // callback de sucesso
        // ajusta a posição do marker para a localização do usuário
        marker.setPosition(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
    }, 
    function(error){ // callback de erro
       alert('Erro ao obter localização!');
       console.log('Erro ao obter localização.', error);
    });
} else {
    console.log('Navegador não suporta Geolocalização!');
}

$(document).ready(function () {
    initialize();
});

Veja funcionando no JSFiddle.

4
  • não consegui obter minha localização atual ,testei no meu código e também testei no JSFiddle e também não obtive exito!!. Commented 26/02/2015 às 18:47
  • @HansMiller Você tem que permitir que o site obtenha sua localização quando solicitado. Commented 26/02/2015 às 18:49
  • pow desculpa valeu! @Andre deu certo, como faco para deixar o meu mapa com as ruas e logradouros do local onde se encontro? por que na forma atual o mapa mostra o Brasil todo. queria aquele mapa que mostra as ruas.@Andre eu sou novo no desenvolvimento com essa api vc pode mi indicar sites ,tutoriais video-aulas?? Commented 26/02/2015 às 19:00
  • @HansMiller Dê uma olhada aqui para ver como selecionar um tipo de mapa diferente. Quanto ao tutorial, o guia da prória documentação da API é ótimo e cobre praticamente tudo que é possível fazer. Não se esqueça de marcar a resposta como aceita caso esteja satisfeito. Commented 26/02/2015 às 19:08

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 .