Recuerda suscribirte a nuestro blog para que no te pierdas ninguna entrada.
Te dejo aquí las entradas anteriores por si te las perdiste:
- Vuejs Google Maps en Quasar + Fronteras de países- 1ra Parte
- Polígonos con VueJS Google Maps en Quasar – 2da Parte
El código de este proyecto está disponible en Github
Tabla de contenido
Cambiar el estilo de los mapas de Google.
Por defecto, todos los mapas de Google tienen el mismo estilo y más allá de cambiar algunos aspectos, como hemos visto en los artículos anteriores, también es posible modificar el estilo de los mapas que nos ofrece el señor G. Para este propósito utilizaremos una herramienta llamada Snazzy Maps la cual nos ofrece un repositorio gratuito de más de 1500 estilos de mapas organizados por gama de colores y otros criterios.
Seleccionar el estilo de mapa Google
En Snazzy Map puedes seleccionar un estilo predefino pero también puedes crearte el tuyo propio, en esta ocasión haremos uso de un estilo ya creado. Nos vamos a la web https://snazzymaps.com y en portada veremos una lista de estilo ordenados por varias categorías.
Hacemos clic en un estilo, por ejemplo: https://snazzymaps.com/style/15/subtle-grayscale donde seleccionaremos el código del estilo del mapa. Desplazamos la barra lateral de la izquierda y hacemos clic en Expand Code para mostrar todo el código del estilo.
Ahora, seleccionamos el código completo y nos vamos a nuestro editor, creamos un archivo nuevo en src/statics/ con el nombre style.js, lo editamos y copiamos el código como sigue:
const styleMap = [
{
'featureType': 'administrative',
'elementType': 'all',
'stylers': [
{
'saturation': '-100'
}
]
},
...
...
...
...
{
'featureType': 'water',
'elementType': 'labels',
'stylers': [
{
'lightness': -25
},
{
'saturation': -100
}
]
}
]
export { styleMap }
Recuerda añadir el export al final del archivo.
Aplicar el estilo al mapa de Google
Siguiendo el artículo anterior de esta serie que hemos estado publicando, editamos la página Index.vue e importamos el archivo que contiene los estilos:
...
...
import { paths } from '../statics/paths'
import { styleMap } from '../statics/style' // Archivo de estilos
...
...Ahora nos vamos a las options del mapa un poco más abajo y le asignamos los estilos a una opción que tiene vue google maps para este fin llamada styles.
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,
styles: styleMap // Estilos del mapa
},
icon: '/statics/marker.png',
paths: paths
}
}Guardamos los cambios y, si todo ha ido bien, deberíamos estar viendo el mapa con los nuevos estilos aplicados.
Fácil verdad!!!!
Conclusiones
Znazzy Maps es una gran herramienta totalmente gratuita y protegida con una licencia Creative Commons la cual podemos usar en nuestros mapas para cambiar el aspecto tradicional que nos ofrece GoogleMaps. Esto es todo por hoy, espero que sea de utilidad en tus proyectos con mapas. Nos vemos en la próxima…
