Integrar la API de Google Maps con Javascript

Usar la API de Google Maps puede ser útil en algunos proyecto, por eso, vamos a aprender a integrarla en nuestro código utilizando Javascript.

Integración del mapa

Lo primero que tenemos que hacer es crear una estructura básica en html, y creamos un archivo script.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Google Maps</title>
  <style>
    .map{width: 500px; height: 500px;}
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  
  <!-- Google Map API -->
  <script src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap" async defer></script>
  <!-- script -->
  <script src="js/script.js"></script>
</body>
</html>

Nuestro script para iniciar el mapa, seria el siguiente

// Capturamos el elemento donde se mostrara el mapa
const mapElement = document.getElementById('map')

// variable que almacenara la instancia del mapa
const map;

// Objeto con la latitud y la longitud del centro que mostrara el mapa
let mapCenter = {lat: -34.397, lng: 150.644}

// initMap se ejecuta cuando el archivo de la api de google se cargue
const initMap = () => {
  map = new google.maps.Map( mapElement , {
    center: mapCenter,
    zoom: 8
  });
}

Si no queremos que el mapa se inicie al principio, quitamos el valor callback=initMap de la ruta de el enlace de google.

¿Cómo iniciar el mapa con un marcador?

Dentro de la funcion initMap y debajo de la instancia del mapa colocamos el siguiente codigo.

let marker = new google.maps.Marker({
  position: mapCenter, // Nuestra ubicación
  map: map // instancia del mapa
});

Si queremos que nuestro mapa no se mueva, usamos la propiedad draggable y la establecemos en ‘false’

map = new google.maps.Map( mapElement , {
  ...
  draggable: false
});

¿Cómo colocar un marcador haciendo clic en el mapa?

// añadimos el evento click
map.addListener('click', function (event){
  // creamos un marcador
  let marker = new google.maps.Marker({
    position: event.latLng, // apliamos las corrdenadas que vienen del evento
    map: map // instancia del mapa
  });
});

Si lo que queremos es tener siempre un solo marcador, solo cambiamos la variable marker…

let marker;
map.addListener('click', function (event){
  marker = new google.maps.Marker({
  ...

Podemos hacer que el mapa se coloque en el centro, cuando coloquemos el marcador

map.addListener('click', function (event){
  ...
  map.setCenter( marker.getPosition() );
});

¿Como quitar un marcador?

La manera para quitar un marcador, es establecer el mapa en null con el método setMap. Lo que vamos a hacer con este código es que cuando se le haga click en el marcador, ese marcador se elimine.

map.addListener('click', function (event){
  ...
  marker.addListener('click', function(){
    marker.setMap(null);
  });
  ...
});

¿Cómo conseguir las coordenadas de mi hubicación?

Una manera sencilla, es ir al mapa de google y realizar una busqueda sencilla, voy a poner de ejemplo Disneyland, google traera el siguiente resultado:

https://www.google.com/maps/place/Disneyland/@33.8120918,-117.9211682,17z

Donde, 33.8120918 es la longitud, -117.9211682 la latitud y el 17z es el zoom, pero es irrelevante, porque lo podemos establecer a nuestro gusto, mientras más bajo sea el numero, más lejos será.