💨

Google Map APIのDirections API利用について(Vue,Nuxt, TypeScript)

2024/05/16に公開

Nuxt

Directions API

上記だとJSON形式のデータがリンク先に表示されるのみで、フロント側でaxiosつかってやるとCROSエラーになるーーーーー！！！！となり、はまりました。

やりたいこととしては、下記。

Google Map APIの　Directions APIを利用して目的地までの交通状況込みでの到達時間が知りたい。

調べても、json形式のデータがリンク先でみれるよ！程度の記事しかなかったです。
javascriptでマップ表示までするしかなく、単純にAPI通信した値を取得したい！

色々こねこねしてバックエンドで値取得しなきゃいけないかなとも思いつつも、フロント側でも取れるでしょと思った結果、フロントからでもいけました。

上記経緯から、GoogleMapAPIを利用していてマップ表示ではなく道のりにかかる時間や、距離を取りたいと思ったときにあまり情報が無く、やっとの思いで値取得までこぎつけたので備忘録でかきこ。

今回のやり方はフロントエンドでのやり方であるのでバックエンドでやる必要はありません。

同じやり方に苦労している方向けの記事です。

Google Map API 登録

まずはGoogle Map APIを利用できるように登録してAPIキー発番してください。

自身のプロジェクトにコマンド

下記二つのみでいいと思いますが、筆者は全部やりました。
必要かどうかはあなた次第です。

npm install @googlemaps/js-api-loader

npm install --save @types/google.maps

npm i -D @types/google.maps

下記リンク先が公式の手順です。
ただ、一番上のjs-api-loderしか記載なかったので他の記事で残りの二つを見つけてインストールしました。

Directions API

コマンド叩いて、tsconfig.jsonに下記を導入

{ // 今回の導入部分 
  "compilerOptions": {
    "types": [
      "google.maps" //googleMapApi Direction API
    ]
  },
  // 以下は元からある
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

これで使える様になるかと思います。

実際の値取得方法

例えば、引数のアドレスにスカイツリーの住所を渡してあげて、東京駅からスカイツリーまでの時間を取得します。

移動方法は車
有料道路、高速道路使わない。

then部分のコンソールで値が取得できます。

API通信ですので　awaitの記載はわすれずに。


  const getInfo = async (address: string): Promise<型> {
　
   // Direction API
　const directionsService = new google.maps.DirectionsService()
　// 東京駅の緯度経度
  const lat = 35.68155926036245
  const lng = 139.76710173046467

    await directionsService
      .route({
        origin: {
          location: { lat: lat, lng: lng },
        },
        destination: {
          query: address,
        },
        // 徒歩、運転等選べる
        travelMode: google.maps.TravelMode.DRIVING,
        // 高速、有料道路無
        avoidHighways: true,
        avoidTolls: true,
        drivingOptions: {
          // 現在の時間
          departureTime: new Date(),
        },
      })
      .then((response) => {
        // 現在の混雑状況での時間を取得
        console.log(response.routes[0].legs[0].duration_in_traffic?.text)
      })
      .catch((e) => {
        console.log('error: ' + e)
      })
  }

下記はDirection APIのパラメーターが記載ありますので参考に。

これでフロントからでもCROSエラーなくDirection APIを利用して距離や時間を取得することができました。

Google Map APIを使わなくても出来ることは多いのですが、時間や距離を取得するのにはAPIを利用した方が確実ですし、緯度経度で距離を計算すると直線距離しかとれません。

道を考慮して距離と時間をとるならAPIを利用しましょう。

以上

Directions API

Google Map API 登録

自身のプロジェクトにコマンド

Directions API

実際の値取得方法

Discussion