Índice
Abrí el proyecto CRUD que desarrollamos en la actividad 7, el cual gestiona los datos de
Alumnos, Maestros y Directivos utilizando [Link] con [Link]. .................................... 3
. ............................................................................................................................................................ 3
. ............................................................................................................................................................ 3
Instrucciones para Agregar un Control de Google Maps.............................................................. 3
Paso 1: Crear una cuenta en Google Cloud Platform y obtener una API Key....................................... 3
Paso 2: Integrar Google Maps en el proyecto CRUD [Link] en la página [Link] .............. 5
Explicación del Código para Integrar Google Maps ..................................................................... 6
Inicialización de Google Maps.................................................................................................... 6
3. Inclusión del Script de Google Maps ....................................................................................... 7
. ............................................................................................................................................................ 7
4. Estilos CSS ............................................................................................................................. 7
Paso Final: Ejecución y Visualización del Mapa ........................................................................... 8
Abrí el proyecto CRUD que desarrollamos en la actividad 7, el cual
gestiona los datos de Alumnos, Maestros y Directivos utilizando [Link]
con [Link].
Instrucciones para Agregar un Control de Google Maps
Paso 1: Crear una cuenta en Google Cloud Platform y obtener una API Key
• Vamos a la Consola de Google Cloud.
• Abro mi proyecto anteriormente realizado
• Navego a la sección de APIs & Services y habilito la API de JavaScript de Google
Maps.
• Creo la credencial y obtengo la API Key.
Paso 2: Integrar Google Maps en el proyecto CRUD [Link] en la
página [Link]
Explicación del Código para Integrar Google Maps
• Estructura HTML
• <div class="card mt-4">: Crea un contenedor con la clase card para darle un estilo específico
y añade un margen superior.
• <div class="card-body">: Dentro del contenedor, card-body proporciona un área con
padding para el contenido.
• <h2 class="text-center">: Un título centrado que indica la sección del mapa.
• <div id="map" style="height: 400px; width: 100%;"></div> : Este es el contenedor donde
se mostrará el mapa. Se define un alto de 400 píxeles y un ancho del 100% del
contenedor padre.
Inicialización de Google Maps
• function initMap(): Esta función se encarga de inicializar el mapa de Google Maps.
• var latLng = { lat: 20.0973, lng: -98.7592 };: Define las coordenadas de la ubicación a
mostrar en el mapa.
• var map = new [Link]([Link]('map'), {...});: Crea una
nueva instancia del mapa, configurándolo con el nivel de zoom y el centro especificado por
latLng.
• var marker = new [Link]({...});: Añade un marcador en la posición definida
por latLng y lo vincula al mapa. También establece un título que se mostrará al pasar el cursor
sobre el marcador.
• [Link]('DOMContentLoaded', function () { initMap(); });:
Asegura que la función initMap se ejecute cuando el contenido de la página esté
completamente cargado.
3. Inclusión del Script de Google Maps
• <script async defer
src="[Link] :
Este script carga la API de JavaScript de Google Maps. La clave de API
(YOUR_API_KEY) debe ser reemplazada con tu propia clave.
• async defer: Estos atributos aseguran que el script se cargue de manera asíncrona y que
se ejecute una vez que el resto del documento esté cargado.
• callback=initMap: Indica que la función initMap debe ejecutarse una vez que la API de
Google Maps esté completamente cargada.
4. Estilos CSS
• .card: Aplica un margen superior, un borde, un radio de borde redondeado y una
sombra al contenedor del mapa.
• .card-body: Define el padding interno del contenedor del mapa.
• #map: Establece la altura y el ancho del contenedor del mapa para que se ajuste
correctamente dentro de su contenedor padre.
Paso Final: Ejecución y Visualización del Mapa
Después de seguir todos los pasos anteriores, simplemente abrimos nuestro archivo HTML en un
navegador web. Al cargar la página, se ejecutará la función de inicialización del mapa y podremos
ver el mapa de Google Maps mostrando la ubicación especificada, en este caso, la Universidad
Politécnica de Pachuca.
¡Y eso es todo! Hemos integrado con éxito un control de Google Maps en nuestra página web. Ahora
el mapa debería mostrarse correctamente y con el marcador en la ubicación que especificamos.
