Google Maps API の仕組み
Google Maps との API 連携について学んでいきましょう。
APIへのアクセス
それでは早速 Google Maps API にアクセスしていきましょう。
htdocs/maps_sample.php
<?php
// APIキーの設定
define('API_KEY', getenv('API_KEY'));
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#map_box {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="map_box"></div>
<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: "<?php echo API_KEY; ?>",
});
</script>
<script>
let map;
// async は非同期で実行される関数
async function initMap() {
// await は非同期処理が終わるまで待つ
// Map は Google Maps のクラス
const { Map } = await google.maps.importLibrary("maps");
let shinagawa = {
lat: 35.6284477,
lng: 139.7366322
};
// 表示領域の確保
let map_box = document.getElementById('map_box');
// Google Maps のマップオブジェクトを生成
map = new Map(
map_box, // 第１引数はマップ表示対象の要素。
{
// 第２引数で各種オプションを設定
center: shinagawa, // 地図の中心を品川に
zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
disableDefaultUI: true, // 各種UIをOFFに
zoomControl: true, // 拡大縮小だけできるように
clickableIcons: false, // クリック関連の機能をoffに。
mapId: 'DEMO_MAP_ID', // マップのIDを指定
}
);
}
initMap();
</script>
</body>
</html>
上記のサンプルを作成し、アクセスしてみましょう。
サーバの起動
以降のアプリケーションを利用するときには
API_KEY=APIキーの値 php -S 0.0.0.0:8080 -t ~/environment/htdocs
の形式で立ち上げましょう。
define('API_KEY', getenv('API_KEY')) ;
で定数 API_KEY が設定可能です。
「Preview Running Application」でプレビューURLを確認後、
プレビューURL/(htdocs以下のパス)
にアクセスしてください。
（事前に
API_KEY=APIキーの値 php -S 0.0.0.0:8080 -t ~/environment/htdocs
で php の開発サーバーを立ち上げておく必要があります）
プレビューURLは
https://(任意のid).vfs.cloud9.us-east-1.amazonaws.com/
の形式になっているため、htdocs 直下に maps_sample.php が配置されている場合、
https://(任意のid).vfs.cloud9.us-east-1.amazonaws.com/maps_sample.php
でアクセスできます。
画面上に品川駅周辺のマップが表示されればOKです。
マップ表示の仕組み
それでは、サンプルで利用したマップを表示させる仕組みを概観していきましょう。
表示領域の確保
最初に、マップを表示させる領域を確保しておきます。
<div id="map_box"></div>
さらに、表示領域の大きさを指定しておきましょう。
<style>
#map_box {
width: 800px;
height: 600px;
}
</style>
これで html 側の準備は終了です。
APIの読み込み
続いて Google Maps API を読み込みます。
Google Maps API の読み込みは script タグで行います。
読み込みには
<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: "<?php echo API_KEY; ?>",
});
</script>
これを埋め込めば OK です。
- API の URL にアクセス
- key に取得した API キーの値を設定
ということを行なっています。
今回のサンプルでは [取得したAPIキー] の箇所に、PHPを利用してキーの文字列を埋め込んでいます。
key: "<?php echo API_KEY; ?>",
マップの表示
最後に、マップの表示処理について解説します。
<script>
let map;
// async は非同期で実行される関数
async function initMap() {
// await は非同期処理が終わるまで待つ
// Map は Google Maps のクラス
const { Map } = await google.maps.importLibrary("maps");
let shinagawa = {
lat: 35.6284477,
lng: 139.7366322
};
// 表示領域の確保
let map_box = document.getElementById('map_box');
// Google Maps のマップオブジェクトを生成
map = new Map(
map_box, // 第１引数はマップ表示対象の要素。
{
// 第２引数で各種オプションを設定
center: shinagawa, // 地図の中心を品川に
zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
disableDefaultUI: true, // 各種UIをOFFに
zoomControl: true, // 拡大縮小だけできるように
clickableIcons: false, // クリック関連の機能をoffに。
mapId: 'DEMO_MAP_ID', // マップのIDを指定
}
);
}
initMap();
</script>
Map クラスの取得
最初に、Map クラスを取得しています。
// Map は Google Maps のクラス
const { Map } = await google.maps.importLibrary("maps");
await は非同期処理が終わるまで待つという意味です。
importLibrary は Google Maps API で提供されているライブラリを読み込むためのメソッドです。
ライブラリの読み込みが終わるまで待って、Map クラスを取得してから以降の処理が行われます。
品川の緯度経度の設定
続いて、品川の緯度と経度をオブジェクトにまとめておきます。
let shinagawa = {
lat: 35.6284477,
lng: 139.7366322
};
この情報は、マップの表示位置を指定するために使用します。
マップを表示させる要素の取得
続いて、マップの表示領域に設定したい div 要素を取得します。
let map_box = document.getElementById('map_box');
マップオブジェクトの生成
最後に Google Maps のマップオブジェクトを生成します。
// Google Maps のマップオブジェクトを生成
map = new Map(
map_box, // 第１引数はマップ表示対象の要素。
{
// 第２引数で各種オプションを設定
center: shinagawa, // 地図の中心を品川に
zoom: 15, // 拡大のレベルを15に。（1 - 18くらい）
disableDefaultUI: true, // 各種UIをOFFに
zoomControl: true, // 拡大縮小だけできるように
clickableIcons: false, // クリック関連の機能をoffに。
mapId: 'DEMO_MAP_ID', // マップのIDを指定
}
);
第一引数では、マップを表示させる要素を指定します。
第２引数はマップ表示のオプションをまとめたオブジェクトです。
- 地図の中心を品川にする
- ズームのレベルを15にする
- デフォルトのUIをオフにする
- 拡大縮小はできるようにする
- アイコンをクリックできないようにする
以上の設定をしておきます。
まとめ
以上で Google マップの基本の表示は完成です。
次のページから、マップ上に各種情報を表示する方法を学びましょう。
付録・API キーの取得
今回の研修以外で Google Maps API を利用するには、予め API キーの取得が必要です。
上記にアクセスして、まずは登録処理を行いましょう。
続いてプロジェクトを作成し API とサービスに移動します。
Google Maps JavaScript API を有効化したら、認証情報のリンクに移動し、「認証情報を作成」で API キーを発行します。
生成された API キーはどこかに保管しておきましょう。
参考： Google Maps Platform APIキーの取得・発行について
API キーのセキュリティ
Google Maps の API キーについてはセキュリティに気をつける必要があります。本格的な利用の場合には課金が必要になりますが、その際に盗まれて不正利用されるのを防ぐため、リファラー制限（利用できるウェブサイトの制限）などをかけておくことが必要になります。
学習の際にはローカルから利用するためこれらの制限は不必要ですが Web 上からアクセスできる状態にする際にはこれらの制限が必要であることを認識しておきましょう。