Sur l'API Google Maps, chargez l'infowindow uniquement après un clic

Aug 17 2020

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 infoWindowa 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

JoãoPimentelFerreira Aug 24 2020 at 19:31

J'ai trouvé la solution. J'ai dû mettre le htmlInfoContentdans 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))
}