はじめに
チーム開発でGoogleMapsAPIを利用することになったのでざっと調べてみました。
GoogleMapsAPIとは
Google Mapの機能をウェブサイトやアプリに埋め込むことができます。GoogleMapsAPIの機能にはいくつか種類があります。
機能一覧
【Web API】
JavaScript API…Google Maps をウェブサイトに表示することができます。
Static Maps API…地図画像を高解像度で表示します。
Street View Image API…ストリートビュー画像を高解像度で表示します。
【Web Service API】
Directions API... 最適化された経路検索を自動で行うことが可能です。
Distance Matrix API...複数の始点・終点の組み合わせルートの「距離」「時間」を求められます。
Roads API ...道路に沿ったスムーズなパスを取得します、また制限速度情報を返します。
Geolocation API...GPS 機能が無い環境でユーザーの位置情報を特定します。
Places API... 施設検索の API、一億件以上の詳細情報を検索・表示できます。
Geocording API... 住所を緯度・経度（または緯度経度を住所）に変換します。
Elevation API... ある地点の標高（高さ）を取得します。
Time Zone API ...ある地点のタイムゾーン（時間帯）を取得します。
GCPの登録とAPIキー
GoogleMapsAPIを利用するためにはGCPに登録してAPIキーを作らないといけません。そのAPI キーをHTMLのコードに張り付けることで利用できるようになります。具体的なやり方は他の記事を参考にしてください。
ちなみに、支払い情報を登録せずにAPIを利用するとマップ画面が変な感じになるので、登録しておくとよいです。学習に使うくらいならおそらく無料利用枠を超えることはあまりないはずです。（多分…）
MapsJavaScriptAPIのHTML
試しに一番使われていそうなMapsJavaScriptAPIのドキュメントにあったサンプルコードを見ると
【サンプルHTML】
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
どうやらスクリプトタグ内の
key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg"
の部分に発行したAPIキーを張り付けるみたいです。
＜div＞タグの中のmapというID属性を使っていろいろできそうです。
サンプルCSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
このスタイルでhightなどを指定しないと画面に何も表示されなかった。
【サンプルJavaScript】
let map;
async function initMap() {
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
initMap();
centerとzoomの入力は必須項目のようです。centerでマップの中心地の座標が入力されています。zoomは地図を表示する範囲です。
Googleドキュメントのページでは、同じサンプルコードでどんな感じにできるか確かめられるので、環境構築して試すのがめんどくさい方はそちらで試してみてください。
まとめ
学習の最中でまだまだ分からないことがありますが、なんとなく触ってみて「こんな感じか～」というのがつかめたので、四苦八苦しながらサービスに組み込んでいきたい。