Mostrar un mapa de Google en un modal Bootstrap

Visualizar la última posición de un vehículo o un activo es una funcionalidad clave en paneles de administración. En este tutorial, veremos cómo cargar dinámicamente un mapa de Google dentro de un modal de Bootstrap, pasando coordenadas mediante atributos data- de HTML5.

Estructura HTML (El Modal)

Utilizaremos un modal de Bootstrap estándar. Es importante definir una altura fija para el contenedor del mapa (#GMaps), de lo contrario, el mapa no se renderizará correctamente al abrirse.

<button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#modalGMaps" 
        data-lat="41.345947" 
        data-lng="2.149434" 
        data-camion="Camión 01" 
        data-time="14:30" 
        data-direction="N">
    Ver posición
</button>

<div class="modal fade" id="modalGMaps" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title">Localización camión: <strong id="GMapsDataCam"></strong></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="modalBodyGMaps">
                <div id="GMaps" style="height: 450px; width:100%;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>Lenguaje del código: HTML, XML (xml)

Lógica JavaScript (jQuery + Google Maps)

El secreto está en el evento show.bs.modal. Capturamos los datos del botón que disparó el evento y reinicializamos el mapa para asegurar que el centro sea correcto.

$('#modalGMaps').on('show.bs.modal', function(event) {
    const button    = $(event.relatedTarget);
    const lat       = parseFloat(button.data('lat'));
    const lng       = parseFloat(button.data('lng'));
    const camion    = button.data('camion');
    const time      = button.data('time');
    const direction = button.data('direction');
    
    const myLatLng  = { lat: lat, lng: lng };

    // Inicializar el mapa
    const map = new google.maps.Map(document.getElementById("GMaps"), {
        zoom: 15,
        center: myLatLng,
        mapTypeControl: false
    });

    // Añadir capa de tráfico en tiempo real
    const trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

    // Marcador personalizado (GPopup)
    // Aquí puedes personalizar el icono según la dirección (N, S, E, O)
    $('#GMapsDataCam').text(camion + ' - Última posición: ' + time);
});Lenguaje del código: JavaScript (javascript)

1. Librerías y Recursos

Para implementar esta solución de geolocalización, nos apoyamos en herramientas robustas de la comunidad:

• Plugin de Geolocalización (PHP/JS): Puedes encontrar la lógica de cálculo de áreas y posiciones en el repositorio de GeoLocation en GitHub.
• Google Maps API: La documentación oficial para gestionar marcadores y capas de tráfico está disponible en Google Cloud Console.

2. Demos Interactivas (JSFiddle)

He preparado varias versiones del código para que puedas probar la integración del mapa en el modal según tus necesidades:

• Ver Demo 1.
• Ver Demo 2.
• Ver Demo 3.

3. Coordenadas de Ejemplo (Ruta de prueba)

Si quieres probar la precisión del plugin, aquí tienes una lista de coordenadas reales (LAT/LNG) que forman una ruta lógica:

• Punto de Inicio: 41.345947, 2.149434.
• Puntos de Seguimiento: * 41.345659, 2.148954.
  • 41.343916, 2.147819.
  • 41.346954, 2.150173.
• Punto Final: 41.345947, 2.149434.