Kaleidr AI를 Google 지도에 연결

Pro 이상에서 ai scope를 가진 publishable key가 필요합니다. 페이지의 origin은 key allowlist에 포함되어 있어야 하며 HTTP(S)로 제공되어야 합니다 — 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>

chat bundle은 Google Maps를 자동 감지하고 확인된 장소를 Google marker로 표시합니다. ai scope로 과금됩니다. Google Maps key와 Kaleidr key는 별개입니다 — Google은 map tile에, Kaleidr는 AI에 과금합니다.