Google Maps API पर, क्लिक के बाद ही infowindow लोड करें

Question

मेरे पास कई सैकड़ों गूगल मैप्स मार्कर हैं जिनकी जानकारी एक डेटाबेस ( allDbEntries.length) से प्राप्त होती है , जो प्रत्येक मार्कर से जुड़ा होता है, infowindowजो एक मार्कर पर क्लिक करने के बाद खुलता है। प्रत्येक infoWindowमें एक या अधिक छवि के URL हैं 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
  })
}

समस्या यह है कि मैं इसका उपयोग मोबाइल एप्लिकेशन (एंड्रॉइड) या यहां तक ​​कि मोबाइल ब्राउज़रों के लिए भी कर रहा हूं, और हर बार जब नक्शा लोड होता है, तो सैकड़ों छवियां स्वचालित रूप से मोबाइल डिवाइस की बैंडविड्थ का उपभोग करती हैं।

मैं htmlInfoContentउस मार्कर पर क्लिक करने के बाद ही किसी मार्कर में (विशेष रूप से छवियों) की सामग्री को कैसे लोड कर सकता हूं ?

जैसा कि आप देव टूल्स से देख सकते हैं, हर बार जब मैं नक्शा खोलता हूं, तो सभी छवियां बहुत अधिक बैंडविड्थ की खपत करती हैं

Answer 1

समाधान मिल गया। मुझे htmlInfoContentएक ऐरे में रखना था , और मुझे एक गुमनाम सेल्फ-इनवोकिंग फंक्शन का उपयोग करना था, जो उस फ़ंक्शन को लौटाता था जो क्लिक करने वाले हैंडलर के साथ काम करता है। इस तरह से html सामग्री मार्कर पर क्लिक करने के बाद ही सेट की जाती है।

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))
}