Cómo crear un mapa personalizado en Google Maps

En esta entrada te explico como hacer un mapa personalizado en Google Maps, de forma que puedas mostrar a quien desees la ubicación de un determinado lugar o realizar indicaciones sobre como llegar a él.

Por ejemplo, puedes indicarle a tus amigos donde se encuentra la nueva casa que acabas de comprarte haciendo un mapa de Google Maps y enviándoselo por correo electrónico. También puedes explicar a tus clientes como llegar a tu negocio creando un mapa de Google Maps y publicándolo en la página web de tu empresa. Para ambas cosas es necesario que realices los siguientes pasos:

01 Ve a la página web de Google Maps: http://maps.google.com

02 Pincha sobre el botón “Mis sitios” (en la parte superior izquierda). Si no has iniciado sesión en tu cuenta de Google, se te pedirá que inicies sesión para poder crear y compartir los mapas que desees. Si no tienes cuenta de Google, tendrás que crearte una antes de poder hacer mapas personalizados en Google Maps. Si lo necesitas, puedes leer esta entrada sobre Cómo crear una cuenta de correo electrónico de Gmail

03 Pincha sobre el botón rojo “Crear mapa” que aparece justo debajo del botón “Mis sitios” una vez que hayas iniciado sesión en tu cuenta de Google.

04 Introduce el título, la descripción y las opciones de privacidad del mapa que vas a crear. A modo de ejemplo, voy a hacer un mapa para indicar como ir de la Puerta del Sol al jardín del Retiro en Madrid pasando por la calle Alcalá. Para ello introduzco el siguiente título y descripción:

crear-mapa-google-maps-1

05 Crea el mapa utilizando los iconos para creación de marcas y líneas que aparecen en la esquina superior izquierda del mapa.

crear-mapa-google-maps-2

Cómo añadir marcas al mapa de Google Maps

Con el segundo de los iconos que aparecen en la imagen anterior puedes ir poniendo marcas sobre el mapa de Google Maps para señalizar los lugares que desees. Para cada una de las marcas que pongas puedes escribir un título, una descripción y modificar su icono asociado.

crear-mapa-google-maps-3

Para modificar el icono asociado a una marca, tienes que pinchar sobre la imagen en miniatura que aparece a la derecha del título en la imagen anterior. Tras pinchar en dicha imagen en miniatura, te aparecerá una pantalla en la que puedes seleccionar el icono que deseas para tu marca. Te recomiendo que vayas experimentando con los diferentes tipos de iconos que puedes incluir. Además, puedes añadir un icono propio pinchando en el enlace de “Añadir un icono” e introduciendo la URL donde tienes subido dicho icono.
crear-mapa-google-maps-4

Cómo añadir recorridos al mapa de Google Maps

Con el tercero de los iconos que vimos anteriormente puedes ir dibujando un recorrido sobre el mapa de Google Maps para realizar las indicaciones que desees. Para dibujar el recorrido simplemente debes ir pinchando en los diferentes puntos del mapa por los que quieres que vaya pasando el recorrido y para terminarlo debes pinchar justo encima del último punto situado. Una vez que tengas el recorrido dibujado, puedes añadirle un título, una descripción y modificar el estilo de la línea usada simplemente con pinchar en cualquier parte del mismo.

crear-mapa-google-maps-5

Para modificar el estilo de la línea usada, tienes que pinchar sobre la imagen en miniatura que aparece a la derecha del título en la imagen anterior. Tras pinchar en dicha imagen en miniatura, te aparecerá una pantalla en la que puedes seleccionar tanto el color como el ancho y la opacidad de la línea que desees utilizar para tu recorrido.

crear-mapa-google-maps-6

Cómo añadir áreas al mapa de Google Maps

Con el tercero de los iconos que vimos anteriormente también puedes dibujar un área sobre el mapa de Google Maps para resaltar la zona que desees. Para dibujar el área simplemente debes ir pinchando en diferentes puntos del contorno de la zona que quieres abarcar y para terminarla debes pinchar justo encima del primer punto situado. Una vez que tengas el área dibujada, puedes añadirle un título, una descripción y modificar el estilo de la forma usada simplemente con pinchar en cualquier parte de la misma.

crear-mapa-google-maps-7

Para modificar el estilo de la forma usada, tienes que pinchar sobre la imagen en miniatura que aparece a la derecha del título en la imagen anterior. Tras pinchar en dicha imagen en miniatura, te aparecerá una pantalla en la que puedes seleccionar tanto el color como el ancho y la opacidad de las líneas y rellenos que desees utilizar para tu área.

crear-mapa-google-maps-8

Para terminar, te muestro como me ha quedado el mapa que he realizado a modo de ejemplo para indicar como ir de la Puerta del Sol al jardín del Retiro en Madrid paseando por la calle Alcalá:

crear-mapa-google-maps-9

06 Guarda el mapa pinchando primeramente en el botón de “Guardar” que tenemos en la parte superior izquierda y posteriormente en el botón de “Listo” que aparece justo al lado. Una vez guardado, el mapa queda almacenado en tu cuenta de Google y puedes modificarlo las veces que quieras pinchando en el botón “Mis sitios” y posteriormente en el botón “Mapas”.

07 Además, puedes enviar el mapa por correo electrónico a tus amigos o publicarlo en la página web de tu empresa.

08 Por último, quiero aclarar que lo que hemos realizado en esta entrada es lo máximo que podemos hacer de forma sencilla con los mapas de Google Maps. Si quieres realizar mapas más avanzados, dotar de mayor interactividad a estos mapas o desarrollar aplicaciones basadas en los mapas de Google, es necesario recurrir a lenguajes de programación y trabajar con la API de Google Maps.

2 pensamientos en “Cómo crear un mapa personalizado en Google Maps

  1. Ivan

    Hola Jose, muy bueno tu blog. Te cuento que estoy aprendiendo HTML y me gustaría poder insertar en una pagina web un mapa personalizado creado en google maps de la forma como lo describes en tu blog. El tema es que hasta ahora los únicos ejemplos que he encontrado son en base a insertar un mapa normal (en base a las coordenadas), como en el ejemplo adjunto que va dentro de un archivo .js :

    var ubicacion = new google.maps.LatLng(-33.806378,-70.8636145,9);

    No se si me podrías orientar a como sería si el mapa fuera creado en google maps en lugar de las coordenadas de un mapa normal
    Muchas gracias
    Saludos
    Ivan

    Responder
    1. Jose Ramón de Elpregunton.es Autor

      Hola Iván,

      En primer lugar comentarte que la interfaz de Google Maps ha sido renovada hace poco por lo que determinadas opciones que se explican en el tutorial no se encuentren exactamente en el mismo lugar que donde se encontraban antes. Pero bueno, al fin y al cabo las opciones que tenemos disponibles son las mismas o incluso más y lo único que tenemos que hacer es adaptarnos al nuevo aspecto. 😉

      Creo que en tu caso te estás confundiendo entre dos opciones diferentes que existen a la hora de crear un mapa personalizado con Google Maps.

      Opción 1 – La primera opción es hacer un mapa sencillo en Google Maps de la forma que explico en el tutorial, bien sea para compartirlo con tus amigos, para incorporarlo a tu web o simplemente para uso personal. Para esto no se necesitan conocimientos de programación y puedes crear el mapa aquí: https://mapsengine.google.com/map/

      Puedes hacer de elementos como marcas, líneas, polígonos, indicaciones, e incluso medir distancias y áreas. Cuando lo tengas terminado solamente tienes que pinchar sobre el símbolo de la carpeta que hay debajo del nombre del mapa, después sobre la opción “Insertar en mi sitio” y te aparecerá un código HTML que es el que tienes que pegar en el código HTML de tu web para incrustar el mapa tal y como lo estoy incrustando yo a continuación:

      Opción 2 – Y la segunda opción bien distinta (que creo que es la que estás intentando hacer tu) es hacer mapas avanzados en Google Maps haciendo uso de la API de desarrollador de Google Maps que puedes encontrar aqui:
      https://developers.google.com/maps/documentation/javascript/?hl=es

      Si despliegas en el menú de la izquierda la opción “Guía para desarrolladores” encontrarás un tutorial para empezar a desarrollar mapas usando la API de desarrollador de Google Maps. Si despliegas la opción “Ejemplos de código” encontrarás diferentes mapas de ejemplo junto con el código Javascript necesario para generar cada uno.

      Pero vamos, que por lo que comentas, creo que en tu caso con hacer el mapa como te explico en la opción 1 te sería suficiente. Espero que te sirva mi respuesta!

      Un saludo!

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *