En esta página:
Demo Github
Mediante Vue JS podemos cargar diferentes tipos de elementos en una vista Front, en ciertas ocasiones puede que necesites cargar un Mapa de Google, en Vue JS el proceso es muy sencillo, esto es lo particular que tiene este Framework, nos permite hacer cosas potentes con poco código, pero en algunas ocasiones puede haber excepciones en donde un proyecto requiera más código, allí se puede valorar la limpieza en el código que Vue JS nos brinda. Vamos con este Post.
- Parte 1
- Parte 2 (Final)
Antes de continuar con este Tutorial te recomiendo leer el siguiente artículo Que es Vue JS, Historia y otros detalles para que estes familiarizado con este Tutorial, pero si ya conoces sobre Vue JS no hay problema, puedes seguir con este tutorial.
El Framework Vue JS tiene la capacidad de renderizar elementos de manera reactiva, esto significa que lo hace a una gran velocidad cuando tiene que mostrar dichos elementos al usuario.
Algo que me gusta mucho de Vue JS en cuanto al desarrollo de un proyecto, es la libreria nodemon, que actualiza al instante los cambios que hago en un archivo del proyecto, algo que otros Frameworks deberian considerar añadirlo a sus cores.
Creación de Nuevo Proyecto
Para esta versión de Vue JS 2.6 estoy usando Vue CLI 3.11, si quieres saber más sobre Vue CLI, como instalarlo y otros detalles, puedes leer el Post Primeros Pasos con Vue Cli 3.
Yo ya tengo instaldo Vue CLI, abro mi consola de comandos en un directorio de mi PC y ejecuto el siguiente comando para crear un nuevo Proyecto, le doy el nombre vuejs_google_maps a mi proyecto
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
vue create vuejs_google_maps Creating project in D:\xampp\htdocs\tutoriales\pruebita. Creating project in D:\xampp\htdocs\tutoriales\pruebita. Initializing git repository... Initializing git repository... Installing CLI plugins. This might take a while... ... ... (Continua la creación del Proyecto) ... Invoking generators... |
Espero a la consola de comandos que termine de crear el proyecto, me ha creado una carpeta llamada vuejs_google_maps y dentro de su interior me ha creado un conjunto de archivos y directorios indispensables para que mi proyecto funcione correctamente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/vuejs_google_maps ├── /node_modules ├── /public ├── favicon.ico ├── index.html ├── /src ├── /assets ├── logo.png ├── /components ├── HelloWorld.vue ├── App.vue ├── main.js ├── .editorconfig ├── .gitignore ├── index.php ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js |
Los Frameworks han ido evolucionando y ahora nos crean toda la estrucutura optima para un proyecto en este caso con Vue JS.
Componentes
Voy a crear 3 componentes para darle un mejor orden a mi proyecto, estos componentes los llamaré CargarMapa.vue , Mapa.vue y Marcadores.vue , estos 3 archivos los creo en el directorio llamado components que se encuentra en src > components
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/vuejs_google_maps ├── /node_modules ├── /public ├── favicon.ico ├── index.html ├── /src ├── /assets ├── logo.png ├── /components ├── CargarMapa.vue // Este archivo ├── HelloWorld.vue ├── Mapa.vue // Este archivo ├── Marcadores.vue // Este archivo ├── App.vue ├── main.js ├── .editorconfig ├── .gitignore ├── index.php ├── package-lock.json ├── package.json ├── README.md ├── vue.config.js |
CargarMapa.vue
Dentro del componente CargarMapa.vue voy a crear el template para la vista del mapa, agrego lo siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div> <div class="mapa" ref="mapa" ></div> <template v-if="Boolean(this.google) && Boolean(this.map)"> <slot :google="google" :map="map" /> </template> </div> </template> |
Antes de continuar voy a instalar la librería google-maps-api-loader que me permitirá consumir la API de Google Maps, parte del Desarrollo Agil es usar librerías que nos permitan llevar acabo una tarea rápidamente.
En mi consola de comandos escribo el siguiente comando para instalar la librería
|
1 2 3 4 5 6 7 |
npm i google-maps-api-loader --save google-maps-api-loader@1.1.1 added 2 packages from 2 contributors and audited 18995 packages in 36.393s found 0 vulnerabilities |
Bien ahora debajo del </template> llamaré a la libreria google-maps-api-loader y configuro los métodos necesarios para que Google Maps funcione en Vue JS sin problemas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<script> import GoogleMapsApiLoader from "google-maps-api-loader"; export default { props: { configMapa: Object, apiKey: String }, data() { return { google: null, map: null }; }, async mounted() { const googleMapApi = await GoogleMapsApiLoader({ apiKey: this.apiKey }); this.google = googleMapApi; this.initializeMap(); }, methods: { initializeMap() { const mapContainer = this.$refs.mapa; this.map = new this.google.maps.Map(mapContainer, this.configMapa); } } }; </script> |
A continuación todo el código de mi componente CargarMapa.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div> <div class="mapa" ref="mapa" ></div> <template v-if="Boolean(this.google) && Boolean(this.map)"> <slot :google="google" :map="map" /> </template> </div> </template> <script> import GoogleMapsApiLoader from "google-maps-api-loader"; export default { props: { configMapa: Object, apiKey: String }, data() { return { google: null, map: null }; }, async mounted() { const googleMapApi = await GoogleMapsApiLoader({ apiKey: this.apiKey }); this.google = googleMapApi; this.initializeMap(); }, methods: { initializeMap() { const mapContainer = this.$refs.mapa; this.map = new this.google.maps.Map(mapContainer, this.configMapa); } } }; </script> <style scoped> .mapa { width: 100%; min-height: 100%; } </style> |
Mapa.vue
En el segundo componente que he creado Mapa.vue voy a crear la vista para el Mapa de Google, primero creo su template, coloco la API KEY para poder consumir la API de Google Maps, asimismo crearé los marcadores del Mapa
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <CargarMapa :configMapa="configMapa" apiKey="TU API KEY" > <template slot-scope="{ google, map }"> <Marcadores v-for="marker in markers" :key="marker.id" :marker="marker" :google="google" :map="map" /> </template> </CargarMapa> </template> |
Debajo del </template> voy a importar los componentes CargarMapa y Marcadores, así mismo un archivo Javascript de Configuración llamado configMapa.
Luego exporto los componentes a la vista del usuario, creo un par de marcadores uno es para la ubicación de Machu Pichu – Cusco y otro es para Lima – Perú.
Por último centro el mapa a la ubicación del primer Marcador es decir a Machu Pichu – Cusco con el método de Google Maps mapCenter()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script> import CargarMapa from "./CargarMapa"; import Marcadores from "./Marcadores"; import { configMapa } from "@/constants/configMapa"; export default { components: { CargarMapa, Marcadores }, data() { return { markers: [ { id: "0", position: { lat: -13.1583635, lng: -72.603623 }, title: "Machu Pichu - Cusco" }, { id: "1", position: { lat: -12.025827, lng: -77.2679817 }, title: "Lima - Perú" } ] }; }, computed: { configMapa() { return { ...configMapa, center: this.mapCenter }; }, mapCenter() { return this.markers[0].position; } } }; </script> |
A continuación el código completo del componente Mapa.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<template> <CargarMapa :configMapa="configMapa" apiKey="TU API KEY" > <template slot-scope="{ google, map }"> <Marcadores v-for="marker in markers" :key="marker.id" :marker="marker" :google="google" :map="map" /> </template> </CargarMapa> </template> <script> import CargarMapa from "./CargarMapa"; import Marcadores from "./Marcadores"; import { configMapa } from "@/constants/configMapa"; export default { components: { CargarMapa, Marcadores }, data() { return { markers: [ { id: "0", position: { lat: -13.1583635, lng: -72.603623 }, title: "Machu Pichu - Cusco" }, { id: "1", position: { lat: -12.025827, lng: -77.2679817 }, title: "Lima - Perú" } ] }; }, computed: { configMapa() { return { ...configMapa, center: this.mapCenter }; }, mapCenter() { return this.markers[0].position; } } }; </script> |
Excelente, hasta aquí ya tengo creado mi proyeco con Vue JS, asi mismo he creado 2 componentes de 3.
Ten Paciencia, lo que quiero es que entiendas todo el proceso de como crear la aplicación y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota(s)
- En el siguiente capitulo crearé el ultimo componente llamado Marcadores.vue , también crear el archivo de configuración del Mapa y otros detalles.
- 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.