es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo visualizar una imagen en una ventana modal para cada marcador en un mapa de la API de Google Maps.

Tengo varios marcadores en el mapa y al hacer clic en cada marcador se muestra una ventana de información con datos específicos para ese marcador. Además, habría una etiqueta de anclaje para abrir una ventana emergente modal en la que colocaría una imagen para ese marcador.

Mi controlador:

public function welcomePage() {
    $problems = Problem::with('problemImages')->get();

return view('welcomePage')
        ->with('problems', $problems)


}

Mi welcomePage.blade.php:

var map;
function initAutocomplete() {
    const centerMap = {lat: 48.3767994, lng: 17.5835082};
    map = new google.maps.Map(document.getElementById('map'), {
        center: centerMap,
        zoom: 11,
        mapTypeId: 'roadmap'
    });
    displayMarkers();
}

function displayMarkers() {
    @foreach($problems as $problem)
         var loc = split(" {{ $problem->location }}");
         createMarker(getLocVar(loc[0], loc[1]), map, "{{$problem->id}}");
    @endforeach
}

function createMarker(location, map, id) {
    let marker = new google.maps.Marker({
                position: location,
                animation: google.maps.Animation.DROP,
                map: map,
            });

let infoWindow = new google.maps.InfoWindow({
     content: "<p><b>ID: </b>" + id + "</p>"
     + "<a data-target='#myModal' data-toggle='modal'>Mostrar imagen</a>"
});

marker.addListener('click', function () {
     infoWindow.open(map, marker);
});


}

function split(str) {
    return str.split(",");
}

function getLocVar(lat, lng) {
    return new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
}

Cada $problem tiene un campo de imagen al que puedo acceder como $problem->problemImages[0][‘nombre_del_archivo’]. Todas las imágenes se almacenan en la carpeta de almacenamiento que tiene un enlace simbólico al directorio public. Una solución sería pasar el id del problema a la llamada ajax y con el controlador devolver el nombre de la imagen para ese problema que podría cargar en el modal. Pero no puedo resolverlo por mi cuenta. Como puedes ver, estoy tratando de aprender javascript y php en Laravel, así que cualquier ayuda sería muy apreciada. Disculpe también mi inglés. Si tienes alguna pregunta, puedo proporcionarte información más detallada.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai

    Una solución para su problema sería utilizar AJAX para hacer una llamada a su controlador y pasar el $problem->id como parámetro. Su controlador puede entonces devolver el nombre de la imagen asociada con ese $problem->id. Luego puede utilizar el nombre de la imagen devuelta para cargar la imagen en el modal.

    Por ejemplo, puede utilizar la siguiente llamada AJAX para hacer la solicitud a su controlador:

    javascript
    $.ajax({
    url: '/controlador/método',
    type: 'GET',
    data: {
    problem_id: $problem->id
    },
    success: function(data) {
    // Utilice el nombre de imagen devuelto para cargar la imagen en el modal
    }
    });

Comments are closed.