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

Question

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でやってみたところ、表示されません

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

Answer 1

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

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

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();
            console.log(lat);
            console.log(lng);
        });
    }
    ,1000
);

Comments

[Kuro_Rubbit]

非常に貴重なご意見、ありがとうございます
やってみると以下のように、表示されなくなってしまいます
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
$ 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
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
経度緯度表示できていたんですけれどね...
なんででしょう？

[退会済みユーザー]

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

であればもとに戻してください。

[Kuro_Rubbit]

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

[Kuro_Rubbit]

試しにhtmlの方で動かしてみたところ、やはりと言いますか、表示されません
これはなぜでしょうか？

質問多くて申し訳ないです。
よろしくお願いいたします

[退会済みユーザー]

＞「htmlではなく、Nodeの中だけで完結させたい」
＞「試しにhtmlの方で動かしてみたところ、やはりと言いますか、表示されません」

すみませんが、現状の質問文とそのコメント含む今までのコメントの内容だけでは、質問者さんのやりたいこととか、具体的にどういうソースコードのときに、どういうエラーが起きてどこで躓いているのかが全然わかりません。

おそらく質問者さんが「無意識的にわかっていること、前提にしていること」があって、仮にそれを知っている(知りうる）ならばわかるのでしょうが、あいにく私は超能力者ではないのでわかりかねます。

質問者さんのやりたいことがわかるソースコードおよび実行環境・どのように実行したか（nodeでの実行なら実行時にコマンドに入力した文字）、それを実行したときにどのようなエラーが出たかを「全部」「具体的に」書いてください。
特にnodeの場合複数のファイルが絡むので。
（コードやエラーを一部だけ抜き出したり、自分の匙加減で省略化したりするようなことはしないで下さい）
そうすれば回答も付きやすいでしょう。（私が回答する／できるとは言っていません）

apiキー等、プライバシーにかかわる部分があれば動作に影響のない範囲で隠して構いません。

[Kuro_Rubbit]

初学者なもので、、、勉強不足ですね。すみません。

具体的には、NodeでWEBからスクレイピングしてきた住所リストから、経度緯度を抽出
→ファイルに書き込む
→そのファイルを読み取り、htmlにMapを表示させる

という機能を書こうとしています。その、「ファイルに書き込む」前段階、経度緯度を抽出する方法で躓いているといった感じです。

Nodeではhtmlは使えない(私の技術では)ので、javascriptのファイル一枚だけで完結させたコードを書きたいのです。
なので、「javascript内だけで、APIキーを書く方法」「経度緯度を出力する方法」が知りたかったのです。
わかりにくくてすみません

ですがそもそも、APIキーを入れたhtmlで、動かしたところ、経度緯度が動かないということは、
APIキーではなくて、経度緯度を動かすところの方に問題があるということになります。

[Kuro_Rubbit]

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<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>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

以上のようなコードの場合、「あたり」か「はずれ」、どちらかが表示されていなければおかしいですが、どちらも表示されていないです。「やったー」は問題なく表示されます。

[退会済みユーザー]

・そのコードはNodeで実行したものの一部ですか？それともhtmlファイル（またはjsファイル）等に書いて、そのhtmlファイルを直接ブラウザで開いたもののどちらですか？

・そのコードを実行したとき、ブラウザのデベロッパーツールのコンソール画面や、開発側のコンソール画面に一切何もエラーや他の情報が表示されていないという理解でよろしいでしょうか？

Answer 2

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

Comments

[Kuro_Rubbit]

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

[shin2]

失礼しました

[Kuro_Rubbit]

いえいえ〜

Answer 3

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

Comments

[Kuro_Rubbit]

やっぱりエラーが起きてしまいます。。。

オーバーフローに気を使って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
ーーーーーーーーーーーーーーーーーーーーーーーーー

[KEMONO.PANTSU]

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

[Kuro_Rubbit]

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

[KEMONO.PANTSU]

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

[Kuro_Rubbit]

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
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で間違いありません

[KEMONO.PANTSU]

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]

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

[KEMONO.PANTSU]

😄