GASからGoogleマップを操作する方法

# はじめに
この記事は「[Ateam LifeDesign Advent Calendar 2023](https://qiita.com/advent-calendar/2023/ateam-life-design)」で完走賞を狙って25記事書いているうちの10日目の記事です。今年も完走目指して頑張るぞ！

今日はGASからGoogleマップを操作する方法についてみていきます。

# GASからGoogleマップを操作する方法
[MapsService](https://developers.google.com/apps-script/reference/maps?hl=ja)を使うことでGoogleマップを操作していきます。
ここではよく使うメソッドについていくつか見ていきましょう。

## MapsService

| メソッド               | 説明                             |
|------------------------|----------------------------------|
| newStaticMap()         | 新しい StaticMap オブジェクトを作成                |
| geocode()| 指定された住所のおおよその地理的位置を取得             |
| reverseGeocode()   | 指定された地理的位置のおおよその住所を取得          |
| addMarker()            | 地図上にマーカーを追加           |
| addPath()              | ポリラインや地点間の線を描画     |
| setCenter()            | 地図の中心を指定した座標に設定 |
| setZoom()              | 地図のズームレベルを設定       |
| setSize()              | 地図のサイズを設定               |
| getMapUrl()            | 地図のURLを取得                 |

# 作るもの
2つの場所間の経路を表示した画像を生成して、メールで送信するスクリプトを作ってみます。

# GASを書いていく

```javascript
  var map = Maps.newStaticMap().setSize(600, 300);
```
まず新しい静的地図を作成し、その地図を`map`変数に格納します。`setSize(600, 300)` で地図のサイズを幅 600px、高さ 300px に設定しています。

```javascript
var directions = Maps.newDirectionFinder()
  .setOrigin('東京')
  .setDestination('大阪')
  .getDirections();
```

ここでは、`Maps.newDirectionFinder()` を使用して新しい方向探索オブジェクトを作成します。`.setOrigin('東京').setDestination('大阪')` は、出発地点を '東京'、目的地を '大阪' に設定しています。そして、`.getDirections()` でこの2つの地点間の経路情報を取得しています。

```javascript
var route = directions.routes[0];
var polyline = route.overview_polyline.points;
```
`directions.routes[0]` は取得した経路情報の最初のルートを示し、その情報を `route` 変数に格納しています。そして、`route.overview_polyline.points` で経路を表すポリライン情報を取得しています。

```javascript
map.addPath(polyline);
```

`map.addPath(polyline)` で、取得したポリライン情報を地図上に描画します。

```javascript
  // 画像を添付してメールを送信
  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クラスについては詳しくは[こちら](https://qiita.com/kakakaori830/private/90caa4c7e709ef1d75c2)に記事を書いています。

# 完成品がこちら

## GASのコード

```javascript
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] });
}

```

## 実行結果

東京から大阪までのルートを記載した画像データを添付したメールを送ることができました！

![スクリーンショット 2023-12-06 22.13.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/c8c8f128-2014-e4da-20a1-6c2af3c10264.png)

# 最後に
今日はGASからGoogleマップを操作する方法についてサンプルコードを添えて見ていきました。今回は作った画像をメールで送信しましたがもちろん[Googleドライブと連携](https://qiita.com/kakakaori830/private/8ea34a9bb3db7b3f4b20)させてドライブに保存することも可能です。