Personalizar estilos de Google Maps Vue Google Maps - 3ra parte

Dom 09 Feb 2020 | Por: Roylan Suarez

Recuerda suscribirte a nuestro blog para que no te pierdas ninguna entrada.

Te dejo aquí las entradas anteriores por si te las perdiste:

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.

Snazzy mapsHacemos 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.

Snazzy maps code

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.

Estilos mapas de google maps

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…



Déjanos un comentario


2 Comentarios

Ivan Avila22 de Septiembre de 2020 a las 15:46

Has probado gmap-autocomplete???


Roylan23 de Septiembre de 2020 a las 13:04

Hola Ivan.

No, no he probado gmap-autocomplete.


Artículos relacionados