Hola amigos lectores de CódigoJS, Desarrollo web en Sevilla. Hoy quiero compartir una entrada súper interesante sobre un problema que hemos tenido que resolver para un proyecto en el que estamos trabajando. Voy a compartir cómo insertar un mapa de Google en una página web usando vuejs google maps y Quasar Framework, además cómo añadir una capa para mostrar las fronteras de cualquier país, provincia o municipio del mundo. Este artículo está dividido en varias entregas para no hacerlo demasiado extenso. En esta primera parte veremos las funciones básica para insertar un mapa de Google en un proyecto con Quasar o VueJS. En la segunda entrega aprenderemos cómo insertar un polígono en Google Maps con la frontera de cualquier país o provincia del mundo. Sigue leyendo si te interesa el tema.
Tabla de contenidos
Google Maps y los límites de fronteras.
Antes de continuar recuerda suscribirte a nuestro boletín para no perderte ninguna entrega.
El código de este proyecto de ejemplo también está disponible en GitHub por si lo quieres descargar.
Como decía al inicio, estamos trabajando en un proyecto en el que necesitamos mostrar el mapa de un país y dibujar la frontera de una provincia o municipio determinado. Comenzamos la búsqueda pensando que la API de Google Maps tendría alguna solución pero no la encontramos. Finalmente nos informaron que la API no permitía esta implementación. Así que nos dimos a la tarea de buscar nuestra solución y hoy la quiero compartir para quien la necesite.
Mapas con VueJS Google Maps
Si quieres implementar los mapas de Google en un proyecto con VueJS, vue2-google-maps es la mejor solución que hemos probado, permite hacer casi cualquier cosa. Vamos a dar por sentado que ya sabes crear un proyecto con Quasar, si no puedes consultar esta guía sobre cómo crear un proyecto con Quasar Framework. Una vez tengamos nuestro proyecto creado vamos a instalar la librería, nos vamos a la consola y escribimos lo siguiente:
$ npm install vue2-google-maps
Configurando VueJS Google Maps
Instalado el componente nos vamos a la página donde vamos insertar el mapa, es este caso: src/pages/Index.vue. Nos movemos a la seccion script y dejamos el código como sigue:
<script>
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'mi-api-key'
}
})
export default {
name: 'PageIndex',
data () {
return {
center: {
lat: 36.60338869729776,
lng: -4.643738644531254
},
zoom: 7,
}
}
}
</script>- Primero importamos Vue.
- A continuación importamos todos los componentes de vue2-google-maps.
- Establecemos la api-key de google maps:
- key: 'api-key-google'
- Si no tienes una api-key de Google en el siguiente enlace puedes obtener una.(https://developers.google.com/maps/documentation/javascript/get-api-key)
- En el data establecemos el centro del mapa con los parámetros lat y lng, y el zoom del mapa.
Ahora nos vamos al html de la página y la dejamos como sigue:
<template>
<q-page class="col">
<div id="mapa">
<gmap-map
:center="center"
:zoom="zoom"
style="width: 100%; height: 450px;">
</gmap-map>
</div>
</q-page>
</template>- En el componente gmap-map establecemos el valor de la variable center del data a la propiedad center del componente para que el mapa ubique las coordenadas en el centro de la pantalla.
- Establecemos el zoom del mapa con el valor de la variable que declaramos en el data.
- Por último le establecemos un estilo al mapa para definir el ancho y alto del contenedor. En este caso lo hemos puesto al 100% de ancho y 450px de alto.
Esta es la configuración básica del componente vue2-google-map que necesitamos para mostrar un mapa de Google Map en un proyecto con Quasar y/o VueJS. Ahora nos vamos a la consola, ejecutamos el proyecto y veremos como muestra el mapa de la provincia de Málaga, España en el centro de la pantalla.
$ quasar dev
Cómo insertar un marker en el mapa
Ahora veremos cómo insertar uno o varios markers en el mapa. Par ello, necesitaremos un array de objetos con la longitud y latitud de los puntos que queramos insertar. Añadimos el siguiente array de objetos al data después de la variable zoom:
markers: [
{ lat: 36.71395099999999, lng: -4.432000000000016 },
{ lat: 36.51007199999999, lng: -4.882447400000046 }
],Cada objeto del array debe tener la latitud y longitud del punto que queremos insertar en el mapa. A continuación nos movemos al html de la página e insertamos el componente gmap-marker de tal forma que quede así:
<template>
<q-page class="col">
<div id="mapa">
<gmap-map
:center="center"
:zoom="zoom"
style="width: 100%; height: 450px;">
<gmap-marker v-for="(marker) in markers"
:key="marker.key"
:position="marker"
>
</gmap-marker>
</gmap-map>
</div>
</q-page>
</template>Aquí lo que hemos hecho es insertar el componente gmap-marker dentro del componente gmap-map y hacer un bucle for por cada uno de los elementos del array markers para insertarlo en el mapa. Nos vamos al navegador y podemos comprobar como aparecen dos markers en el mapa.
Cambiar el icono del marker
Si queremos cambiar el icono del marker que trae por defecto Google Maps es muy fácil.
- Primero establecemos una variable llamado icon con la ruta del marker.
- Copiamos la imagen que queremos establecer de marker hacia la carpeta /statics del proyecto, por ejemplo mi imagen se llama: /statics/marker.png
- Añadimos una variable llamada icon al data con la ruta de la imagen.
...
...
export default {
name: 'PageIndex',
data () {
return {
center: {
lat: 36.60338869729776,
lng: -4.643738644531254
},
zoom: 7,
markers: [
{ lat: 36.71395099999999, lng: -4.432000000000016 },
{ lat: 36.51007199999999, lng: -4.882447400000046 }
],
icon: '/statics/marker.png' // Icono del marker
}
}
}
</script>- Por último, en el bucle donde se añaden los markers al mapa insertamos la variable icon de la siguiente forma:
...
<gmap-map
:center="center"
:zoom="zoom"
:options="options"
style="width: 100%; height: 450px;">
<gmap-marker v-for="(marker) in markers"
:key="marker.key"
:position="marker"
:icon="icon" // Icono del marker
>
</gmap-marker>
</gmap-map>
...
...Ahora, nos vamos a la web y podemos ver como ha cambiado el marker por defecto del mapa.
Configurando opciones de google maps
A continuación veremos una seria de opciones que podemos establecer a nuestro mapa para personalizarlo a nuestro gusto. Primero, creamos un objeto con las opciones que queremos establecer al mapa y lo insertamos después de la variable markers en el data.
...
...
export default {
name: 'PageIndex',
data () {
return {
center: {
lat: 36.60338869729776,
lng: -4.643738644531254
},
zoom: 7,
markers: [
{ lat: 36.71395099999999, lng: -4.432000000000016 },
{ lat: 36.51007199999999, lng: -4.882447400000046 }
],
options: {
zoomControl: true, // Establece el control de zoom del mapa
mapTypeControl: false, // Oculta el control de tipos de mapas
scaleControl: false, // Oculta el control de escala del mapa
streetViewControl: false, // Oculta el control de StreeView del mapa
fullscreenControl: true // Establce el control full screen para ver el mapa a pantalla completa
},
icon: '/statics/marker.png'
}
}
...
...Estas son algunas de las opciones que tenemos disponibles, claro, hay muchas más que puedes consultar en la doc de google maps:
- zoomControl: true, // Establece el control de zoom del mapa.
- mapTypeControl: false, // Oculta el control de tipos de mapas.
- scaleControl: false, // Oculta el control de escala del mapa
- streetViewControl: false, // Oculta el control de StreeView del mapa
- fullscreenControl: true // Establece el control full screen para ver el mapa a pantalla completa
Solo tienes que cambiar los valores de las variables a true o false según tus necesidades. Ahora nos vamos al componente html y añadimos las opciones de esta forma:
...
...
<gmap-map
:center="center"
:zoom="zoom"
:options="options" // Opciones del mapa
style="width: 100%; height: 450px;">
<gmap-marker v-for="(marker) in markers"
:key="marker.key"
:position="marker"
:icon="icon"
>
</gmap-marker>
</gmap-map>
...
...Código completo del ejemplo
Aquí te dejo el código completo del ejemplo
<template>
<q-page class="col">
<div id="mapa">
<gmap-map
:center="center"
:zoom="zoom"
:options="options"
style="width: 100%; height: 450px;">
<gmap-marker v-for="(marker) in markers"
:key="marker.key"
:position="marker"
:icon="icon"
>
</gmap-marker>
</gmap-map>
</div>
</q-page>
</template>
<script>
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: 'api-key-google-maps'
}
})
export default {
name: 'PageIndex',
data () {
return {
center: {
lat: 36.60338869729776,
lng: -4.643738644531254
},
zoom: 7,
markers: [
{ lat: 36.71395099999999, lng: -4.432000000000016 },
{ lat: 36.51007199999999, lng: -4.882447400000046 }
],
options: {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
fullscreenControl: true
},
icon: '/statics/marker.png'
}
}
}
</script>
Conclusiones
Hemos visto que vue2-google-maps es una excelente librería que nos permite jugar con los mapas de Google a nuestro gusto y de una forma súper rápida. En la próxima entrega, que debe estar lista la próxima semana, vamos a ver como añadir un polígono con las fronteras de cualquier país del mundo de forma gratis. Espero que esta primera entrega te sea de utilidad, y si quieres compartir algo te espero en los comentarios. Hasta la próxima.
