Di Google Maps API, muat jendela arus hanya setelah diklik
Saya memiliki beberapa ratus penanda Google Maps yang infonya diambil dari database ( allDbEntries.length
), setiap penanda yang terkait dengan infowindowyang terbuka setelah pengguna mengklik penanda. Masing-masing infoWindow
memiliki satu atau lebih URL gambar di dalamnya 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
})
}
Masalahnya adalah saya menggunakan ini untuk aplikasi seluler (Android) atau bahkan untuk peramban seluler, dan setiap kali peta dimuat, ratusan gambar dimuat secara otomatis menghabiskan bandwidth perangkat seluler.
Bagaimana saya bisa memuat konten htmlInfoContent
(terutama gambar) di penanda hanya setelah mengklik penanda itu?
Seperti yang Anda lihat dari Dev Tools, setiap kali saya membuka peta, semua gambar yang dimuat memakan terlalu banyak bandwidth

Jawaban
Menemukan solusinya. Saya harus meletakkan htmlInfoContent
in sebuah array, dan saya harus menggunakan fungsi pemanggilan otomatis anonim yang mengembalikan fungsi yang berhubungan dengan event handler klik. Dengan cara ini konten html hanya disetel setelah penanda diklik.
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))
}