Scribd
Cargar
17 vistas8 páginas

Agregar Mapa Google Map Control

El documento proporciona instrucciones detalladas para integrar Google Maps en un proyecto CRUD desarrollado en ASP.NET con VB.NET. Incluye pasos para crear una cuenta en Google Cloud, obtener una API Key, y el código necesario para inicializar y mostrar el mapa en la página Alumno.aspx. Al finalizar, se puede visualizar el mapa con la ubicación especificada en un navegador web.

Cargado por

Dali Escalante
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
17 vistas8 páginas

Agregar Mapa Google Map Control

El documento proporciona instrucciones detalladas para integrar Google Maps en un proyecto CRUD desarrollado en ASP.NET con VB.NET. Incluye pasos para crear una cuenta en Google Cloud, obtener una API Key, y el código necesario para inicializar y mostrar el mapa en la página Alumno.aspx. Al finalizar, se puede visualizar el mapa con la ubicación especificada en un navegador web.

Cargado por

Dali Escalante
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Índice

Abrí el proyecto CRUD que desarrollamos en la actividad 7, el cual gestiona los datos de
Alumnos, Maestros y Directivos utilizando ASP.NET con VB.NET. .................................... 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 ASP.NET en la página Alumno.aspx .............. 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 ASP.NET
con VB.NET.

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 ASP.NET en la


página Alumno.aspx
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 google.maps.Map(document.getElementById('map'), {...});: Crea una
nueva instancia del mapa, configurándolo con el nivel de zoom y el centro especificado por
latLng.
• var marker = new google.maps.Marker({...});: 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.
• document.addEventListener('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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> :
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.

También podría gustarte