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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Q&A

解決済

3回答

1284閲覧

緯度と経度を出力してもundefinedと出てしまう

Kuro_Rubbit

総合スコア4

Google API

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

0グッド

0クリップ

投稿2022/11/11 15:31

編集2022/11/13 08:16

Nodeで緯度と経度をコンソールに出力するようにしたいです。
ですが、緯度と経度を出力してもundefinedと出力されてしまいます。

var script = document.createElement('script'); script.src = [APIキー] script.async = true; var lat; var lng; var jyuusyo = "東京都中央区日本橋堀留町1-10-2"; setTimeout( function initMap(){ var geocoder = new google.maps.Geocoder(); geocoder.getLatLng(jyuusyo, (result) => { lat = result.lat(); lng = result.lng(); }); } ,1000); console.log("緯度: ", lat); console.log("経度: ", lng);

//出力結果

緯度: undefined 経度: undefined

が出力された後に、

ReferenceError: google is not defined

というエラーが出てくる

試したこと

  • Promiseをつける
ReferenceError: GClientGeocoder is not defined

というエラーが起きる

  • initMap()を外す

上記と同じエラーが起きる

  • console.log()をinitMap()内ですると、なぜか表示されない

  • GClientGeocoder()をgoogle.maps.Geocoder()に置き換える

ReferenceError: google is not defined

というエラーが起きる

  • .eslintrc

テキストエディタに以下のようなエラーも出てきます

ERROR: Parsing error: Unexpected token >

それで「.eslintrc.json」「.eslintrc.js」というファイルが原因だと言われましたが、
exlintrc.cjsがあるだけで、そもそもそんなファイルは存在しませんでした。

  • getLatLngの中にconsole.logを書く
setTimeout( function initMap(){ var geocoder = new google.maps.Geocoder(); geocoder.getLatLng(jyuusyo, (result) => { lat = result.lat(); lng = result.lng(); console.log("緯度: ", lat); console.log("経度: ", lng); }); } ,1000 );

//出力結果
緯度と軽度が表示されない

  • APIキーが反映されているかどうか確認する

htmlでやってみたところ、表示されません

お答えいただけますと幸いです
よろしくお願いいたします

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

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

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

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

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

guest

回答3

0

ベストアンサー

getLatLng の第二引数に指定した関数(コールバック関数)は非同期に呼ばれます。

質問文記載のコードだと、lat, lng がAPIから戻り値を受け取る前に、その内容を出力しているため、undefined になります。
APIからの戻り値を出力したいのであれば、下記のようにコールバック関数の中で表示させる必要があります。

js

1var script = document.createElement('script'); 2 script.src = [APIキー] 3 script.async = true; 4 5var lat; 6var lng; 7 8var jyuusyo = "東京都中央区日本橋堀留町1-10-2"; 9 10setTimeout( 11 function initMap(){ 12 var geocoder = new google.maps.Geocoder(); 13 geocoder.getLatLng(jyuusyo, (result) => { 14 lat = result.lat(); 15 lng = result.lng(); 16 console.log(lat); 17 console.log(lng); 18 }); 19 } 20 ,1000 21);

投稿2022/11/12 00:28

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Kuro_Rubbit

2022/11/12 02:00 編集

非常に貴重なご意見、ありがとうございます やってみると以下のように、表示されなくなってしまいます ーーーーーーーーーーーーーーーーーーーーーーーーーーー $ node KeidoIdo.js var geocoder = new google.maps.Geocoder(); ^ ReferenceError: google is not defined at Timeout.initMap [as _onTimeout] at listOnTimeout at process.processTimers Node.js v19.0.1 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 経度緯度表示できていたんですけれどね... なんででしょう?
退会済みユーザー

退会済みユーザー

2022/11/12 00:52 編集

それはエラーのとおり「google」という変数が定義されてないからです。 元々は、プログラムの先頭あたりに <script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja"></script> みたいな行があったのに、削除して実行していませんか? または google apiを使うためのスクリプトが読み込まれていません。 であればもとに戻してください。
Kuro_Rubbit

2022/11/12 01:30

htmlではなく、Nodeの中だけで完結させたいのですが、その場合は、どのような対処方法がありますか?
Kuro_Rubbit

2022/11/12 01:36

試しにhtmlの方で動かしてみたところ、やはりと言いますか、表示されません これはなぜでしょうか? 質問多くて申し訳ないです。 よろしくお願いいたします
退会済みユーザー

退会済みユーザー

2022/11/12 02:00 編集

>「htmlではなく、Nodeの中だけで完結させたい」 >「試しにhtmlの方で動かしてみたところ、やはりと言いますか、表示されません」 すみませんが、現状の質問文とそのコメント含む今までのコメントの内容だけでは、質問者さんのやりたいこととか、具体的にどういうソースコードのときに、どういうエラーが起きてどこで躓いているのかが全然わかりません。 おそらく質問者さんが「無意識的にわかっていること、前提にしていること」があって、仮にそれを知っている(知りうる)ならばわかるのでしょうが、あいにく私は超能力者ではないのでわかりかねます。 質問者さんのやりたいことがわかるソースコードおよび実行環境・どのように実行したか(nodeでの実行なら実行時にコマンドに入力した文字)、それを実行したときにどのようなエラーが出たかを「全部」「具体的に」書いてください。 特にnodeの場合複数のファイルが絡むので。 (コードやエラーを一部だけ抜き出したり、自分の匙加減で省略化したりするようなことはしないで下さい) そうすれば回答も付きやすいでしょう。(私が回答する/できるとは言っていません) apiキー等、プライバシーにかかわる部分があれば動作に影響のない範囲で隠して構いません。
Kuro_Rubbit

2022/11/12 05:12

初学者なもので、、、勉強不足ですね。すみません。 具体的には、NodeでWEBからスクレイピングしてきた住所リストから、経度緯度を抽出 →ファイルに書き込む →そのファイルを読み取り、htmlにMapを表示させる という機能を書こうとしています。その、「ファイルに書き込む」前段階、経度緯度を抽出する方法で躓いているといった感じです。 Nodeではhtmlは使えない(私の技術では)ので、javascriptのファイル一枚だけで完結させたコードを書きたいのです。 なので、「javascript内だけで、APIキーを書く方法」「経度緯度を出力する方法」が知りたかったのです。 わかりにくくてすみません ですがそもそも、APIキーを入れたhtmlで、動かしたところ、経度緯度が動かないということは、 APIキーではなくて、経度緯度を動かすところの方に問題があるということになります。
Kuro_Rubbit

2022/11/12 05:24 編集

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <script async defer src="http://maps.google.com/maps/api/js?key=「APIキー」&language=ja"></script> <script type="text/javascript"> var script = document.createElement('script'); var lat; var lng; var jyuusyo = "東京都中央区日本橋堀留町1-10-2"; document.write("やったー"); //経度緯度を表示させる setTimeout( function initMap(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': jyuusyo, 'region': 'jp' }, function(results, status){ if(status==google.maps.GeocoderStatus.OK){ lat = result.lat(); lng = result.lng(); document.write("緯度: ", lat); document.write("経度: ", lng); document.write("あたり"); }else{ document.write("はずれ"); } } ); } ,1000 ); </script> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 以上のようなコードの場合、「あたり」か「はずれ」、どちらかが表示されていなければおかしいですが、どちらも表示されていないです。「やったー」は問題なく表示されます。
退会済みユーザー

退会済みユーザー

2022/11/12 23:16 編集

・そのコードはNodeで実行したものの一部ですか?それともhtmlファイル(またはjsファイル)等に書いて、そのhtmlファイルを直接ブラウザで開いたもののどちらですか? ・そのコードを実行したとき、ブラウザのデベロッパーツールのコンソール画面や、開発側のコンソール画面に一切何もエラーや他の情報が表示されていないという理解でよろしいでしょうか?
guest

0

よこから失礼
もしかして jyusyoが住所だからでは?

投稿2022/11/11 20:49

shin22

総合スコア17

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

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

Kuro_Rubbit

2022/11/11 21:07

住所の部分にはちゃんとした住所が入っていますよ。 正確には、ここにはスクレイピングしてきた住所が入っているのです。
shin22

2022/11/11 21:10

失礼しました
guest

0

Text

1あなたはオーバーフローが発生しているか確認すべきである。

投稿2022/11/11 16:11

atcoderyellow

総合スコア481

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

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

Kuro_Rubbit

2022/11/11 16:28 編集

やっぱりエラーが起きてしまいます。。。 オーバーフローに気を使ってsetTimeout()を入力しました ーーーーーーーーーーーーーーーーーーーーーーーー setTimeout( function initMap(){ var geocoder = new GClientGeocoder(); geocoder.getLatLng(jyuusyo, (result) => { lat = result.lat(); lng = result.lng(); }); },0); console.log("緯度: ", lat); console.log("経度: ", lng); ーーーーーーーーーーーーーーーーーーーーーーーー エラー ーーーーーーーーーーーーーーーーーーーーーーーーー ReferenceError: GClientGeocoder is not defined ーーーーーーーーーーーーーーーーーーーーーーーーー
atcoderyellow

2022/11/11 16:29

GClientGeocoder()をgoogle.maps.Geocoder()に置き換えるとどのようなエラーの変化がありますか?
Kuro_Rubbit

2022/11/11 21:01

試したのですが。。。 ーーーーーーーーーーーーーーーーーーー ReferenceError: google is not defined ーーーーーーーーーーーーーーーーーーー こんな感じです
atcoderyellow

2022/11/11 21:18

あなたがGoogle Maps JavaScript APIを使っているならば、そのバージョンを確認してください。 使っていないならば、私は解決法を知らない。
Kuro_Rubbit

2022/11/11 21:53

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー Weekly channel will serve 3.51 Quarterly channel will serve 3.50 Exact version numbers can be specified as v=3.51, v=3.50, v=3.49, or v=3.48 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー ですかね 一番最新のやつです 使っているのは、Google Maps JavaScript APIで間違いありません
atcoderyellow

2022/11/11 22:01

import時にエラーが発生していると推測される。 私自身はこのエラーを解決する方法を知らないが、私はこれらのページが役立つと考える。 https://stackoverflow.com/questions/62155131/google-maps-referenceerror-google-is-not-defined https://stackoverflow.com/questions/66280759/how-can-i-resolve-uncaught-referenceerror-google-is-not-defined-google-maps <script src="https://maps.googleapis.com/maps/api/js?key="></script> など?
Kuro_Rubbit

2022/11/11 22:06

色々とありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問