Google Map APIのサンプルを動かしたい!

Pocket

 なんとなくGoogleAPIを動かしてみたいと思い手を動かし始めたものの、なかなかうまくいきませんでした。試行錯誤をして、とりあえずGoogle Map APIのサンプルを動作させることができましたので備忘録として書きます。
 私は知識なしの初心者ですので、藁にもすがりたい方のみ参考にされてください。ベテランの方が読んでくださっていましたら、なにか勉強方法などアドバイスを頂けたら幸いです。

目標

Google APIの使い方で紹介されているサンプルのJavaScriptのものをとりあえず動作させることが目標です。
サンプルがあるURLはこちらGoogleMapAPIのDistance Matrix APIについての記事で紹介されていサイトです。「https://developers.google.com/maps/documentation/distance-matrix/distance-matrix」ここで紹介されている1つめのサンプルコードを動かしたいです。

必要なこと

・Node.jsのインストール
・axiosのインストール
・サンプルプログラムをコピペしたJavaScriptファイル(.js)

実際にやってみたこと、考えたこと

・Node.jsをインストールする
 必要そうだと考えたからインストールしてみました。
 英語のサイトで若干抵抗はありましたが、特に問題なくインストールできました。
 インストールしたサイトはここです。
 https://nodejs.org/ja/

・axiosのインストールする
 サンプルプログラムを動かそうとすると、axiosのところでエラーが出たためこの文字列で検索したところ、導入する必要がありそうでしたのでインストールしてみました。
 インストール方法は下記URLの記事を参考にしました。https://prograshi.com/language/vue-js/axios/

・JavaScriptファイルを作成する

 なにもわかっていない私が紹介するのも恥ずかしいのですが、HTMLではなくJavaScriptファイル(.js)を作成しここにサンプルコードをコピペします。
 サンプルコード内にあるAPIKeyをご自身のものに置き換えることを忘れないでください。

・実行する

私はVisualStudioCodeを使って実行しました。
Windowsのコマンドプロンプトからも実行できました。
コマンドは「node ファイル名(.js)」です。

実行結果のコピペが下記です。

C:\デスクトップ>node test.js
{“destination_addresses”:[“New York, NY, USA”],”origin_addresses”:[“Washington, DC, USA”],”rows”:[{“elements”:[{“distance”:{“text”:”225 mi”,”value”:361947},”duration”:{“text”:”3 hours 56 mins”,”value”:14145},”status”:”OK”}]}],”status”:”OK”}

それらしい結果が表示されました。満足。

おわりに

 とりあえずサンプルを1つ動かせました。
 次の目標は、まったくない知識を勉強で補いつつ、取得したデータを使ってなにかためになりそうな出力を行うことです。
 以上です。背伸びした内容なのにざっと適当な書きぶりで作成した記事を最後まで読んでくださりありがとうございました。
 パソコンについて一緒に勉強してくれる友達が欲しいのでTwitterなどで連絡いただけたら嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です