I'm trying to add a modal view for every picture in every Google Maps marker that is placed on the map. This is the JS code:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
Var img should contain a reference to the image, based on the id. But when I run this code the img variable is null.
This is my content variable for the infoView:
var infoContent =
'<div id="iw-container" class="gm-style-iw">'+
'<div class="iw-title">'+
'<p>{{place.name}}</p>'+
'</div>'+
// For each photo associated with this place, add it.
'<div class="container-fluid">'+
{% for photo in place.photo_set.all %}
'<div class="row">'+
'<div class="col-md-4">'+
'<hr>'+
'<div class="">'+
// Check whether the attributes have a value and display them.
{% if photo.info != "" and photo.info != None %}
'<p class="iw-info">{{ photo.info }}</p>'+
{% endif %}
{% if photo.year != "" and photo.year != None %}
'<p class="iw-year">{{ photo.year }}</p>'+
{% endif %}
{% if photo.source != "" and photo.source != None %}
'<p class="iw-source">Bron: {{ photo.source }}</p>'+
{% endif %}
'</div>'+
// Display the image with a link to the modal view.
'<div class="iw-image">'+
'<img id="myImg" class="iw-image" src="../static/images/{{ photo.image }}">'+
'</div>'+
'</div>'+
'</div>'+
{% endfor %}
'</div>'+
'</div>';
