Function captureStaticMapImage

静的地図をキャプチャして <img> 要素として取得する — 詳細な使用例

現在の地図表示を静止画（HTMLImageElement）としてキャプチャします。 スクリーンショット機能・印刷・共有に利用できます。 DOM 要素（マーカー・InfoWindow など）も含めたい場合は captureStaticMapElement を使います。

Warning

• captureStaticMapImage は <img> 要素のみを返します。DOM オブジェクトは含まれません。
• captureStaticMapElement はマーカー等を含む <div> 要素を返しますが、処理が重くなる場合があります。
• キャプチャは非同期なので await または .then() で受け取ってください。
• CORS 制約のある画像リソースを地図に重ねている場合はキャプチャに失敗することがあります。

Example: 地図をキャプチャして `<img>` として表示する

import * as GIA from '@ntj/gaia';

const imgEl = await map.captureStaticMapImage({
  output: {
    image: {
      mimeType: 'image/png',
      quality: 0.9,
    },
  },
});
document.getElementById('preview')!.appendChild(imgEl);
Copy

Example: マーカー等のDOM要素も含めてキャプチャする

import * as GIA from '@ntj/gaia';

const divEl = await map.captureStaticMapElement({
  timeout: 10_000,
});
document.getElementById('preview')!.appendChild(divEl);
Copy

Example: 指定地点・ズームで静的地図をキャプチャする

import * as GIA from '@ntj/gaia';

const shibuya = new GIA.value.LatLng(35.658034, 139.701636);

const image = await map.captureStaticMapImage({
  centerLocation: shibuya,
  zoomLevel: 16,
  output: {
    image: {
      mimeType: 'image/jpeg',
      quality: 0.8,
    },
  },
});

document.getElementById('preview')!.appendChild(image);
Copy

See

• captureStaticMapImage
• captureStaticMapElement