はじめに
この記事は「Ateam LifeDesign Advent Calendar 2023」で完走賞を狙って25記事書いているうちの10日目の記事です。今年も完走目指して頑張るぞ！
今日はGASからGoogleマップを操作する方法についてみていきます。
GASからGoogleマップを操作する方法
MapsServiceを使うことでGoogleマップを操作していきます。
ここではよく使うメソッドについていくつか見ていきましょう。
MapsService
| メソッド | 説明 |
|---|---|
| newStaticMap() | 新しい StaticMap オブジェクトを作成 |
| geocode() | 指定された住所のおおよその地理的位置を取得 |
| reverseGeocode() | 指定された地理的位置のおおよその住所を取得 |
| addMarker() | 地図上にマーカーを追加 |
| addPath() | ポリラインや地点間の線を描画 |
| setCenter() | 地図の中心を指定した座標に設定 |
| setZoom() | 地図のズームレベルを設定 |
| setSize() | 地図のサイズを設定 |
| getMapUrl() | 地図のURLを取得 |
作るもの
2つの場所間の経路を表示した画像を生成して、メールで送信するスクリプトを作ってみます。
GASを書いていく
var map = Maps.newStaticMap().setSize(600, 300);
まず新しい静的地図を作成し、その地図をmap変数に格納します。setSize(600, 300) で地図のサイズを幅 600px、高さ 300px に設定しています。
var directions = Maps.newDirectionFinder()
.setOrigin('東京')
.setDestination('大阪')
.getDirections();
ここでは、Maps.newDirectionFinder() を使用して新しい方向探索オブジェクトを作成します。.setOrigin('東京').setDestination('大阪') は、出発地点を '東京'、目的地を '大阪' に設定しています。そして、.getDirections() でこの2つの地点間の経路情報を取得しています。
var route = directions.routes[0];
var polyline = route.overview_polyline.points;
directions.routes[0] は取得した経路情報の最初のルートを示し、その情報を route 変数に格納しています。そして、route.overview_polyline.points で経路を表すポリライン情報を取得しています。
map.addPath(polyline);
map.addPath(polyline) で、取得したポリライン情報を地図上に描画します。
// 画像を添付してメールを送信
const recipientEmail = 'sample@example.com'; // 送信先のメールアドレス
var subject = 'ルートマップの表示'; // メールの件名
var body = 'ルートマップをお送りします。'; // メールの本文
var image = map.getBlob().getAs('image/png').setName('map.png');
GmailApp.sendEmail(recipientEmail, subject, body, { attachments: [image] });
この部分では、地図を画像として表現するための準備を行っています。
まずmap.getBlob() でmap 変数で参照されている地図オブジェクトを画像データとして取得します。この地図は静的なもので、指定されたサイズや表示オプションを持っています。
.getAs('image/png')することで取得した画像データを指定された形式に変換します。この場合は、PNG形式での画像に変換しています。そして最後に.setName('map.png')を呼び出して画像の名前を設定します。ここでは、生成された画像の名前を 'map.png' として設定しています。この名前は添付ファイルの名前になります。
最後にGmailAppクラスを用いてメールを送っています。GmailAppクラスについては詳しくはこちらに記事を書いています。
完成品がこちら
GASのコード
function sendMapImageByEmail() {
// 画像を作成
var map = Maps.newStaticMap().setSize(600, 300);
var directions = Maps.newDirectionFinder()
.setOrigin('東京')
.setDestination('大阪')
.getDirections();
var route = directions.routes[0];
var polyline = route.overview_polyline.points;
map.addPath(polyline);
// 画像を添付してメールを送信
const recipientEmail = 'sample@example.com'; // 送信先のメールアドレス
var subject = 'ルートマップの表示'; // メールの件名
var body = 'ルートマップをお送りします。'; // メールの本文
var image = map.getBlob().getAs('image/png').setName('map.png');
GmailApp.sendEmail(recipientEmail, subject, body, { attachments: [image] });
}
実行結果
東京から大阪までのルートを記載した画像データを添付したメールを送ることができました！
最後に
今日はGASからGoogleマップを操作する方法についてサンプルコードを添えて見ていきました。今回は作った画像をメールで送信しましたがもちろんGoogleドライブと連携させてドライブに保存することも可能です。