【GAS】Googleマップの経路を描画する(Gスプレッドシート)

応用

GAS応用の一覧

ご訪問ありがとうございます。

Googleシートマスターのひろしです。

前回

【GAS】最下部を取得し別シートのデータをコピペする方法
  • GASでコピペする方法がわかります。
  • 今日の日付の挿入方法がわかります。
  • 最下部の位置を取得する方法がわかります。
  • 今回は、とっても価値の高い方法をお伝えします。


    これを知ることであなたは、

    • Googleマップの経路の地図を描画する事ができます。
    • ある程度カスタマイズできます。

    こんな感じになります。

    なので、サクッとマスターして

    と答えてあげてください。

    動画はこちら

    GoogleスプレッドシートにGoogleマップの経路図をワンクリックで描画する方法

    スクリプト

    /**
     * Googleマップの経路図を貼り付ける
     * 
     */
    function PastGoogleMap() {
      // const SHEET_NAME = ""
      const POS_START = "B2"  //スタート地点
      const POS_END = "C2"    //目的地
      const POS_DEST = "D2"   //距離
      const POS_TIME = "E2"   //所要時間
    
    
      const map = new Maps.newStaticMap()
      // const sh = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(SHEET_NAME)
      const sh = SpreadsheetApp.getActiveSheet()
      const start = sh.getRange(POS_START).getValue()
      const end = sh.getRange(POS_END).getValue()
    
    
      //前回の地図を消す
      //※シート内の別の画像も削除される
      let images = sh.getImages()
      for (let i = 0; i < images.length; i++) {
        images[i].remove()
      }
    
    
      const directions = Maps
        .newDirectionFinder()
        .setLanguage('ja')
        .setOrigin(start)
        .setDestination(end)
        // .setMode(Maps.DirectionFinder.Mode.DRIVING)
        // .setMode(Maps.DirectionFinder.Mode.TRANSIT) 
        .setMode(Maps.DirectionFinder.Mode.WALKING)
        .setDepart(new Date())
        .getDirections()
    
    
      const route = directions.routes[0].overview_polyline.points
    
    
      map.setSize(600, 480)           //☆マップのサイズ
        .setLanguage('ja')
        .setPathStyle(10, Maps.StaticMap.Color.RED, null)   //☆線のサイズと色
        .addPath(route)
    
    
    
      const png = Utilities.newBlob(map.getMapImage(), 'image/png', 'map.png')
      sh.insertImage(png, 2, 4)       //☆地図を描画する位置
    
    
      // console.log(directions.routes[0].legs[0])
    
    
      sh.getRange(POS_DEST).setValue(directions.routes[0].legs[0].distance.text)
      sh.getRange(POS_TIME).setValue(directions.routes[0].legs[0].duration.text)
    }

    必要に応じて☆の位置を変更してください。

    シートはこちら

    ※クリックするとシートが開きます。

     

    カスタマイズ方法

    • スクリプト内の☆の部分で座標や経路の線のサイズ色が変更できます。
    • 徒歩(WALKING)以外にしたい場合は、DRIVING or TRANSITを指定します。
    Enum Mode  |  Apps Script  |  Google for Developers
    • デバッグする場合は、シート名を指定することをお勧めします。

     

     

    最後までご覧いただきありがとうございます。

    つぎはこちら

    【GAS】VLOOKUPをやってみる(Javascriptの配列に対するfind,map)
  • GASでVLOOKUP関数的な機能を実現できます。
  • 配列内の検索や値の取得方法がわかります。
  • GAS応用の一覧

     

     

    コメント

    タイトルとURLをコピーしました