Personalizar estilos de Google Maps

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

Hola amigos lectores de CodigoJS, Diseño Web en Sevilla. Hoy compartimos la última entrega de esta serie de artículos relacionados con el trabajo con mapas de Google usando el componente vue2-google-maps. En la entrega de hoy aprenderemos a personalizar estilos de Google Maps de una forma muy fácil y rápida.

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

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 maps

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.

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 articulo anterior de esta seríe 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.

Personalizar estilos 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 sus proyectos con mapas.

Nos vemos en la próxima…

Suscríbete a nuestro boletín y mantente informado de todas nuestras publicaciones

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.