Ajouter Kaleidr AI à une carte Google

Nécessite une clé publishable avec le scope ai sur un forfait Pro ou supérieur. L’ origin de votre page doit figurer dans l’allowlist de la clé et être servi en HTTP(S) — consultez Obtenir une clé API.

<div id="mapHost" style="height:520px;position:relative">
  <div id="map" style="position:absolute;inset:0"></div>
  <div id="chat" style="position:absolute;inset:0;z-index:1;pointer-events:none"></div>
</div>

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&callback=initMap&loading=async&v=weekly" async></script>
<script>
  function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 51.5, lng: -0.12 },
      zoom: 11,
    });
    Kaleidr.mount('#chat', {
      product: 'chat',
      publishableKey: 'kld_pk_live_…',
      map,
      contained: true,     // dock inside #chat, not on document.body
    });
  }
</script>

Le bundle chat détecte automatiquement Google Maps et affiche les lieux résolus sous forme de marqueurs Google. La facturation utilise le scope ai. Votre clé Google Maps et votre clé Kaleidr sont distinctes — Google facture les map tiles, Kaleidr facture l’AI.