この記事は Google の Solutions Architect である Ken Nevarez による Google Maps Platform Blog の記事 "How to build your first Google Maps Platform integration with deck.gl " を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。   deck.gl  を連携する方法を説明します。まず、シンプルな「Hello, World!」スタイルの紹介から始めます。次に、実際のデータを使って、基本的な視覚化の手順を説明します。それができれば、視覚化に使用することができる完全な定型コードを得ることができます。
Hello, world!
 
deck.gl を使用した最も単純なマップの視覚化を見てみましょう。スターター プロジェクト をダウンロードしてください。/src ディレクトリにあります。 主なファイルは hello-world.html です。このファイルには、Maps JavaScript API をインポートするコードと、それを使用して初期化し、基本的なスタイルをマップに適用するコードが含まれています。 
 $ python -m SimpleHTTPServer 8000hello-world.html の上部にある script タグ内の YOUR_API_KEY  を実際に作成された API キーに置き換えます。API キーの生成方法については、こちらの動画 をご覧ください。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>
  http://localhost:8000/hello-world.html
 
deck.gl の基本的な視覚機能の追加
 
Google マップは、単独でも魅力的ですが、実世界のユースケースに即したデータ可視化の準備ができているとは言い切れません。そこで、基本となる deck.gl 視覚化を追加しましょう。Scatterplot Layer です。
<head> セクションに次の script タグを追加して、deck.gl ライブラリのパッケージ化されていないバージョンをアプリに含めます。
  <head>
   <title>Google Maps and deck.gl - Hello, World!</title>
   <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>
   ...
</head>
 
index.html のメイン script で、マップがすでに初期化され、データポイントが定義されていることがわかります。  <script type="text/javascript">
   const nyc = { lat: 40.75097, lng: -73.98765 };
   const map = new google.maps.Map(document.getElementById('map'), {
       center: nyc,
       zoom: 14,
       disableDefaultUI: true, // de-clutters the UI
       zoomControl: true, // brings back zoom controls
       styles: mapStyle // use map styles from /styles/map_styles.js
   });
</script>
 
script タグの上部にある deck.gl から GoogleMapsOverlay と ScatterplotLayer オブジェクトをインポートします。  <script type="text/javascript">
   const { GoogleMapsOverlay, ScatterplotLayer } = deck;
   ...
</script>
 
GoogleMapsOverlay を初期化し、deck.gl の ScatterplotLayer レイヤーのインスタンスを同じスクリプトの下部に渡します。「レイヤー(Layer)」は deck.gl のコアコンセプトで、データを取得してレイヤーの外観と動作を定義する一連のプロパティに基づいて地図上にレンダリングする視覚化タイプを作成します。  ...   
   const deckOverlay = new GoogleMapsOverlay({
       layers: [
           new ScatterplotLayer({
               id: 'scatterplot',
               data: [{ position: [nyc.lng, nyc.lat, 0], }],
               getRadius: 20,
               getFillColor: [255, 133, 27]
           })
       ]
   });
   deckOverlay.setMap(map);
 
プロパティ のドキュメントをご覧ください。
単一のデータポイントを持つ散布図レイヤー  
データソースの追加
 
BigQuery の公開データセットの 1 つからさらにデータを追加して、より意味のある散布図を作成してみましょう。BigQuery を初めて使用する場合は、このガイド を参照して初期設定します。パブリック データセットをクエリする方法の一例を参照してください。BigQuery クエリ エディター で次のクエリを実行します。
  SELECT
               longitude,
               latitude,
               name,
               capacity
           FROM
               `bigquery-public-data.new_york_citibike.citibike_stations`
 
SAVE RESULTS をクリックし、JSON (local file) を選択してデータを作業ディレクトリに保存します。この例では、ファイルに  stations.json という名前をつけました。getPosition、getFillColor、getRadius はデータアクセサです。データに到達する方法をレイヤーに伝え、視覚化のさまざまな属性をレンダリングする方法を決定するために使用する値を抽出します。ScatterPlot Layer の場合、これらのアクセサを使用して各データポイントの場所、サイズ、色を決定できますが、必ずしもデータに基づいてレンダリングを決定する必要はありません。
  const deckOverlay = new GoogleMapsOverlay({
       layers: [
           new ScatterplotLayer({
               id: 'scatterplot',
               data: './stations.json',
               getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
               getFillColor: d => [255, 133, 27],
               getRadius: d => parseInt(d.capacity),
           })
       ]
   });
 
完成した散布図レイヤー  
scatterplot.html のコードを参照して、このチュートリアルの完成コードを確認してください。こちら をご覧ください。ご質問やご意見はページ右上の「お問い合わせ」より承っております。丸山 智康 (Tomoyasu Maruyama) - Google Maps テクニカル アカウントマネージャ