GoogleMapGeocoding API　のリクエストキー記述をご教授頂きたく存じます。

回答率: 85.47%

質問するログイン新規登録

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

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

新規登録して質問してみよう

ただいま回答率: 85.47%

トップ Google APIに関する質問

Q&A

解決済

3回答

2884閲覧

GoogleMapGeocoding API　のリクエストキー記述をご教授頂きたく存じます。

総合スコア11

0グッド

0クリップ

投稿2016/09/17 07:50

編集2016/09/20 09:03

0

0

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
GoogleMapGeocoding API のapiKeyを利用して出力コードを訂正して頂きたいです。

以下のコードを利用し、住所から地図を利用していたのですが、
apikeyの利用が必須となった今、keyをいれた最新の記述に書き換えを行いたいです。

しかし、当方の知識が足らず、keyを記述してしまうと、表示がなされません。
以下のコードで現在、表示には成功しており、方法としては問題ありません。
こちらにapikeyをいれ、動作する記述を教えて頂きたく存じます。

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

エラーメッセージ
Uncaught SyntaxError: Unexpected token : APIkey

APIkeyを入力すると地図が出力されなくなってしまう。

###該当のソースコード

###試したこと

リクエストキーを変形させ、いくつものパターンでgeocodeに入力いたしましたが、
APIマネージャー側でリクエストがエラーとなり、出力がなされませんでした。
MAP javascript APIは別途導入しておりそちらもKEYも入力できております。

JavaScript
1geocoder.geocode( { 'address': $('#mAddress').text(),'region':'key': $('APIKEY') 'jp'},
2geocoder.geocode( { 'address': $('#mAddress').text(),'key': $('APIKEY')'region': 'jp'},
3geocoder.geocode( { 'address': $('#mAddress').text(),'APIKEY':'region': 'jp'},
4geocoder.geocode( { 'address': $('#mAddress').text(),'region':'APIKEY': 'jp'},
5

###補足情報(言語/FW/ツール等のバージョンなど)
■公式 https://developers.google.com/maps/documentation/geocoding/intro?hl...
■リクエストキー例 https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amph...

非常に困っております。。。
お心お優しい方、どうぞよろしくお願い致します。

2016/09/17 08:00

質問タグがJAVAになっていますが、JavaScriptではないでしょうか。また、エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

2016/09/17 08:19

御教え頂きありがとうございます。 JavaScriptです、大変失礼いたしました。初心者なのもので至らぬ点ございますが、どうぞよろしくお願い致します。ご教授頂いた方法でエラーを確認いたしました所、以下、エラーでした。 Uncaught SyntaxError: Unexpected token : APIkeyの記述場所が間違っている為発生している為とおもうのですが、、、正しい記述が分からず、右往左往しております。。

2016/09/17 08:26

APIキーを書いた部分のソースもご提示いただければ幸いです（もちろん、キー自体は書かなくて大丈夫です）。

2016/09/17 08:33

修正依頼頂きありがとうございます。以下のような記述等を試みました。 (初心者の為、見当違いな記述と思いますが寛大な目で見頂きたく思います) geocoder.geocode( { 'address': $('#mAddress').text(),'region':'key': $('APIKEY') 'jp'}, geocoder.geocode( { 'address': $('#mAddress').text(),'key': $('APIKEY')'region': 'jp'}, geocoder.geocode( { 'address': $('#mAddress').text(),'APIKEY':'region': 'jp'}, geocoder.geocode( { 'address': $('#mAddress').text(),'region':'APIKEY': 'jp'}, また、基礎がわかっていなすぎるから、こういったサイトで勉強したほうがいいよ、等のアドバイスでもかまいませんので是非御知恵お貸しくださいませ。

2016/09/17 08:38

コードは、ここではなく質問文に追記してください。また、コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。あと、エラーは一部ではなくできるだけ全文を質問文に追記願います。

2016/09/17 08:47

大変失礼いたしました。ご指摘箇所を修正いたしましたのでご確認お願い致します。

行動規範の内容に同意します

回答3件

0

ベストアンサー

ほぼ公式サイトのサンプル通り

Geocoding service

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3    <head>
4        <title></title>
5        <meta charset="UTF-8">
6        <meta http-equiv="X-UA-Compatible" content="IE=edge">
7        <meta name="viewport" content="width=device-width, initial-scale=1">
8        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
9        <style type="text/css">
10            #map {
11                height: 400px;
12                border: 1px solid #ccc;
13            }
14        </style>
15    </head>
16    <body>
17
18        <div class="container">
19            <div class="row">
20                <div class="col-md-6 col-md-offset-3" id='map'>
21					東京都港区六本木 6-10-1六本木ヒルズ森タワー
22                </div>
23            </div>
24        </div>
25
26        <script src="//code.jquery.com/jquery.min.js"></script>
27        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
28		<script>
29			var address = document.getElementById('map').innerHTML;
30
31			function initMap() {
32				var map = new google.maps.Map(document.getElementById('map'), {
33					zoom: 8,
34					center: {
35						lat: 34.397, lng: 140.644
36					}
37				});
38				var geocoder = new google.maps.Geocoder();
39				geocodeAddress(geocoder, map);
40			}
41			function geocodeAddress(geocoder, resultsMap) {
42				geocoder.geocode({'address': address}, function (results, status) {
43					if (status === google.maps.GeocoderStatus.OK) {
44						resultsMap.setCenter(results[0].geometry.location);
45						var marker = new google.maps.Marker({
46							map: resultsMap,
47							position: results[0].geometry.location
48						});
49					} else {
50						alert('Geocode was not successful for the following reason: ' + status);
51					}
52				});
53			}
54		</script>
55		<script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&signed_in=true&callback=initMap"
56		async defer></script>
57
58	</body>
59</html>

html
1<!DOCTYPE HTML>
2<html lang="ja-JP">
3    <head>
4        <title></title>
5        <meta charset="UTF-8">
6        <meta http-equiv="X-UA-Compatible" content="IE=edge">
7        <meta name="viewport" content="width=device-width, initial-scale=1">
8        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
9        <style type="text/css">
10            #map {
11                height: 400px;
12                border: 1px solid #ccc;
13            }
14        </style>
15    </head>
16    <body>
17
18        <div class="container">
19            <div class="row">
20                <div id='map' class="col-md-6 col-md-offset-3" data-lat="35.348504" data-lng="136.164551">
21                </div>
22            </div>
23        </div>
24
25        <script src="//code.jquery.com/jquery.min.js"></script>
26        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
27		<script>
28			var dom = document.getElementById('map');
29
30			function initMap() {
31				var map = new google.maps.Map(document.getElementById('map'), {
32					zoom: 8,
33					center: {
34						lat: parseFloat(dom.getAttribute('data-lat'))
35						, lng: parseFloat(dom.getAttribute('data-lng'))
36					}
37				});
38			}
39		</script>
40		<script src="https://maps.googleapis.com/maps/api/js?key={APIKEY}&signed_in=true&callback=initMap"
41		async defer></script>
42
43	</body>
44</html>

投稿2016/09/17 12:06

編集2016/09/17 13:28

退会済みユーザー

総合スコア0

2016/09/17 12:38

ありがとうございます。コード事例ありがとうございます。 Geocoding APIはGoogle Maps APIを利用していれば、不必要なのでしょうか？他の方にも質問してしまっておりますが、当方の理解ができておらず、もうしわけございません　。

退会済みユーザー

2016/09/17 12:40

{YOUR_API_KEY}にAPIKEYを書けばそのまま動くコードを示したのに、何がわからないのでしょうか？

2016/09/17 12:54

私の質問の仕方が悪く申し訳御座いません。 Shibuya様から頂きました、以下コードに関しては既に記述しており、動作も確認できております。しかし、これでは、参照画像にもあるように、 Google Maps APIのリクエスト数はカウントされますが、 Google Geocoding APIのリクエスト数はカウントされません。これは規約違反にならないのでしょうか？ Google Maps APIとGoogle Geocoding APIではリクエスト数の制限が異なると思う増すが、Google Maps APIだけでいいのでしょうか？ Geocoding serviceとGeocoding APIを利用する事は別のことなのでしょうか？御手数ですがどうぞよろしくお願い致します。 <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&signed_in=true&callback=initMap" async defer></script>

退会済みユーザー

2016/09/17 12:58 編集

GeoCoding って異なる住所だとカウントされるけど、同じ住所は最初の一つしかカウントされません。

2016/09/17 13:02

度々申し訳御座いません。最初の一つとはGoogle Maps Javescript APIのことでしょうか？ではあれば、Google Geocoding APIは何のためのツールなのでしょうか？ Google Geocoding APIの制限は1日2500pv、 Google Maps Javescript API　1日5000pvといったようの制限だったと思うのですが、Google Geocoding APIはどのような場合につかうとメリットがあるのでしょうか？

退会済みユーザー

2016/09/17 13:04

Geocoding は住所から緯度経度情報に変換する機能 Google Maps Javescript API　は地図を表示するための機能

2016/09/17 13:10

私がやろうとしていることは、 Geocoding の機能の中でも、Google Maps Javescript APIに包括されている為、 Geocoding のAPIは不要、ということですか？知識が足りて折らず、大変申し訳御座いません。。。。。しっかりと理解して使用したいとおもっております。

退会済みユーザー

2016/09/17 13:13

それはあなたがどんなページを作ろうとしているか次第。地図に使おうとしている緯度経度情報がすでにわかっていて、住所情報から自動で緯度経度情報を変換する必要がないのであれは、Geocoding は不要。

2016/09/17 13:19 編集

ご丁寧に分かりやすくありがとうございます。緯度経度情報はわかっておらず、住所から変換して地図に致します。つまりその場合は、Google Maps Javescript APIを利用していれば、 Geocoding　APIは特にkeyが必要なコードは不必要なのでしょうか？また、別の質問になってしまいますが、同時にストリートビューも表示する場合、それもカウントは1として、地図1、ストリートビュー1、合計2となるのでしょうか？それとも住所のリクエストは1つなので1となるのでしょうか？主旨とことなる質問までしてしまい申し訳ございません。

退会済みユーザー

2016/09/17 13:22

五月雨式に質問が続くのは困りますね… そんなに疑問があるなら、公式のサポートに問い合わせてください。 https://developers.google.com/maps/documentation/javascript/support?hl=ja

2016/09/17 13:30

かしこまりました。長々とありがとうございました。

行動規範の内容に同意します

0

Google MapのAPIキーは、JavaScriptの読み込み時に指定します。リクエストの際は不要です。

Googleによるリファレンス

投稿2016/09/17 08:35

総合スコア145201

2016/09/17 08:38

ご回答ありがとうございます。 Google Maps JavaScript APIは head部分に以下で記述し、正常に動作しております。 <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap" Google Maps Geocoding APIはジオコーディングする際は、Google Maps JavaScript APIとは別に必要なのかと考えているのですが、不必要なのでしょうか？なにからなにまで質問してしまい申し訳ございません。 Google Maps Geocoding APIの記述例は情報が少なく難航している次第でございます。

2016/09/17 08:40

GoogleのAPI Consoleで使用設定をすれば、同じ鍵で両方使えます。

2016/09/17 08:45

APIKEYは同じものを使用しておりますが、以下の記述のみで両方のAPIが使えるようになるという事ですか？全く別のAPIで無料版の制限回数等も異なるので別々のコードが必要と考えておりましたが、、、、 <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"

2016/09/17 08:58

はい、Google Maps Geocoding APIはGoogle Maps APIの一部ですので、同じキーで動くはずです。 https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja

2016/09/17 09:00

なお、「 https://maps.googleapis.com/maps/api/geocode/」から始まるジオコーディング用APIは、サーバサイド専用でブラウザからは使えません。

2016/09/17 09:10

度々失礼致します。質問の中に参考画像としてAPI Consoleの画面キャプチャを添付いたしました。つまり、Google Maps APIのkeyを設定し、リクエストが正常に動作していれば、Google Maps Geocoding APIは別途必要な記述は無く、リクエストされずとも契約違反にならない、ということでしょうか？ Google Maps APIがGoogle Maps Geocoding APIを一部包括しているというのはなんとなくわかっていたのですが、理解ができておりませんでした。とすると、geocoding　API単体で利用するのはリクエスト制限数が低いため、メリットが少ないと思うのですが、わたしの解釈は間違っておりますでしょうか？　

2016/09/17 13:55

御付き合い頂きありがとうございました。

行動規範の内容に同意します

0

Uncaught SyntaxError: Unexpected token : APIkey

address, location, placeId, bounds, componentRestrictions, region 以外のキー「APIkey」が入っているというエラーです。

【Geocoding Service | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja#GeocodingRequests

The GeocoderRequest object literal contains the following fields:

JavaScript
1{
2 address: string,
3 location: LatLng,
4 placeId: string,
5 bounds: LatLngBounds,
6 componentRestrictions: GeocoderComponentRestrictions,
7 region: string
8}

APIの制約について。

【Google Geocoding APIの制約に関するよくある誤解 - 文系プログラマによるTIPSブログ】
http://www.bunkei-programmer.net/entry/2013/02/27/Google_Geocoding_APIの制約に関するよくある誤解

【各種ジオコーディングapiの罠と対処法 - 文系プログラマによるTIPSブログ】
http://www.bunkei-programmer.net/entry/2012/11/17/各種ジオコーディングapiの罠と対処法

いくつものパターンでgeocodeに入力いたしましたが、

JavaScriptとして間違ったものも混ざっていますが、文法的に正確に書くなら下記のような感じです。

JavaScript
1{
2	  'address': $( '#mAddress' ).text()
3	, 'region' : 'jp'
4	, 'APIkey' : '(YOUR API KEY)'	// APIkeyをキーにしている限り失敗するのでこれはあくまで記入例
5},

投稿2016/09/17 10:09

総合スコア69458

2016/09/17 11:24

ご回答ありがとうございます。頂いたコード例にYOUR API KEYに私のkeyをいれたところ、動作いたしませんでした。 consoleでもエラーは出ておらず、追加した, 'APIkey' : '(YOUR API KEY)' を削除すると動作する次第でございます。 KeyはGoogle Maps APIで動作が確認できているものです。どのように対処していけばよろしいでしょうか。。ジオコーディングリクエストの必須パラメータ: address: ジオコーディングを行う番地です。対象国の郵便業務で使用されている形式で指定します。店名や組織名、部屋番号、階数など、その他の住所の要素は指定しないでください。その他の情報については、FAQ をご覧ください。または components: ジオコードを取得するコンポーネントフィルタです。詳細については、コンポーネントのフィルタリングをご覧ください。address を指定する場合、コンポーネントフィルタをオプションのパラメータとして指定することもできます。 key: アプリケーションの API キーです。このキーを使ってアプリケーションを識別し、割り当て量を管理します。詳細については、キーの取得をご覧ください。 ■https://developers.google.com/maps/documentation/geocoding/intro?hl=ja

2016/09/17 11:32

> 頂いたコード例にYOUR API KEYに私のkeyをいれたところ、動作いたしませんでした。それがいらないと回答しているのですが、私の回答を読みましたか？しかもそのキーの所にこれでは失敗すると書いたのに･･･。

2016/09/17 11:47

大変申し訳御座いません。確認は致しましたが、ジオクコーディングのリクエスト必須パラメータにkeyがあるのですが、関係ないのでしょうか？それでは、 Google Maps Geocoding APIをリクエストがカウントされる状態でつかうのにはどのようにしたらよろしいのでしょうか？

2016/09/17 13:14

> 関係ないのでしょうか？ https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja#reverse-geocoding-by-location このページでマップで Geocoding するサンプルのどこに「key」がありますか？マップで使う場合マップ呼び出しのときにkeyを使っているのだからそれを利用しているのだと思いますよ。 > Google Maps Geocoding APIをリクエストがカウントされる状態でつかうのにはどのようにしたらよろしいのでしょうか？ Kosuke_Shibuyaさんの書いておられるような書き方で書けばカウントされるとは思うのですが、確証は有りません。Geocoding が問題なく使えるようになってからカウントされていなければGoogleに問い合わせてみればよいと思います。

2016/09/17 13:31

ke344さんどうも、ありがとうございました。私の理解があまりに乏しいので、一度公式に問い合わせみます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

関連した質問

トップ Google APIに関する質問

GoogleMapGeocoding API　のリクエストキー記述をご教授頂きたく存じます。

関連した質問

同じタグがついた質問を見る