COLOCAR MAPA DE GOOGLE

 COLOCAR MAPA DE GOOGLE

EL PASO A PASO

Paso 1: Cargar la Estructura Básica del HTML, “contactenos.html”

1. Abre en tu tu editor de texto (bloc de notas / vscode) el archivo contactenos.html
2. El lugar donde ira el mapa es dentro de la etiqueta <main> y justo antes de cerrar la etiqueta </main>, asi que ten en cuenta este detalle dentro de esta etiqueta debes preparar el espacio para albergar el mapa, asi que debes poner este div:

<!-- Contenedor para el mapa -->

<div class="ctns_map-container">

   <!—aquí dentro y justo debajo de esta linea debes pegar el codigo que obtendras en el paso siguiente -->

 

</div>

3. Recuerda que los estilos para el mapa van dentro de las etiquetas <style> y </style>

Paso 2: Obtener el Código del Mapa en Google Maps

1. Abre tu navegador web y ve a Google Maps.
2. En la barra de búsqueda, escribe: Corporación Colegio Trinitario, Cartagena. Asegúrate de que te muestre la ubicación correcta.
3. Acerca un poco la imagen con el zoom, y has un clic en la ubicación del colegio para que salga el icono de ubicación
4. Haz clic en el botón "Compartir" (Share).

5. Se abrirá una ventana. Elige la pestaña "Insertar un mapa" (Embed a map)
6. Verás un código que empieza con <iframe src=.... Haz clic en el botón "COPIAR HTML". ¡Ya tienes el código del mapa! No te preocupes por el tamaño que dice ahí (width/height), lo cambiaremos con CSS.

Paso 3: Insertar el Código del Mapa en tu HTML

1. Vuelve a abrir tu archivo contactenos.html en el editor de texto.
2. Busca el lugar donde te dije en el paso 1 de donde iria el mapa
3. Pega en ese lugar el código que copiaste de Google Maps

Paso 4: Aplicando los Estilos

1. En el lugar donde te dije que irian los estilos debes pegar el siguienrte codigo

/* --- Estilos Personalizados para el Mapa de Contacto --- */

 

.ctns_map-container {

  /* --- Control del Tamaño y Proporción --- */

  position: relative; /* Necesario para posicionar el iframe dentro */

  width: 90%;         /* Ancho relativo al contenedor padre (ej. main) */

  max-width: 750px;   /* Ancho máximo para que no sea demasiado grande en pantallas anchas */

  padding-bottom: 50%; /* Proporción Rectangular (alto = 50% del ancho). Puedes ajustar este % (ej: 60% para un rectángulo más alto, 75% para 4:3) */

  height: 0;          /* La altura se define por el padding-bottom */

  overflow: hidden;   /* Oculta cualquier parte del iframe que pudiera sobresalir */

 

  /* --- Centrado y Espaciado --- */

  margin: 30px auto;  /* Centrado horizontal (auto) y margen vertical (30px arriba/abajo) */

 

  /* --- Estilo Minimalista/Profesional --- */

  border: 1px solid #e0e0e0; /* Borde sutil y claro */

  border-radius: 6px;         /* Esquinas ligeramente redondeadas */

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); /* Sombra suave y discreta */

}

 

.ctns_map-container iframe {

  /* --- Posicionamiento del Iframe --- */

  position: absolute; /* Posición absoluta respecto al contenedor */

  top: 0;

  left: 0;

  width: 100%;  /* Ocupa todo el ancho del contenedor */

  height: 100%; /* Ocupa toda la altura del contenedor (definida por padding-bottom) */

  border: 0;    /* Asegura que el iframe no tenga borde propio */

}

 

/* --- Fin Estilos Mapa de Contacto --- */

 

Paso 5: ¡Probar la Página!

1. Guarda el archivo contactenos
2. Busca el archivo contactenos.html en tu explorador de archivos.
3. Haz doble clic sobre él (o clic derecho -> Abrir con -> tu navegador preferido).
4. ¡Deberías ver tu página web! Comprueba que:
• Aparece el título "Información de Contacto".
• Se ve el mapa de Google Maps centrado en la página.
• El mapa tiene forma rectangular.
• El mapa no ocupa toda la pantalla.
• Tiene un borde delgado, esquinas redondeadas y una pequeña sombra.
• Si cambias el tamaño de la ventana del navegador, el mapa se ajusta (es responsive).