Iconos de Google Maps


¡Google Maps cumple 15 años! y queremos celebrarlo con este tutorial sobre cómo descargarnos los iconos de Google Maps.

¡Podéis descargar los iconos de Google Maps al final del Tutorial!

Es difícil no conocer esta aplicación que significó un cambio de paradigma en el sector de la cartografía.

Queremos hacer un recorrido por los iconos que utiliza actualmente el visor de mapas mas famoso de la actualidad.

Los iconos están clasificados de una forma sencilla y por colores:

Naranja: Comida y Bebida (bares, restaurantes).

Azul: Tiendas (de compras, centros comerciales, de alimentos).

Salmón: Salud (hospitales, farmacias).

Cian: Entretenimiento / Diversión (artes, monumentos, turismo, acuarios, museos, cines, parques).

Lila: Servicios (gasolineras, parkings, alquiler de coches, hoteles, bancos).

Verde: Aire Libre (parques, montañas, estadios, sendas, zonas termales, jardines, campos de golf, zoos, cementerios).

Gris: Servicios Civiles y Religiosos (oficinas de correos, policía, escuelas, bibliotecas, puentes, baños, gobiernos, iglesias, sinagogas, templos).

Celeste: Transporte (aeropuertos, trenes, metros, paradas de Bus, ferrys).

Si vemos los iconos de Google Maps por categorias:

Services
Gas Station gas
Parking parking
Car Rental car_rental
Hotel lodging
Resort resort
Bank (Euros) bank_euro
Bank (Dolar) bank_dollar
Bank (Japan) bank_jp
ATM atm
Bank bank_intl
Health
Hospital hospital_H
Hospital (Japan) hospital_shield
Pharmacy pharmacy
Fire (Japan) fire_jp
Medical medical
Outdoor
Park tree
Mountain mountain
Sports Stadium stadium
Zoo paw
Campground camping
Cementery cemetery
Golf Course golf
Garden flower
Hiking hiking
Boating boating
Fishing fishing
Hot Spring (Japan) hotspring
Transport
Aiport airport
Food & Drink
Food restaurant
Bar bar
Cafe cafe
Wine glass
Shopping
Shopping shoppingbag
Grocery shoppingcart
Entertainment/Leisure
Arts palette
Lighthouse lighthouse
Theatre theater
Tourist camera
Casino dice
Aquarium dolphin
Event Venue event_venue
Amusement Park ferriswheel
Historic historic
Historic (China) historic_cn
Museum museum
Movie Theatre movie
Monument monument
Music note
Relic relic_jp
Civil Services
Civil Building civic_bldg
Post Office postoffice
Post Office (Japan) postoffice_jp
Library library
Police police
Police (Japan) police_jp
School school
School (Japan) school_cn_jp
Bridge bridge
Restroom restroom
City Office (Japan) city_office_jp
Civil Office (Japan) civil_office_jp
Goverment (China) government_cn
Worship
Church or Temple worship_temple
Synagogue worship_jewish
Mormon Temple worship_mormon
Dharma Temple worship_dharma
Buddish Temple worship_buddhist
Hindu Temple worship_hindu
Jain Temple worship_jain
Shinto Temple worship_shinto
Gurdwara worship_sikh
Mosque worship_islam

Ahora vamos a ver como se obtener los iconos de Google Maps:

Nos dirigimos a maps y hacemos clic en herramientas para desarrolladores.

¿Cómo acceder a las herramientas para desarrolladores?

  • Hacemos clic con el botón derecho del ratón sobre el buscador de Google Maps, hacemos clic en inspeccionar, se mostrará el código HTML del elemento en el que hicimos clic.
  • Hacemos clic en los 3 puntos del panel superior derecha, seleccionamos Más herramientas, hacemos clic en Herramientas para desarrolladores.
  • Ctrl + Mayús + I

Una vez veamos el código html de la página, nos dirigimos a Network en el panel superior.

En el pequeño buscador que aparece debajo del menú escribimos “icons

Si fuera necesario, nos desplazamos por el mapa o hacemos zoom para que aparezcan los iconos.

Ahora hacemos clic con el botón derecho en cualquier icono y volvemos a hacer clic en Open in new tab, esto nos abrirá una nueva pestaña del navegador con el icono de Google Maps elegido con los estilos por defecto.

Vamos a ver cómo es la url:

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow_v3-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v3-2-medium.png,assets/icons/poi/tactile/pinlet_v3-2-medium.png,assets/icons/poi/quantum/pinlet/historic_pinlet-2-medium.png&highlight=ff000000,ffffff,13b5c7,ffffff?scale=1
						
					

Vamos a empezar analizando la url por el final, la scale, es el tamaño del icono, por defecto Google Maps lo tiene en scale=1, pero es posible visualizar el icono en escalas 1, 2 3 y 4.

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow_v3-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v3-2-medium.png,assets/icons/poi/tactile/pinlet_v3-2-medium.png,assets/icons/poi/quantum/pinlet/historic_pinlet-2-medium.png&highlight=ff000000,ffffff,13b5c7,ffffff?scale=1
						
					

La segunda parte de la url con fffff se trata del relleno del icono, por defecto el color blanco, si probamos a cambiar los rellenos:

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow_v3-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v3-2-medium.png,assets/icons/poi/tactile/pinlet_v3-2-medium.png,assets/icons/poi/quantum/pinlet/historic_pinlet-2-medium.png&highlight=ff000000,ffffff,13b5c7,ffffff?scale=1
						
					

La tercera parte de la url es el color de fondo del icono de Google Maps:

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow_v3-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v3-2-medium.png,assets/icons/poi/tactile/pinlet_v3-2-medium.png,assets/icons/poi/quantum/pinlet/historic_pinlet-2-medium.png&highlight=ff000000,ffffff,13b5c7,ffffff?scale=1
						
					

La cuarta parte de la url con fffff se trata del borde del icono y el highlight es el realce.

Existen dos versiones de cada uno de los iconos de Google Maps, y os vamos a mostrar las diferencias:

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow_v3-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v3-2-medium.png,assets/icons/poi/tactile/pinlet_v3-2-medium.png,assets/icons/poi/quantum/pinlet/airport_pinlet-2-medium.png&highlight=ff000000,ffffff,10bdff,ffffff?scale=2

https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v2-1-small.png,assets/icons/poi/tactile/pinlet-2-medium.png,assets/icons/poi/quantum/pinlet/airport_pinlet-2-medium.png&highlight=ff000000,ffffff,10bdff,ffffff&color=ff000000?sale=2
						
					

Finalmente, el nombre del símbolo o slug estará identificado en el ultimo png de la url:

						
https://www.google.es/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v2-1-small.png,assets/icons/poi/tactile/pinlet-2-medium.png,assets/icons/poi/quantum/pinlet/airport_pinlet-2-medium.png&highlight=ff000000,ffffff,10bdff,ffffff&color=ff000000?scale=2
						
					

En el listado de arriba os hemos dejado todos los slugs para que podáis realizar fácilmente vuestras propias búsquedas.

Ahora vamos a analizar los colores que utiliza Google Maps para representar su simbología:

Food & Drink

El color hexadecimal #ff9e67 tiene valores RGB de R:255, G:158, B:103 y valores CMYK de C:0, M:0.38, Y:0.6, K:0. Su valor decimal es 16752231.

Shopping

El color hexadecimal #4b96f3 tiene valores RGB de R:75, G:150, B:243 y valores CMYK de C:0.69, M:0.38, Y:0, K:0.05. Su valor decimal es 4953843.

Health

El color hexadecimal #f88181 tiene valores RGB de R:248, G:129, B:129 y valores CMYK de C:0, M:0.48, Y:0.48, K:0.03. Su valor decimal es 16286081.

Entertainment/Leisure

El color hexadecimal #13b5c7 tiene valores RGB de R:19, G:181, B:199 y valores CMYK de C:0.9, M:0.09, Y:0, K:0.22. Su valor decimal es 1291719.

Services

El color hexadecimal #909ce1 tiene valores RGB de R:144, G:156, B:225 y valores CMYK de C:0.36, M:0.31, Y:0, K:0.12. Su valor decimal es 9477345.

Outdoor

El color hexadecimal #4db546 tiene valores RGB de R:77, G:181, B:70 y valores CMYK de C:0.57, M:0, Y:0.61, K:0.29. Su valor decimal es 5092678.

Civil Services

El color hexadecimal #7b9eb0 tiene valores RGB de R:123, G:158, B:176 y valores CMYK de C:0.3, M:0.1, Y:0, K:0.31. Su valor decimal es 8101552.

Worship

El color hexadecimal #7b9eb0 tiene valores RGB de R:123, G:158, B:176 y valores CMYK de C:0.3, M:0.1, Y:0, K:0.31. Su valor decimal es 8101552.

Transport

El color hexadecimal #10bdff tiene valores RGB de R:16, G:189, B:255 y valores CMYK de C:0.94, M:0.26, Y:0, K:0. Su valor decimal es 1097215.


A continuación, os dejamos una tabla en formato Google sheets con toda la información que hemos recabado sobre la simbología de Google Maps.

Además, podéis descargaros todos los iconos de Google Maps en formato png y categorizados en un fichero comprimido.

Y hasta aquí el recorrido por la espectacular simbología de Google Maps, esperamos que os sea de utilidad, para más información sobre estos 15 años de maps os recomendamos el blog de Google.

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm