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

遊び

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

Google Places API で指定した座標周辺の飲食店を検索してみる
手順Google Maps API でAPIトークンを取得する検索したい場所の座標(緯度・経度)を取得するGPS とか色々方法がありますが、今回は手動で Google Map から座標を取得しましたGoogle Places ...

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

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

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

GoogleMapにルートを表示する | Blog | 06.GRASSHOPPER
Google Mapsの表示にはAPI登録が必須になりましたGoogle Mapsが表示されない場合は、APIキーの登録をお試し下さい。APIキーの取得方法につきま...

とりあえず、私が実装した 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」が有効になっていなかったので、ルート検索できなかったのです。

解決方法

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

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

コメント

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