Primeros pasos con google-maps-api-3

Coloque el pin del usuario en el mapa.


Nota, si no está familiarizado con la API de Google Maps, puede leer el ejemplo anterior (conceptos básicos) para comprender este pequeño ejemplo.


  • Primero, inicializa el mapa.

Puede agregar un elemento de mapa en su código HTML y un poco de CSS como este:

<!DOCTYPE html>
<html>
<head>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

Ahora, debe agregar la biblioteca de Google Maps a su código con un script balise como este:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

Puede reemplazar YOUR_API_KEY en el código por una clave api de Google. El es un enlace para obtener una clave.

A continuación, debe escribir en su código una función que sirva como una devolución de llamada (o una función de inicialización) para su mapa. Aquí, solo agregamos una pequeña función que puede encontrar en Google [aquí] 2:

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }

Ahora normalmente tienes un mapa básico en tu pantalla. Puede encontrar el código completo en google.


  • Segundo, encuentra la posición del usuario.

Para solicitar la posición del usuario, existe una función muy sencilla que proporciona el navegador:

navigator.geolocation.getCurrentPosition(showPosition);

Tenga en cuenta que esta función acepta un parámetro. Es una función para llamar si la geolocalización es exitosa.

Tenemos que crear esta función. :)

function showPosition(position) {
    alert (position);    
}

Esta función es muy simple y tendremos que actualizarla después para trazar un marcador en la posición del usuario.

La función de geolocalización que usamos aquí es muy simple. Puedes tener la documentación completa en w3schools.

En este punto, el código se ve así:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      console.log(position);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>

  • Y tercero, muestra la posición del usuario en el mapa con un marcador.

Para mostrar un marcador en el mapa, puede usar la función en el ejemplo ‘básico’:

// Create a marker and place it on the map
var marker = new google.maps.Marker({
    position: position,
    map: map
});

No detallaré estas líneas de códigos con mucha precisión. Solo puede saber que cuando crea un marcador con este código: new google.maps.Marker({});, pasa las ‘opciones de marcador’ y entra en los abrazos. Puede consultar la documentación de Google aquí.

También tenga en cuenta que puede especificar la posición del marcador muy fácilmente con el parámetro de posición.

Ahora tenemos que modificar la función showPosition.

Puede acceder simplemente a la latitud y longitud de la posición variable de esta manera:

  var markerPosition={};
  markerPosition.lat=position.coords.latitude;
  markerPosition.lng=position.coords.longitude;

Así, Google entiende cómo acceder simplemente al valor de latitud y longitud.

Ahora agregamos para modificar la función showPosition para agregar un marcador en la posición del usuario.

function showPosition(position) {
    var markerPosition={};
    markerPosition.lat=position.coords.latitude;
    markerPosition.lng=position.coords.longitude;
    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
    });
}

  • Finalmente, su código debería verse así:

    Simple Map