Google画像にピンでマーカーを付けた画像を作成したい時に、GoogleAppsScriptを使って画像を作成します。
Contents
作成したGoogleマップの完成画像イメージ
完成イメージはこんな感じです。地図上にあるピンのマーカーは、「スカイツリー」「ビールの泡の形をしたビルがあるアサヒグループの本社ビル」「墨田区役所」「（浅草寺入り口の）風雷神門」「浅草寺」の5つあります。そして、めぐるエリアが分かる青い境界線を付けています。なんとなく、このあたりを散策すれば観光に便利かなという地図が作成できるようになっています。
Maps Serviceの公式ドキュメント
しっかり公式ドキュメントを見て理解してから作成したい方は公式ドキュメントを理解するのをお勧めします。私がみた公式ドキュメントは以下です。
Maps Service|Apps Script | Google for Developer
GoogleAppsScriptのコード
まずはnewStaticMap()のクラスを使ってインスタンス化を行います。マップのサイズ(setSize)、中心地(setCenter)、縮尺（setZoom）を指定します。マーカーはsetMakerStyleでサイズや色を指定して、マーカーを指定する場所を指定します。
// クラスを作成する。墨田区役所を中心に600x600のマップサイズを指定
const map = Maps.newStaticMap()
.setSize(600, 600)
.setCenter('墨田区役所')
.setZoom(15)
// 赤いマーカーを5つの場所に指定する
map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID, Maps.StaticMap.Color.RED, 'T');
map.addMarker('墨田区役所');
map.addMarker('アサヒグループ本社ビル');
map.addMarker('浅草寺 風雷神門');
map.addMarker('東京スカイツリー');
map.addMarker('浅草寺');
// 散策するおおよその範囲を境界線で指定する
const corners = [
'〒131-0045 東京都墨田区押上１丁目１−２',
'〒130-0001 東京都墨田区吾妻橋１丁目２３−１',
'〒111-0032 東京都台東区浅草２丁目３−１',
'35.711026, 139.796349' //風雷神門の住所がわからなかったので、経度と緯度を直接指定
];
map.setPathStyle(4, Maps.StaticMap.Color.BLACK, Maps.StaticMap.Color.BLUE);
map.beginPath();
for (var i = 0; i < corners.length; i++) {
map.addAddress(corners[i]);
}
境界線を指定する角をcornersに格納している中で、風雷神門の詳細な住所がぱっと見わからなかったので、近くの経度と緯度を指定しています。
最後に、設定が完了したGoogleマップをGoogleドライブ直下に保存します。問題なければ、map.pngというファイル名で保存できているはずです。
// Googleドライブ直下にマップ画像を作成する DriveApp.createFile(Utilities.newBlob(map.getMapImage(), 'image/png', 'map.png'))
また、本コードでGASを操作するにあたっては、権限の付与が必要です。GASエディターのメニュー「プロジェクトの設定」から「「appsscript.json」マニフェスト ファイルをエディタで表示する」にチェックボックスを入れたうえで、必要な権限のスコープを定義する必要があります。チェックボックスを入れたら、エディターに「appsscript.json」ができていると思いますので、以下を追加しましょう。
"oauthScopes": [ "https://www.googleapis.com/auth/documents", "https://www.googleapis.com/auth/drive" ]
もっといろいろ発展的に使えるGASのMaps Service
Maps Serviceのサービスを使って、ある地図上の2点間の距離を求めたりするなど活用方法が色々あります。GASはGoogle系サービスと相性が良いので、GASで作った2点間の距離を計算する関数をスプレッドシートのカスタム関数として使うことが出来たり、活用方法がたくさんありそうです。
