Como Mostrar Google Maps con Vue JS 2.6 (Vue Cli 3.11) – Parte 2 (Final)

Frontend Tutoriales Vue JS

Demo Github

Continuamos con la creación de un Mapa de Google con Vue JS, en el capitulo anterior Como Mostrar Google Maps con Vue JS 2.6 (Vue Cli 3.11) – Parte 1 había creado un nuevo proyecto junto con 2 componentes CargarMapa.vueMapa.vue , en esta Parte 2 y última terminaremos de crear los demás elementos del proyecto, vamos con el Post. 

Ahora creare el componente Marcadores.vue , este me servirá para definir los tipos de datos que componen a los marcadores de mi Mapa de Google.

Marcadores.vue

Lo primero que hago en este componente es exportar los tipos de datos que contiene mapa que son google, map y marker

Luego con el método mounted de Vue JS, llamo el array de datos que se mostrarán en mi mapa de Google

A continuación todo el código del componente Marcadores.vue 

Configuración del Mapa

Voy a crear un archivo de configuración para mi Mapa de Google, creo un directorio llamado constants, este directorio lo creare dentro del directorio src y dentro del directorio constants crearé un archivo Javascript llamado configMapa.js

Abro el archivo que he creado llamado configMapa.js y agrego lo siguiente

En este archivo he agregado ciertas configuraciones que la API de Google Maps Javascript me permite realizar, al final exporto los datos de configuración para usarlos en mi componente Mapa.vue 

Componente Principal

Ahora voy a llamar a todos los componentes que he creado anteriormente en un componente principal, este componente se llama App.vue , este archivo se creo automáticamente cuando realice la creación de un proyecto nuevo con Vue JS al inicio de este tutorial.

El archivo App.vue se encuentra en src > App.vue

Abro el archivo App.vue y agrego lo siguiente

Lo que hago en el componente App.vue es definir el div con el nombre de clase o class mapa que es en donde cargaré el Mapa de Google, luego llamo al componente Mapa.vue que contiene los demás componentes y el archivo de configuración del Mapa entre otros datos

Al final agrego un estilo para el contenedor con el nombre de clase o class mapa, le doy un alto de 425 px

Ultima Configuración

Por ultimo abro el archivo main.js

Y agrego lo siguiente

Lo que hago en el archivo main.js es llamar al componente App.vue que contiene todos los componentes y demás configuraciones del Mapa de Google.

Si arranco el servidor de Desarrollo de Vue JS en la consola de comandos

Abro la dirección https://localhost:8080/ debe cargarme el mapa de Google renderizado reactivamente con Vue JS 2.6

Puedes agregar o quitar los marcadores que desees con sus ubicaciones respectivas, esto en el componente Mapa.vue 

Si deseas ver el Mapa de Google en funcionamiento, al inicio de este Post he colocado una Demo y el repositorio GitHub con el código del proyecto.

Nota(s)

  • En futuras versiones de Vue JS, puede cambiar el orden, los métodos y demás configuraciones que he realizado para mostrar el Mapa de Google.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required