【GAS】GoogleAppsScriptで地図を扱うTips【GoogleMap】

概要

Googleのサービスでは、特にGoogleMapを頻繁に使う。GASでもGoogleMapを利用することができるので、地図を描写したり、画像として使うための操作をメモがてら紹介。

参考
【Maps Service 公式リファレンス】

続編あり
GoogleAppsScriptで地図に線や円を描写する
GoogleAppsScriptで2点間のルートと道中の標高を表示

地図を作成

まずは基本形。無から地図オブジェクトを生み出すメソッドMaps.newStaticMap();に、中心位置やサイズ、縮尺などのステータスを追加して地図を作成する。

var map = Maps.newStaticMap()
              .setLanguage('ja')
              .setSize(250,250)
              .setZoom(15)
              .setCenter(35.684035700289, 139.7745919723237);

.setLanguage()：言語を指定。日本語なら「ja」。
.setSize()：地図のサイズ。1000×1000が最大。
.setZoom()：地図の縮尺。1～21で数字が大きいほど寄る。
.setCenter()：地図の中心。

上記のコードだと、こんな地図になる。

ちなみに.setCenter()はGoogleMapの検索結果をもとにしているので、緯度経度でなく住所やランドマークでもOK。上記の場合日本橋を中心にしているので.setCenter('東京都中央区日本橋室町１丁目８−１')や.setCenter('日本橋麒麟像')でも同じような結果になる。

地図にマーカーを追加する

作成した地図データに.addMarker()でマーカーを追加できる。

var map = Maps.newStaticMap()
              .setLanguage('ja')
              .setSize(250,250)
              .setZoom(15)
              .setCenter(35.684035700289, 139.7745919723237)
              .addMarker(35.684035700289, 139.7745919723237);

中心と同じ位置にマーカーを指してるが、もちろん別の場所も指定可能。中心の設定と同じく、住所やランドマークでも設定できる。

こんな風に.addMarker()の後付けもOK！同じ結果になる。

var map = Maps.newStaticMap()
              .setLanguage('ja')
              .setSize(250,250)
              .setZoom(15)
              .setCenter(35.684035700289, 139.7745919723237);

map.addMarker(35.684035700289, 139.7745919723237);

別々に追加したり、一気に追加したり。

map.addMarker(35.684035700289, 139.7745919723237);

map.addMarker(35.687110871398, 139.7732810636109)
   .addMarker(35.681878545635, 139.7716198826273)
   .addMarker(35.680605074855, 139.7770018267006);

画角から外れても、エラーにはならず見切れるだけ。

マーカーに続き番号を付ける

.addMarker()する前に.setMarkerStyle()でマーカーのスタイルを設定できる。ここではマーカーに番号を付ける事にだけ触れるが、同じメソッドでサイズや色も指定できる。

書き方はこんな感じ。

map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID, Maps.StaticMap.Color.RED, 1);
map.addMarker(35.684035700289, 139.7745919723237);

マーカーに「1」と番号が付いた。

for文なんかで繰り返し番号を付けることもできる。ただ、MarkerSize.MIDだと数字を２桁表示できないので、マーカーが多い場合はA～Zがオススメ。

for(var i=1; i<=3; i++){
  var str = String.fromCharCode(64+i);
  map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID, Maps.StaticMap.Color.RED, str);
  map.addMarker('日本橋' + i + '-1-1');
}

繰り返しながら「日本橋1-1-1」にA、「日本橋2-1-1」にB、「日本橋3-1-1」にCをそれぞれプロットした結果。

CharaCode(65)が「A」なので +1 することで B,C,D... と進められる。

他にも地図メソッドはあるけど目的が変わるだけで書き方は似ているので、あとはリファレンス見ながら応用するだけ。

地図をスプレッドシートに描写

いくつかある画像の描写方法で、スプレッドシートに描写するのが一番シンプル。

var map = Maps.newStaticMap()
              .setLanguage('ja')
              .setSize(250,250)
              .setZoom(15)
              .setCenter(35.684035700289, 139.7745919723237)
              .addMarker(35.684035700289, 139.7745919723237);

var sheet = SpreadsheetApp.getActiveSheet();
sheet.insertImage(map, 1, 1);

地図オブジェクトと開始位置を指定するだけ。

簡単^^

ただスプレッドシートに描写すると、地図を画像データとして取得するのが面倒。できないわけではないけど、一旦スプレッドシートをHTMLとかエクセルとしてダウンロードする作業が必要。

そのまま画像として使いたい場合はこの後。

地図をメールに添付

地図の用途は色々あるかと思うけど、GASで描写するのでGmailとの連携が出来たら便利そう。とりあえず描写した地図画像を添付した下書きを作ってみる。

先ほどのスプレッドシートへの描写と違い、地図オブジェクトを一度画像に変換する。

var image = map.getBlob().getAs('image/png').setName('map.png');

GmailApp.createDraft(
        '[e-mail]',//宛先
        'test',//件名
        'test',//本文
        {attachments: [image]}
        );

地図オブジェクトの作成部分はこれまでと同じなので省略。作成したmapを、形式と名前を指定して.getBlob()する。あとはBlobを添付してメール下書きを作成する。

出来た^^)b

地図をドライブに保存

もちろんドライブに保存することもできる。

var image = map.getBlob().getAs('image/png').setName('map.png');

var folder = DriveApp.getFolderById('xxxxxxxxxx');
folder.createFile(image);

メールに添付するときと同じくBlobして、ドライブのフォルダを指定してファイルを作成している。

おしまい