Usted está aquí
Inicio > CAD > Usemos Google Maps, pero hagámoslo con estilo…

Usemos Google Maps, pero hagámoslo con estilo…

Veamos, éste es el mapa normal de Google Maps que uno usaría normalmente para presentar la localización de su empresa y mostrar información de contacto en su página web:

[iframe src=”https://maps.google.es/maps?f=q&source=s_q&hl=es&geocode=&q=collado+villalba&aq=&sll=40.524724,-3.816153&sspn=3.014542,5.817261&ie=UTF8&hq=&hnear=Collado+Villalba,+Madrid,+Comunidad+de+Madrid&ll=40.627256,-4.008587&spn=0.188265,0.363579&t=m&z=12&output=embed” width=”480″ height=”320″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”]
Ni nos hemos molestado en editar nada de nada del código. Vamos a ver qué podemos hacer con él, que en una página tan oscura no nos gusta cómo queda…

Cuando iniciamos sesión en Google, sea para lo que sea, iniciamos sesión en todas las aplicaciones de la empresa, incluida Google Maps. Si entramos y esperamos unos segundos, en el menú que se despliega de la casilla de la dirección, se puede ver una fila nueva que dice, “Mis mapas”:

mis_mapas

Si hacemos clic en dicha casilla, se abrirá un nuevo menú con nuestros mapas; eso sí, si ya tenemos alguno, con la opción siempre de crear uno nuevo:

Captura de pantalla 2014-11-05 21.22.00

Si hacemos clic en “Crear”, iremos a nuestra página de edición de Google Maps Engine V3 (nueva):

Captura de pantalla 2014-11-05 21.24.27

En la que podremos elegir entre varios mapas de base, algunos pueden ser interesantes. Este mapa base usa sólo colores azules y no tiene la mayoría de las calles:

google_map_blue

Bueno, pues hasta hace poco estos eran los únicos mapas de base entre los que uno podía elegir si quería tener algo diferente al resto. Aunque con lo limitado de la elección, las diferencias no iban a ser demasiadas…

Pero resulta que en Google se deben de haber dado cuenta de que hacía falta darle algo más de estilo a sus mapas, porque han creado esto:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Que como se puede ver (cuando se abra, claro) es una página para darle estilo a los mapas de Google (sólo). En esta página podemos cambiar cualquier característica gráfica de cualquier tipo de dato de cualquier capa para los mapas de Google Earth. Ale, por posibilidades que no sea…

Captura de pantalla 2014-11-05 21.42.25

Lo anterior es un ejemplo de agua rosa, tierra amarilla y las carreteras azules y diez veces más gruesas de lo normal. Feo, pero muestra alguna de las posibilidades que tiene.

Aquí hay una página con ocho muestras diferentes del mismo mapa:

http://maps-api-tt.appspot.com/apilite/styled/styled.html

Vamos, que se puede hacer casi cualquier cosa. Y si el editor de más arriba no gusta, aquí hay más páginas que han hecho el suyo propio para que la gente entre y lo use (gratis o casi):

http://www.mapstylr.com/

http://www.evoluted.net/thinktank/web-design/custom-google-maps-style-tool

http://software.stadtwerk.org/google_maps_colorizr/

Ahora veamos un ejemplo con todo en blanco, grises y negro, que es como nos gusta porque nos trae recuerdos, ya que es el de nuestra web, que es bastante más oscura que ésta:

[iframe src=”https://mapsengine.google.com/13759934339118219705-16071188762309719429-4/mapview/?authuser=0″ width=”480″ height=”320″]

Siempre es Google Maps, aquí sólo cambia de colores. Pero se le pueden añadir y quitar cosas, se puede hacer de todo (o casi). Ahora ya se puede insertar información de contacto que resulte útil que haga juego con el estilo de nuestra página web.

Si alguien quiere más información al respecto, puede ver la Guía para desarrolladores de Google Maps Api aquí:

Mapas con estilos

Página en la que se comprueba que ya está la versión 3, y que la dos murió, fue horrible:

Versión 3 del API de JavaScript de Google Maps

Y otro blog (en inglés) con muchísimos ejemplos, algunos de los cuales tienen más ejemplos aún:

http://www.tripwiremagazine.com/2013/05/jquery-google-maps.html

En fin, como decíamos al principio; usemos Google Maps, pero hagámoslo con estilo. Aunque sólo sea del de la hoja CSS de estilo de nuestra página web, pero al menos será a “nuestra manera”.

Generamos grandes cantidades de datos, hagamos buen uso de ellos…

Deja un comentario

Top