Google maps + Vue 3 (Composition API)

Este contenido está dirigido a programadores que ya tienen conocimiento mínimo en Vue, es decir, que ya tienen instalado un proyecto usando Vue. Dicho esto solo se mostrará como se puede implementar un mapa utilizando la API de Google Maps escribiendo el código con el método de Composition API de Vue 3.

¿Qué necesito para crear mi primer mapa con la API de Google Maps?

• API Key de Google Maps
• Paquete @googlemaps/js-api-loader

Para que el mapa se pueda el mapa se requiere una Key o una Clave que te permitirá mostrar un mapa en tu aplicación. Si NO tienes la Key o no sabes donde generarla, puede ir al siguiente enlace que es el manual oficial de Google Maps para obtenerla. 👇

¿Cómo obtener una api key de Google Maps?

Lo otro que necesitaras para correr este tutorial será instalar el paquete @googlemaps/js-api-loader. Con esta librería podrás tener todas las funciones y métodos que te brinda Google Maps para customizar tu mapa. Para ello debes ejecutar en la raíz de tu proyecto Vue la siguiente instrucción:

npm i @googlemaps/js-api-loader

Una vez instalado procedemos a crear nuestro archivo vue para mostrar el mapa, en este caso lo llamaremos Index.vue que contendrá el siguiente código:

<template>
    <div id="mapa"></div> 
</template>

<script>

import { defineComponent, onMounted } from 'vue'
import { Loader } from "@googlemaps/js-api-loader"

export default defineComponent({

    setup() {

        onMounted(() => {

            initMap()

        })

        const initMap = async () => {
     
            const loader = new Loader({
                apiKey: "tu_api_key_google_maps"
            })

            const { Map } = await loader.importLibrary("maps")
            const latLng = { lat: -34.397, lng: 150.644 }
            
            const map = new Map(document.getElementById("mapa"), {
                center: latLng,
                zoom: 17
            })
            
        }

    }

})

</script>

<style>

#map {
    height: 300px;
    width: 100%;
}

</style>

Desglosemos el código anterior:

1) template: aquí crearemos una capa con un id mapa (id=»mapa») donde se mostrará el mapa. Cabe destacar que dicha capa debe tener sus dimensiones mínimas para ser visualizada, es decir, colocarle su altura (height) y su ancho (width) los cuales se los indicaremos por css.

<template>
    <div id="mapa"></div> 
</template>

Código css:

<style>

#map {
    height: 300px;
    width: 100%;
}

</style>

2) Hacemos el llamado a la librería @googlemaps/js-api-loader:

<script>

import { defineComponent, onMounted } from 'vue'
import { Loader } from "@googlemaps/js-api-loader"

3) Creamos el método onMounted donde haremos la llamada a la función que realiza la instancia del mapa de Google Maps. La función que hara la instancia del mapa la llamaremos initMap() y la llamaremos dentro del método onMounted de Vue.

onMounted(() => {

    initMap()

})

4) Función initMap(): en esta función instanciamos la clase llamada new Loader donde se asignaremos como valor a su propiedad apiKey la key que generaste en la consola de google para developers como anteriormente te indicamos. (¿Cómo obtener una api key de Google Maps?)

 const initMap = async () => {
     
    const loader = new Loader({
        apiKey: "tu_api_key_google_maps"
    })

5) Importamos la librería que nos interesa desde la clase instanciada. La clase Loader contiene muchas librerías que nos permitirá entre muchas otra cosas crear un marcador, polígonos, etc., pero por ahora solo nos interesa la librería que nos permitirá cargar el mapa (loader.importLibrary(«maps»)).

const initMap = async () => {
     
    const loader = new Loader({
        apiKey: "tu_api_key_google_maps"
    })

    const { Map } = await loader.importLibrary("maps")

6) Luego en una constante que llamaremos latLng indicaremos los valores de latitud y longitud que el mapa necesita para mostrarse. Estas serán las coordenadas iniciales que el mapa mostrará.

Luego instanciamos la clase Map donde le pasaremos como primer parámetro el elemento con el id «map» que está en el template inicial referido en el punto 1, es decir el id del elemento en este caso un div con el id map, luego pasándole como opciones del mapa las coordenadas iniciales almacenadas en la variable latLng y el zoom o acercamiento inicial de dichas coordenadas, es decir cuan lejos o cerca necesitas ver el mapa.

const { Map } = await loader.importLibrary("maps")
const latLng = { lat: -34.397, lng: 150.644 }
new Map(document.getElementById("map"), {
    center: latLng,
    zoom: 17
})

Dando como resultado final lo siguiente:

Espero que te haya sido de utilidad. Si quieres puedes descargar el código del siguiente repositorio donde estaremos usando para realizar nuevas integraciones de funciones de esta maravillosa API de Google Maps.

Descargar código