マルティスープ
Staff Blog

// Google Maps APIキー const API_KEY = 'YOUR_API_KEY'

// マップの中心座標 const DEFALT_CENTER = { lng: 139.759548, lat: 35.692175 }

// マーカーAtlasファイルのパス const ICON_ATLAS = 'ATLAS_FILE_PATH'

// Atlasファイル上のマッピング情報 const ICON_MAPPING = { marker: {x: 0, y: 0, anchorY: 128, width: 128, height: 128, mask: true} }

// ツールチップ用リアクティブ変数 const state = reactive({ hovar: null })

...

/** * マップ読み込み完了時コールバック */ const $_loadEnd = () => {   /**    * GoogleMap初期化まで完了済み   * google = googleオブジェクト   * map = Mapオブジェクト   */

  // ツールチップ非表示処理   google.maps.event.addListener(map, 'bounds_changed', () => state.hovar = null)

   // GoogleMapsOverlayy生成   deck = new GoogleMapsOverlay({     ...option,     initialViewState: {       longitude: DEFALT_CENTER.lng,         latitude: DEFALT_CENTER.lat,       zoom: 12,       pitch: 0,       bearing: 0,     },   })

  // GoogleMapへオーバーレイ   deck.setMap(map)

   // マーカー表示レイヤー（`IconLayer`）生成    // data フォーマット    // [{ name: '東京都', coordinates: [139.69167, 35.68944] }...]   const layer = new IconLayer({     id: 'icon-layer',     pickable: true,     sizeScale: 10,     data,     iconAtlas: ICON_ATLAS,     iconMapping: ICON_MAPPING,     getIcon: d => 'marker',     getPosition: d => d.coordinates,     getSize: d => 5,     getColor: d => [...Array(3)].map(() =>       Math.floor(Math.random() * 256),     ),     onClick: d => {state.hovar = d},   })

   // レイヤーを追加   deck.setProps({layers: [layer]}) } ... </script>

<template>   <!-- マップ -->   <div id="map-base-google-id" class="map-base-google"/>    <!-- ツールチップ -->   <div     v-if="state.hovar"     class="tooltip"     v-bind:style="{left: `${state.hovar.x}px`, top: `${state.hovar.y}px`}"   >     {{state.hovar.object.name}}   </div> </template>

<style scoped> .map-base-google {   height: 100vh;   width: 100vw; } .tooltip {   position: absolute;   background: #5c5c5c;   color: #fff;   border-radius: 8px;   padding: 4px 8px; } </style>