LoginSignup
5
0

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

Last updated at Posted at 2023-12-09

はじめに

この記事は「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] });
}

実行結果

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

スクリーンショット 2023-12-06 22.13.38.png

最後に

今日はGASからGoogleマップを操作する方法についてサンプルコードを添えて見ていきました。今回は作った画像をメールで送信しましたがもちろんGoogleドライブと連携させてドライブに保存することも可能です。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0