12 Como poner UBICACIÓN en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql) FullStack

Duración: 6 min
Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 12 de 14

Descripción

🎬 Lección 12: Cómo Poner la UBICACIÓN en mi PÁGINA WEB 🗺️

¡Excelente! La Lección 12 finaliza la parte de presentación al usuario, integrando un mapa de Google Maps para mostrar la ubicación de la clínica de manera efectiva y accesible.

Integración del Mapa de Ubicación con Google Maps

Esta lección se enfoca en el método más rápido y sencillo para insertar un mapa interactivo de Google Maps directamente en la página web, asegurando que los visitantes puedan encontrar la clínica fácilmente.

Pasos para la Integración:

  1. Creación de la Sección:
    • Se crea una nueva sección con la clase CSS para ubicar el mapa. [00:50]
    • Se añade un contenedor (Container) y el título "Encuéntranos Aquí" centrado. [03:39]
  2. Obtención del Código de Inserción (Embed Code):
    • Se utiliza el servicio de Google Maps para buscar la ubicación deseada. [01:56]
    • A través de la opción "Compartir" (Compartir o incorporar mapa), se obtiene el código <iframe> necesario para incrustar el mapa. [03:10]
  3. Configuración y Responsividad:
    • El código <iframe> se pega dentro del Container.
    • Se modifica el atributo width dentro del <iframe> a 100% para asegurar que el mapa se adapte al ancho total del contenedor y sea completamente responsive. [04:29]

El mapa incrustado permite a los usuarios ampliar, reducir y obtener direcciones directamente desde la página, sin necesidad de código complejo.

Próximos Pasos: La siguiente lección se centrará en integrar el Formulario de Contacto para finalizar el contenido principal de la página.