Google Maps: Modificando su apariencia


En un post anterior titulado los “Primeros pasos para utilizar la API de Google Maps” expliqué como incluir el js, crear un mapa y agregar marcadores, ahora veremos de que forma podemos cambiar la apariencia a nuestro mapa, es decir, colores, elementos, tipo de terreno, etc.

Google Maps tiene una herramienta llamada Styled Map Wizard que nos muestra visualmente las propiedades del mapa y de esta forma podemos modificar de manera sencilla su vista inicial.

Cuando entras a Styled Map Wizard te desplegará una pantalla como la siguiente:

De lado izquierdo tendrás las propiedades que puedes aplicar a tu mapa y de lado derecho el listado de opciones que ya has seleccionado, la pantalla central cierrala.

A continuación veremos paso a paso como personalizar nuestro mapa.

  1. Sitúate en el país, estado, ciudad o cualquier lugar de tu mapa, para mi ejemplo seleccionaré México 😀
  2. En la primer opción se encuentra “Feature type”, que significa que recursos podrán desplegarse en tu mapa: escuelas, hospitales, autopistas, etc.
  3. “Element type”, indica el subconjunto de recursos que pueden aplicarse al mapa, en caso de tener habilitadas las etiquetas por Estado deberás seleccionar labels->text
  4. En la sección de Stylers tienes la posibilidad de modificar el color, saturación, luz, gama de colores, etc; realiza los cambios que tu desees
  5. Una vez que tu mapa está listo de acuerdo a tus preferencias, de lado derecho en la parte inferior encontrarás un botón que dice “Show json”, esos datos que se despliegan lo usaremos a continuación.

Vamos a crear un mapa tal cual lo expliqué en el post “Primeros pasos…”, necesitamos una función que será llamada cuando cargue el <body>, la llamaré initialize(); en ella pegarás el json que generaste con la herramienta de Google, debes tener algo similar a lo siguiente:

Después asignaremos el estilo al mapa con la siguiente línea:

Lo siguiente es posicionarnos en las coordenadas.

Y para concluir, indicamos en que <div> mostraremos el mapa (1), después asignamos el estilo con la llamada mapType.set (2) y por último el ID (3).

Por lo que nuestro código completo se debe ver similar al siguiente:

Cualquier duda y/o sugerencia puedes dejarme un comentario, hasta un siguiente post 🙂

Anuncios

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el noviembre 14, 2012 en Básicos, Mi Espacio, Programación y etiquetado en , . Guarda el enlace permanente. 4 comentarios.

  1. Personalmente he trabajado con google maps y no a sido de mi total gusto.Es facil asignarle eventos a los markers pero si quieres asignarle eventos a un polyline o a un poligono cargadi de un archivo kml es un cristo.Los mapas de Open Street maps me parecen bien bonitos y es facil integrarlo con el api de google.
    Pero personalmente ando conociendo http://mapbox.com/ que es lo que utiliza foursquare y es una buena opcion para los que deseen trabajar con mapas. 😀
    Lo que mas me gusto de google maps fue poder trabajarlo con google fusion tables layer.Mira estas fuentes de inspiración:http://googlemapsmania.blogspot.com/

  2. hey estaba buscando alguna api de mapas que no fuera la de google por lo del cobro, porque hace unos dias encontre este tutorail de socket.io utilizando geolocalizacion http://tympanus.net/codrops/2012/10/11/real-time-geolocation-service-with-node-js/, pero como siempre entro a ver tus post me encuentro con este interesante tutorial de google map y este comentario de santiblanco me parece bastante bien para tomarlo en cuenta, gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: