Como Insertar un Mapa de Google Maps en tu Web con HTML

hace 2 años · Actualizado hace 10 meses

Insertar Google Maps en WordPress es una forma sencilla y efectiva de mostrar la ubicación de tu negocio o evento en tu página web. Con solo unos pocos pasos, puedes agregar un mapa interactivo que permita a los visitantes navegar y obtener indicaciones precisas. No necesitas conocimientos avanzados de programación, solo sigue esta guía y estarás listo para comenzar!

En este artículo, aprenderás cómo insertar fácilmente un mapa de Google Maps en tu sitio web utilizando HTML. A lo largo de la lectura, encontrarás encabezados H2, tablas y listados que enriquecerán tu comprensión del tema.

Índice

Obtener el código de inserción de Google Maps
Agregar el código de inserción a tu archivo HTML
Personalizar el tamaño del mapa
Consideraciones adicionales

Obtener el código de inserción de Google Maps

El primer paso para insertar un mapa de Google Maps en tu sitio web es obtener el código de inserción. Sigue estos pasos:

Ve a google maps en tu navegador web.
Utiliza la barra de búsqueda para encontrar la ubicación que deseas mostrar en el mapa.
Una vez que encuentres la ubicación deseada, haz clic en el botón Compartir (ícono de la flecha) en la esquina inferior izquierda.

Como Insertar un Mapa de Google Maps en tu Web con HTML

En la ventana emergente, selecciona la pestaña Insertar un mapa.
Copia el código HTML proporcionado en el cuadro de texto. Además, puedes seleccionar el tamaño. Posteriormente pulsa en el link Copiar HTML.

Agregar el código de inserción a tu archivo HTML

Ahora que tienes el código de inserción, puedes agregarlo a tu archivo HTML donde deseas que aparezca el mapa. Simplemente pega el código copiado en la ubicación deseada dentro del archivo.

Por ejemplo, si deseas que el mapa aparezca después de un título y un párrafo, tu archivo HTML se vería así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi sitio web con un mapa de Google Maps</title>
</head>
<body>
    <h1>Mi ubicación en Google Maps</h1>
    <p>Esta es mi ubicación en Google Maps:</p>

<!-- Pega el código de inserción aquí -->

Si usas WordPress, debes añadir un nuevo bloque de código HTML donde añadirás el código:

Personalizar el tamaño del mapa

El mapa incrustado tendrá un tamaño predeterminado, pero puedes ajustarlo fácilmente modificando los atributos width (ancho) y height (alto) en el código de inserción. A continuación, se muestra un ejemplo de cómo cambiar el tamaño del mapa a 500 píxeles de ancho y 400 píxeles de alto:

<iframe src="https://www.google.com/maps/embed?..." width="500" height="400" ...></iframe>

Reemplaza los valores de width y height con las dimensiones que mejor se ajusten a tus necesidades.

Consideraciones adicionales

Además de cambiar el tamaño del mapa, también puedes personalizar otros aspectos de la apariencia y funcionalidad del mapa incrustado. Algunas de estas opciones incluyen:

Establecer el nivel de zoom: Puedes ajustar el nivel de zoom del mapa para mostrar más detalles o una vista más general del área. Para hacer esto, modifica el valor del parámetro "zoom" en la URL dentro del atributo "src" del código de inserción.
Activar o desactivar controles de mapa: Puedes decidir si deseas mostrar u ocultar ciertos controles de mapa, como los botones de zoom y la opción de cambiar a vista de satélite. Esto se logra utilizando la API de Google Maps, lo que requiere un poco más de conocimiento técnico.
Personalizar estilos de mapa: Con la API de Google Maps, también es posible aplicar estilos personalizados al mapa incrustado para adaptarlo al diseño y la estética de tu sitio web. Esto puede implicar cambiar colores, ocultar ciertos elementos del mapa, entre otras opciones.

Insertar un mapa de Google Maps en tu sitio web con HTML es un proceso fácil y eficiente que puede mejorar la experiencia de tus visitantes al proporcionar información geográfica relevante. Al seguir los pasos descritos en este artículo y explorar las opciones adicionales disponibles, podrás crear un mapa personalizado que se adapte perfectamente a tus necesidades y al diseño de tu página web.