Sur l'API Google Maps, chargez l'infowindow uniquement après un clic
J'ai plusieurs centaines de marqueurs Google Maps dont les informations sont extraites d'une base de données ( allDbEntries.length
), chaque marqueur associé à un infowindowqui s'ouvre après que l'utilisateur clique sur un marqueur. Chacun infoWindow
a une ou plusieurs URL d'image dans son fichier htmlInfoContent
.
const map = new google.maps.Map(document.getElementById('map'), mapOptions)
// Add the markers and infowindows to the map
for (var i = 0; i < allDbEntries.length; i++) {
const el = allDbEntries[i]
const marker = new google.maps.Marker({
position: { lat: el.data_coord_latit, lng: el.data_coord_long },
map: map,
title: el.car_brand + ' ' + el.car_model
})
var htmlInfoContent = ''
for (var photoIndex = 1; photoIndex <= 4; photoIndex++) {
if (el['foto' + photoIndex]) {
const photoUrl = requestImageUrl + el['foto' + photoIndex]
htmlInfoContent += `<img width="200" src="${photoUrl}"><br>`
}
}
const infowindow = new google.maps.InfoWindow({
content: htmlInfoContent
})
marker.addListener('click', (e) => {
infowindow.open(map, marker)
return true
})
}
Le problème est que j'utilise cela pour une application mobile (Android) ou même pour des navigateurs mobiles, et chaque fois que la carte est chargée, des centaines d'images sont chargées automatiquement en consommant la bande passante de l'appareil mobile.
Comment puis-je charger le contenu htmlInfoContent
(en particulier des images) dans un marqueur uniquement après avoir cliqué sur ce marqueur?
Comme vous pouvez le voir dans les outils de développement, chaque fois que j'ouvre la carte, toutes les images sont chargées en consommant trop de bande passante
Réponses
J'ai trouvé la solution. J'ai dû mettre le htmlInfoContent
dans un tableau, et j'ai dû utiliser une fonction auto-appelante anonyme qui retournait la fonction qui traite du gestionnaire d'événements de clic. De cette façon, le contenu html n'est défini qu'après avoir cliqué sur le marqueur.
const map = new google.maps.Map(document.getElementById('map'), mapOptions)
const infowindow = new google.maps.InfoWindow()
var htmlInfoContent = []
// Add the markers and infowindows to the map
for (var i = 0; i < allDbEntries.length; i++) {
const el = allDbEntries[i]
const marker = new google.maps.Marker({
position: { lat: el.data_coord_latit, lng: el.data_coord_long },
map: map,
title: el.car_brand + ' ' + el.car_model
})
var htmlInfoContent[i] = ''
for (var photoIndex = 1; photoIndex <= 4; photoIndex++) {
if (el['foto' + photoIndex]) {
const photoUrl = requestImageUrl + el['foto' + photoIndex]
htmlInfoContent[i] += `<img width="200" src="${photoUrl}"><br>`
}
}
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(htmlInfoContent[i])
infowindow.open(map, marker)
}
})(marker, i))
}