Google Maps API でルート検索処理ができないとき

技術的な小ネタ

2019.10.27

以前、Google Maps API を使用してちょこっと遊んでみました。

Google Places API で指定した座標周辺の飲食店を検索してみる

手順Google Maps API でAPIトークンを取得する検索したい場所の座標（緯度・経度）を取得するGPS とか色々方法がありますが、今回は手動で Google Map から座標を取得しましたGoogle Places ...

ルート検索処理をして、マップ上にルート表示しようとしたのですが、つまずいたので備忘録として残しておきます。

ルート検索およびルート表示方法
困ったこと
解決方法

ルート検索およびルート表示方法

主な実装方法については、以下が参考になります。

06.GRASSHOPPER

高知で活動中の自称イラストレーターのポートフォリオサイト。主にAdobe Illustratorを使用。

とりあえず、私が実装した initMap() 関数の部分だけ抜粋してみます。

// マップ表示処理
function initMap() {
  // 経路表示用インスタンス
  var DS = new google.maps.DirectionsService();
  var DR = new google.maps.DirectionsRenderer();
  // 地図の作成
  var defaultPosition = new google.maps.LatLng({
    lat: 34.366,
    lng: 132.471
  }); // とりあえず決め打ち・・・
  map = new google.maps.Map(document.getElementById("map"), {
    // #sampleに地図を埋め込む
    center: defaultPosition, // 地図の中心を指定
    zoom: 18, // 地図のズームを指定
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  //  mapとDirectionsServiceを紐づける
  DR.setMap(map);

  // 経路検索用リクエスト（べた書き・・・）
  var request = {
    origin: new google.maps.LatLng(34.364991, 132.470085),
    destination: new google.maps.LatLng(34.366, 132.471),
    travelMode: google.maps.TravelMode.DRIVING
  };

  // 経路表示（べた書き・・・）
  DS.route(request, function(result, status) {
    alert(status);
    DR.setDirections(result);
  });
}

困ったこと

上記の実装でできるはずなのですが、DS.route(request, function(result, status) {～ を実行すると REQUEST_DENIED が返ってきました。

いろいろググってもわからなかったのですが、ふと Google Maps API の設定でルート検索を有効化していないのでは？と思って確認してみると、これが原因でした。

「Directions API」が有効になっていなかったので、ルート検索できなかったのです。

解決方法

GooleCloudPlatform の Googleマップのコンソールに行きます（https://console.cloud.google.com/google/maps-apis/）
左側のメニューから「API」を選択します
「そのほかのAPI」に「Directions API」というのがあるので、これを有効化します

以上で、ルート検索およびルート表示ができるようになりました。