Implementando a Geolocation API com Google Maps API

A geolocalização pode ser um benefício adicional para muitos aplicativos da web e usá-la com a API do Google Maps é fácil e divertido.

Primeiro, obtenha uma chave de API do Google Map e adicione-a à sua página da web:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Agora você está pronto para começar a usar a GoogleMapfunção para obter sua localização (posição):

// create Google map
function GoogleMap(position) {
  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
}

Depois de chamar a GoogleMapfunção, você pode definir o ID, a altura e a largura do mapa. Existem muitos tipos de mapas , estilos e opções de controle para personalizar seu mapa.

Configure o mapa e o marcador usando as funções google.maps.Mape google.maps.Marker:

// create Google map
function GoogleMap(position) {
  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 20,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
    map: map,
    position: location,
    animation: google.maps.Animation.DROP,
    title: "This is your location"
  });

  map.setCenter(location);
}

Você pode adicionar uma função para exibir um erro se o local não puder ser recuperado do Google Maps:

// show error if location can't be found
function showError() {
  alert("Location can't be found");
}

Por último, verifique se o seu navegador suporta geolocalização e execute a GoogleMapfunção:

// execute geolocation
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(GoogleMap, showError);
  } else {
  alert("Your browser does not support Geolocation.");
}

Boa codificação.