Google Maps: inserción de un mapa personalizado

Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.

[kml_flashembed movie=”http://www.youtube.com/v/fBgUB_t0Hq8″ width=”560″ height=”315″ wmode=”transparent” /]

Transcripción:

Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un mapa personalizado de Google Maps en una página web.

En el vídeo anterior “Google Maps: inserción de un mapa”, te expliqué cómo insertar un mapa sencillo en una página web.

En este vídeo te voy a explicar cómo insertar un mapa personalizado, es decir, un mapa en el que se muestra información de nuestro interés.

Se puede mostrar texto, imágenes, vídeos.

Muy importante, lo que te voy a mostrar a continuación puede ser que sólo funcione si la página está publicada en Internet o en un servidor web propio. Con una página local puede ser que no funcione correctamente.

El acceso a la herramienta de creación de mapas personalizados lo podemos hacer de diferentes formas. Por ejemplo, [PULSAR] podemos acceder a través de esta URL.

O también podemos, en Google Maps, pulsar en el cuadro de búsqueda y se desplegará la opción de “Mis mapas”.

Vamos a crear un mapa personalizado.

En Google Maps, para que aparezca la opción de “Mis mapas” tengo que estar dentro de mi cuenta de usuario de Google, ya que mis mapas se asocian, se almacenan en mi cuenta. Si no estoy dentro de mi cuenta pues no aparecerá la opción.

Una vez que esté ya registrado, puedo acceder a “Mis mapas” y puedo crear un mapa nuevo.

Se abre una nueva pestaña en la que se mostrará un mapa de Google Maps pero con una serie de opciones para personalizar el mapa.

En primer lugar puedo cambiarle el nombre al mapa y ponerle por ejemplo “Mapa de prueba para iDESWEB”. Le puedo poner una descripción si quiero.

A continuación puedo empezar a dibujar el mapa, por ejemplo, me voy a situar sobre la Universidad de Alicante y voy a buscar el edificio en el que se encuentra mi despacho y voy a situar un marcador, las chinchetas que aparecen sobre los mapas en Google Maps. Por ejemplo, la voy a situar aquí y le puedo poner un nombre, “Mi despacho”, le puedo poner también una descripción y lo guardo.

Ya tengo un marcador en mi mapa personalizado, que aquí puedo editar sus características. Puedo cambiar el color, por ejemplo, o puedo cambiar el icono y podría buscar un icono más apropiado. Por ejemplo, podría poner un ordenador.

A continuación voy a buscar otro elemento. Por ejemplo aquí este comedor, este restaurante y le voy a poner otro marcador. Y voy a editar otra vez el icono y como es un restaurante le voy a poner este icono. Y ya lo tenemos ahí. Y ahora por ejemplo voy a buscar otro restaurante en la Universidad de Alicante, este bar, y le voy a colocar otro icono más. Y le vuelvo a cambiar el icono.

Y ya tenemos aquí un mapa personalizado en el que se muestran tres marcadores que yo he definido.

Podemos dibujar más cosas, por ejemplo podemos dibujar líneas. Voy a añadir una línea que es la ruta desde mi despacho hasta el restaurante. Este es el camino que suelo realizar para ir a comerme un bocadillo. “Camino al restaurante”. Guardo.

Otra vez aquí si quiero puedo editar algunas propiedades, por ejemplo el ancho. Y puedo cambiar pues también el color. Y voy a dibujar otra línea más, ya la última, al otro restaurante.

Pulso aquí, añadir línea. Y este es el camino que me conduce. Y a este también le voy a cambiar el ancho y le voy a poner otro color.

Muy bien, ya tenemos nuestro mapa. Y ahora yo lo quiero publicar en una página web. Para ello en primer lugar tengo que compartirlo. Le doy a esta opción de aquí, compartir. Con esto puedo indicar si quiero que el mapa sea privado, solamente compartirlo con una serie de usuarios que yo introduzco. O puedo cambiarlo y que el mapa sea público en la Web, de forma que cualquier persona pueda acceder. Lo cambio a “Público en la Web” y ahora ya a este mapa puede acceder cualquier persona.

¿Cómo lo comparto? ¿Cómo obtengo el código necesario para insertarlo en mi página web?

Necesito un fragmento de código HTML para insertarlo en mi página web. Esto me lo proporciona el propio Google Maps. Vengo a esta opción de aquí, tengo una serie de opciones, un menú. Y le doy a “Insertar en mi sitio”. Pulso y se me proporciona un fragmento de código HTML que debo de pegar en mi página web. Lo copio y ahora me voy a una página de ejemplo que tengo realizada y lo pego. Evidentemente no tengo que cambiar nada de este código HTML. Bueno, podría cambiar aquí la anchura y la altura para que el mapa fuera más o menos grande.

Lo guardo, lo ejecuto. Y, se está cargando, mi mapa, que ya puedo pues utilizar. Y aquí aparecen las descripciones que yo he etiquetado en mi mapa. Y lo puedo usar como cualquier otro mapa de Google Maps.

Interesante, ¿verdad?

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.