質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1547閲覧

Google MAP API, GEOCODE APIを使用してルート検索、表示機能が実装できない

tomoZQ

総合スコア14

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2020/09/12 04:45

前提・実現したいこと

railsでGoogle MAPを表示し、経路の表示ができる画面を実装中です。
①スタート地点、終着地点のテーブルはなし

発生している問題・エラーメッセージ

マップは表示されているが、検索ボタンを押すとコンソールにエラーが吐かれてしまい経路の表示ができない。

js?key=[My_API_KEY]:70 Directions Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key

該当のソースコード

haml

1.map#map{style: "width: 530px; height: 400px;"} 2%input#origin{type: 'textbox', value: '福井駅(福井)'} 3%br 4%input#destination{type: 'textbox', value: '福井県福井市役所'} 5%br 6%input#searchBtn{type: 'button', value: '検索'}

javascript

1$(function(){ 2 var directions; //ルートのインスタンス 3 var map; //マップのインスタンス 4 var ds = google.maps.DirectionsStatus;//ルート結果のステータス 5 var directionsErr = new Array(); //ルート結果のエラーメッセージ 6 directionsErr[ds.INVALID_REQUEST] = "指定された DirectionsRequest が無効です。"; 7 directionsErr[ds.MAX_WAYPOINTS_EXCEEDED] = "DirectionsRequest に指定された DirectionsWaypoint が多すぎます。ウェイポイントの最大許容数は 8 に出発地点と到着地点を加えた数です。"; 8 directionsErr[ds.NOT_FOUND] = "出発地点、到着地点、ウェイポイントのうち、少なくとも 1 つがジオコード化できませんでした。"; 9 directionsErr[ds.OVER_QUERY_LIMIT] = "ウェブページは、短期間にリクエストの制限回数を超えました。"; 10 directionsErr[ds.REQUEST_DENIED] = "ウェブページではルート サービスを使用できません。"; 11 directionsErr[ds.UNKNOWN_ERROR] = "サーバー エラーのため、ルート リクエストを処理できませんでした。もう一度試すと正常に処理される可能性があります。"; 12 directionsErr[ds.ZERO_RESULTS] = "出発地点と到着地点間でルートを見つけられませんでした。"; 13 14 // Onload時処理 15 // ルートの生成 16 directions = new google.maps.DirectionsService(); 17 // Google Mapで利用する初期設定用の変数 18 var mapOptions = { 19 zoom: 17, 20 mapTypeId: google.maps.MapTypeId.ROADMAP, 21 center: new google.maps.LatLng(36.062092, 136.223323) 22 }; 23 // GoogleMapの生成 24 map = new google.maps.Map(document.getElementById("map"), mapOptions); 25 26 // [検索]ボタン処理 27 $('#searchBtn').click(function(searchRoute){ 28 console.log('hoge') 29 // テキストボックスから検索の出発・到着を取得 30 var origin = document.getElementById("origin").value; 31 var destination = document.getElementById("destination").value; 32 // ルート検索を依頼する 33 directions.route( 34 { // ルート リクエスト 35 'origin' : origin, //出発地点 36 'destination': destination,//到着地点 37 'travelMode' : google.maps.DirectionsTravelMode.WALKING //ルートタイプ:徒歩 38 }, 39 function(results, status) { // ルート結果callback関数 40 if (status == ds.OK) { // 結果がOK ?? 41 // ポリライン(折れ線)を生成し、マップに表示 42 var poly = new google.maps.Polyline({ 43 map: map, //マップ 44 path: results.routes[0].overview_path,//ポリラインの座標の列 45 strokeWeight: 5, //ストローク幅(ピクセル単位) 46 strokeColor: "#f01010",//16進数形式のストロークの色 47 strokeOpacity: 0.5 //ストロークの不透明度(0.0~1.0) 48 }); 49 // 検索結果の中心設定 50 map.setCenter(results.routes[0].bounds.getCenter()); 51 } else { 52 // 結果がOKではない場合 53 alert("ルート検索が失敗しました。理由: " + directionsErr[status]); 54 } 55 }); 56 }) 57});

試したこと

APIのキー再生成
APIキーをgooglemapAPI, geocodingAPIで分けて取得

補足情報(FW/ツールのバージョンなど)

Rails 6.0.3.2
ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

https://console.cloud.google.com/google/maps-apis/credentials で、

  • DirectionsAPI を有効にする
  • API Key で DirectionsAPI の利用を許可する

事が必要だと思います

投稿2020/09/12 04:50

unhappychoice

総合スコア1531

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomoZQ

2020/09/12 05:00

・DirectionsAPI を有効にする ・API Key で DirectionsAPI の利用を許可する ことで解消しました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問