Zenn
📹

WebGLを利用したGoogle Maps APIを実装してみた！

2023/01/27に公開
HTML
JavaScript
Google
WebGL
tech

WebGLを利用したGoogle Maps APIを実装してみた！

開発環境

当たり前ですが、ネットが繋がる環境じゃないと見れないので注意です。
特に、仮想環境は不要です。

主なバージョンや環境の確認

  1. HTMLファイル1つ
  2. JavaScriptファイル1つ
     

インストールをするもの、アカウントを作るもの

  1. Googleアカウントを作る必要があります。

 

  1. Google Maps APIを使用するには、APIキーを取得する必要があります。

 

その為にはGoogle Cloud Platform アクセスし設定する必要がありますが、

 

今回は技術紹介を行いたいので、下記の記事をご参考にしていただければと思います。

 

 

実装したコード

アカウントと設定ができたら、下記のMaps JavaScript API 概要を参考に

下記のように実装いたしました。

index.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            * {margin: 0; padding: 0;}
            html, body {
                overflow: hidden;
                height: 100%;
            }
            #map {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map" style="width:100%; height:800px"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"async></script>
        <script src="script.js"></script>
    </body>
</html>
script.js

// グローバル空間を汚染しないように、無名関数で全体を囲んでいます。
(() => {
    window.addEventListener('DOMContentLoaded', () => {
        initMap();
    }, false);
})();

// initMap
function initMap() {
    const myLatLng = { lat: 35.1715464484745, lng: 136.8815369 };
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 18,
        center: new google.maps.LatLng(myLatLng),
        heading: 150,
        tilt: 45,
        mapId: 'XXXXXXXXXXXXXXX',//ここは各自のGoogle Cloud Platformのマップ管理にMap IDの半角英数字のもの
        isFractionalZoomEnabled: true,
    });
    new google.maps.Marker({
        position: myLatLng,
        map,
        // title: "Hello World!",
    });
    new map.moveCamera({
        center: new google.maps.LatLng(myLatLng),
        zoom: 16,
        heading: 320,
        tilt: 47.5
    });

    const degreesPerSecond = 3;

    function animateCamera(time) {
      // Update the heading, leave everything else as-is.
      map.moveCamera({
          heading: (time / 1000) * degreesPerSecond
      });

      requestAnimationFrame(animateCamera);
    }

    // Start the animation.
    requestAnimationFrame(animateCamera);

    // Using map.set
    map.set('isFractionalZoomEnabled', true);

    // Using map.setOptions
    map.setOptions({isFractionalZoomEnabled: true});
}

 

  • 実装した結果

 

ポイントは

  1. myLatLngのところの経度は、名古屋駅にしてます。
script.js
    const myLatLng = { lat: 35.1715464484745, lng: 136.8815369 };

 

  1. headingを使ってカメラを回転させてます。
script.js

    function animateCamera(time) {
      map.moveCamera({
          heading: (time / 1000) * degreesPerSecond
      });
      requestAnimationFrame(animateCamera);
    }

その際、requestAnimationFrameは必須なのでご注意ください。
 

まとめ

今回は、公式のカンファレンスdevelopers-jp.googleblog.comから色々参照して
実装遊んでみましたが、めちゃ楽しかったです！
次回は、もっとスタイルを充実させて実装してみたいです！
 

参考記事URL

  • 【初心者向け】Google Maps APIの全体像を徹底解説！
  • これを見れば完璧！Google Maps API 取得方法をご紹介します。
  • WebGL を利用したマップ機能の一般提供を開始
  • Maps JavaScript API 概要
  • ベクター地図
  • WebGL オーバーレイ表示
  • WebGL オーバーレイ表示のサンプル

Discussion