Na API do Google Maps, carregue a janela de informações somente após clicar
Tenho várias centenas de marcadores do Google Maps cujas informações são obtidas de um banco de dados ( allDbEntries.length
), cada marcador associado a um infowindowque se abre depois que o usuário clica em um marcador. Cada infoWindow
um tem um ou mais URLs de imagem em seu 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
})
}
O problema é que estou usando isso para um APP móvel (Android) ou mesmo para navegadores móveis, e cada vez que o mapa é carregado, centenas de imagens são carregadas automaticamente consumindo a largura de banda do dispositivo móvel.
Como posso carregar o conteúdo de htmlInfoContent
(principalmente imagens) em um marcador apenas depois de clicar nesse marcador?
Como você pode ver nas Ferramentas de Desenvolvimento, toda vez que abro o mapa, todas as imagens são carregadas, consumindo muita largura de banda

Respostas
Encontrei a solução. Tive que colocar o htmlInfoContent
em uma matriz e usar uma função de auto-invocação anônima que retornou a função que lida com o manipulador de eventos de clique. Desta forma, o conteúdo html só é definido depois que o marcador é clicado.
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))
}