Mostrar mapa de Google Maps dentro de Google Sheets con rutas

por | Jul 19, 2023 | Blog, Google Spreadsheets

Mapas con Sheets

Muchas veces tenemos coordenadas o direcciones en nuestra hoja de cálculo, y nos gustaría verlas representadas en el mapa. Tal vez nos iremos de vacaciones o tenemos información logística sobre algunos puntos, y no queremos tener que estar copiando y pegando en Google Maps solo para verlas. Pues bien, hoy aprenderemos a crear un panel dentro de nuestra hoja que mostrará un mapa con la información de los puntos geográficos que queramos, ya sea una sola ubicación o una ruta con direcciones.

Preparando nuestros datos

Primero, como siempre, vamos a crear nuestra hoja con varias direcciones disponibles en formato adecuado para luego trabajar los datos. Nuestro primer objetivo será mostrar cualquiera de estos puntos en el mapa, por ejemplo, el que elijamos seleccionando una celda. Después, mostraremos todos los puntos en el orden en el que se ven como una ruta secuencial.

Mostrar direcciones con un mapa de Google Maps incrustado en una página

Entonces, vamos a intentar mostrar un punto en un mapa de Google Maps. Para lograr esto, necesitamos usar el panel lateral e incrustar ahí el código HTML de un mapa. Si queremos hacerlo de la forma oficial, Google nos dice que requerimos crear una API key e inscribirnos en Google Cloud Platform, pero hay un método no oficial que nos permite simplemente usar los mapas libremente sin API key si codificamos las direcciones dentro de una URL de una forma particular. Este método es el que usaremos para nuestro ejemplo.

Este código que te muestro aquí corresponde al código HTML necesario para incrustar un mapa en cualquier página web.

<iframe
  width="290"
  height="500"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://maps.google.com/maps?q=DIRECCION&saddr=DIRECCION_INICIO&daddr=DIRECCION_DESTINO+to:DIRECCION_DESTINO_ADICIONAL+to:DIRECCION_DESTINO_ADICIONAL&t=h&output=embed"
  allowfullscreen>
</iframe>
Lenguaje del código: HTML, XML (xml)

Fíjate especialmente en la URL que usaremos como fuente del iframe. Tiene algunos parámetros que debemos explicar: https://maps.google.com/maps?q=DIRECCION&saddr=DIRECCION_INICIO&daddr=DIRECCION_DESTINO+to:DIRECCION_DESTINO_ADICIONAL+to:DIRECCION_DESTINO_ADICIONAL&t=h&output=embed

  • q es la dirección principal a mostrar. Este parámetro es obligatorio.
  • output indica qué tipo de salida debe regresar Google Maps. Para nuestro caso el valor siempre será embed . Este parámetro también es obligatorio.
  • saddr es la dirección inicial si vamos a pintar una ruta. Este parámetro y los siguientes son opcionales.
  • daddr es la direccón de destino si vamos a pintar una ruta.
  • +to: solo lo usamos si tenemos más destinos para pintar en la ruta, y deben estar dentro del parámetro daddr
  • t indica qué tipo de mapa queremos. Las opciones que se pueden usar son: m para mapa normal o h para híbrido (osea normal con vista de terreno al mismo tiempo).

Hay más parámetros disponibles, pero la realidad es que no están muy bien documentados para este método. Aquí puedes encontrar algo más de información al respecto.

Tal vez te preguntes ¿por qué nos estamos complicando? Si vamos al sitio oficial de Google Maps es muy fácil obtener un código para incrustar el mapa, pero eso supone ingresar las direcciones manualmente y nosotros lo que queremos es hacerlo programáticamente a partir de cualquier valor de nuestra hoja de cálculo. Sigamos entonces 😉

Mostrar un mapa de Google Maps dentro de Google Sheets

Bien, ahora que ya entendimos la parte del embed con un iframe de Google Maps, pasemos a crear la funcionalidad que permite mostrar ese código con una dirección de nuestra hoja de cálculo.

Lo que haremos será tomar el valor de una celda seleccionada y pasarle esa información al código de Apps Script para que muestre un mapa con la misma en el panel lateral derecho.

Entonces, vamos al menú Extensiones – Apps Script y reemplazamos el código inicial por este otro:

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("Mapas")
  .addItem("Mostrar mapa de dirección seleccionada", "mostrar_panel_seleccionada")
  .addItem("Mostrar mapa de ruta", "mostrar_panel_ruta")
  .addToUi();
}

function mostrar_panel_seleccionada() {
  var direccion = SpreadsheetApp.getActiveSheet().getCurrentCell().getValue();

  var direcciones = Array();
  if(direccion != "") {
    direcciones.push(direccion);
  }

  var html = embed_mapa_html(direcciones);

  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html).setTitle("Mapa"));
}

function mostrar_panel_ruta() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var fila_inicial = 2; // Fila 2
  var columna = 1; // Columna A
  var ultima_fila = sheet.getLastRow() - 1;
  var range = sheet.getRange(fila_inicial, columna, ultima_fila);

  // Se regresan como Array() entonces hay que sacarlos para solo tener los valores de string
  var direcciones = range.getValues().map(([dir]) => (dir));

  var html = embed_mapa_html(direcciones);

  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html).setTitle("Mapa"));
}

function embed_mapa_html(direcciones) {
  // Codificamos las direcciones para el formato de URL
  direcciones = direcciones.map(dir => (encodeURIComponent(dir)));
  
  var parametros_url = "";

  // Para un solo punto
  if(direcciones.length === 1) {
    parametros_url = `q=${direcciones[0]}`;
  } else if(direcciones.length > 1) {
    // Para dos puntos, mostrar la ruta entre ambos
    parametros_url = `q=${direcciones[0]}&saddr=${direcciones[0]}&daddr=${direcciones[1]}`;
    // Para más de dos, mostrar los siguientes con +to:
    if (direcciones.length > 2) {
      direcciones.forEach((direccion, index) => {
        parametros_url += index > 1 ? `+to:${direccion}` : '';
      });
    }
  }

  var embed_url = `https://maps.google.com/maps?${parametros_url}&t=h&output=embed`;

  var html = `
  <!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <iframe
      width="290"
      height="500"
      frameborder="0" style="border:0"
      referrerpolicy="no-referrer-when-downgrade"
      src="${embed_url}"
      allowfullscreen></iframe>
    </body>
  </html> 
  `;

  return html;
}
Lenguaje del código: JavaScript (javascript)

Se ve un poco largo, pero no te preocupes, en realidad es sencillo, vamos a explicarlo por partes. 😃

Primero tenemos, como siempre, la función onOpen, desde la cual creamos un menú para manejar las opciones que necesitamos: Mostrar la dirección seleccionada y Mostrar mapa de ruta, cada una asociada a su función correspondiente en el código.

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("Mapas")
  .addItem("Mostrar mapa de dirección seleccionada", "mostrar_panel_seleccionada")
  .addItem("Mostrar mapa de ruta", "mostrar_panel_ruta")
  .addToUi();
}
Lenguaje del código: JavaScript (javascript)

Comencemos por la funcionalidad de mostrar una dirección seleccionada en la hoja. En la función mostrar_panel_seleccionada(), primero obtenemos el valor de la celda que estemos enfocando explícitamente. Después, creamos un arreglo de direcciones e insertamos la dirección que obtuvimos de la hoja en el mismo. Ese arreglo se lo damos a la función embed_mapa_html, será la encargada de construir el código HTML del mapa. Por último abrimos el sidebar o panel lateral y le damos este código html para mostrar.

function mostrar_panel_seleccionada() {
  var direccion = SpreadsheetApp.getActiveSheet().getCurrentCell().getValue();

  var direcciones = Array();
  if(direccion != "") {
    direcciones.push(direccion);
  }

  var html = embed_mapa_html(direcciones);

  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html).setTitle("Mapa"));
}
Lenguaje del código: JavaScript (javascript)

Ahora vamos a analizar la función de embed_mapa_html. Lo que hacemos primero aquí es convertir el texto de las direcciones a un formato seguro para una URL con encodeURIComponent. Tal vez lo recordarás de cuando hemos tratado códigos QR, pues usan URLs y necesitan este tratamiento para que no entren caracteres no deseados. Luego vamos a construir la URL correcta que contiene los parámetros que Google Maps utilizará a partir de las direcciones que le pasemos. Si solo es una dirección como en el caso que estamos revisando, no hay más que usar el parámetro q con el primer elemento del arreglo. Si es más de una, agregamos los parámetros necesarios para convertir el mapa en una ruta. Ojo aquí, porque si son más de dos, las siguientes ubicaciones a mapear deben tener el formato de +to: .


function embed_mapa_html(direcciones) {
  // Codificamos las direcciones para el formato de URL
  direcciones = direcciones.map(dir => (encodeURIComponent(dir)));

  var parametros_url = "";

  // Para un solo punto
  if(direcciones.length === 1) {
    parametros_url = `q=${direcciones[0]}`;
  } else if(direcciones.length > 1) {
    // Para dos puntos, mostrar la ruta entre ambos
    parametros_url = `q=${direcciones[0]}&saddr=${direcciones[0]}&daddr=${direcciones[1]}`;
    // Para más de dos, mostrar los siguientes con +to:
    if (direcciones.length > 2) {
      direcciones.forEach((direccion, index) => {
        parametros_url += index > 1 ? `+to:${direccion}` : '';
      });
    }
  }

  var embed_url = `https://maps.google.com/maps?${parametros_url}&t=h&output=embed`;

  var html = `
  <!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <iframe
      width="290"
      height="500"
      frameborder="0" style="border:0"
      referrerpolicy="no-referrer-when-downgrade"
      src="${embed_url}"
      allowfullscreen></iframe>
    </body>
  </html> 
  `;

  return html;
}
Lenguaje del código: JavaScript (javascript)

Finalmente creamos esta URL con los parámetros listos como ya los habíamos explicado. Luego simplemente lo insertamos en el código HTML y nuestra función está lista.

Si guardamos nuestro código y ejecutamos la función onOpen desde aquí mismo, nos pedirá los permisos de siempre.

Los autorizamos y ejecutamos la función de nuevo. Eso debe hacer que aparezca nuestro menú personalizado en la hoja. Si usamos este menú con alguna ubicación que seleccionemos y la opción de Mostrar mapa de dirección seleccionada, debemos ver cómo se abre el panel lateral con el mapa listo para ver y manipular. ¿Genial, no? 😉

Mostrar un mapa con una ruta de Google Maps dentro de Google Sheets

Por último, vamos a revisar el segundo objetivo que teníamos, que nuestro código ya cubre. Con la función de mostrar_panel_ruta() lo único que nos queda por hacer es tomar las direcciones del rango que necesitemos. En este caso las direcciones aparecerán comenzando por la fila 2 y la columna A (osea la columna 1), y con la función getLastRow obtenemos la última con datos. Si tus direcciones están en otro rango, deberás ajustar esta parte del código como corresponda. Fíjate cómo estamos creando el mismo arreglo de direcciones y dándoselo a la misma función de antes, que ya prevee todos los casos que teníamos contemplados.

function mostrar_panel_ruta() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var fila_inicial = 2; // Fila 2
  var columna = 1; // Columna A
  var ultima_fila = sheet.getLastRow() - 1;
  var range = sheet.getRange(fila_inicial, columna, ultima_fila);

  // Se regresan como Array() entonces hay que sacarlos para solo tener los valores de string
  var direcciones = range.getValues().map(([dir]) => (dir));

  var html = embed_mapa_html(direcciones);

  // Mostramos el panel de la derecha e insertamos código HTML
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html).setTitle("Mapa"));
}
Lenguaje del código: JavaScript (javascript)

Vamos a demostrarlo usando la otra opción del menú que preparamos, que se llama Mostrar mapa de ruta.

Y como por arte de magia, vemos la ruta en nuestro panel lateral, sin tener que salir de la hoja de cálculo ni escribir las direcciones manualmente. Yo creo que esto puede ser muy útil para muchas situaciones. ¿Qué opinas? 😏

Limitaciones y consideraciones para incrustar un mapa

Ahora, este método sí tiene sus limitaciones. Por ejemplo, mapear más de aproximadamente 20 direcciones puede causar que el mapa deje de funcionar, porque la URL final se hará muy grande y Google Maps mismo no soporta rutas tan largas usando solamente el iframe. Como siempre, te recomiendo estudiar la documentación oficial si necesitas consultar más información.

¡Y listo! Ahora ya sabes cómo incrustar un mapa de Google Maps dentro de Google Sheets usando nada más que Apps Script y un poco de ingenio.

Plantilla terminada para descargar

Plantilla para Mostrar mapa de Google Maps dentro de Google Sheets con rutas

Guía en video

Si tienes dudas puedes ver esta misma guía explicada en video

¡Espero que te haya sido útil esta guía! No olvides seguirnos en YouTube para más tips, trucos y guías de productividad.

Aprende Sheets: Curso práctico de Hojas de cálculo de Google
Aprende Sheets: Curso práctico de Hojas de cálculo de Google

Deja un comentario