プログラミング

【コピペOK】google map apiの基本的な使い方プラスαを解説します。

 

「google map apiの使い方がよくわからない」

こんな疑問に答えます。



 

現在筆者は、google map apiを使った自分のwebサービスを開発しています。

こういった経験から記事を書いていきますね^^

この記事を読むことで基本的なgoogle map api の使い方だけでなく周辺のスポット検索や、自分の現在地を取得の方法がわかるようになります。

Google Mapを使いこなしたい!!、という方はじっくり記事を読み込んでください!!

まずはGoogle Mapを表示してみよう

  • 手順① : APIキーを取得する
  • 手順② : Google Mapを表示する

これだけでGoogle Mapを表示することが出来ます。

手順① :APIキーを取得する

Google Maps Platformの「使ってみる」をクリックすると以下のような画面になります。

「Pick product(s) below」とあるので選びましょう

 

次に、「Select or create project」ですが、「Create a new project」を選択します。
既存のプロジェクトを使いたい場合、そのプロジェクトを選択してください。

プロジェクトのデフォルトがMy Projectとなっているので、プロジェクト名を変更します。
今回は「gaogao」としました。

 

最後に、「Set up your billing」に進みます。ここでクレジットカードの情報が必要です。案内に従って記入しましょう。毎月200ドル分は無料で使用することが可能なので、勉強に使用する分には、お金はかからないと考えて良いでしょう。

なお、料金体系について詳しく見たい方は以下の記事に詳しく書いてあったので気になるという方はご覧ください。
Google Maps APIが新しくなる!Google Maps Platformの料金体系と必要な設定変更

 

クレジットカードなどの情報を記入し終えるとこのような画面に飛びます。これで、apiキーが生成出来ました!! google mapを表示するときに必要なので、コピーしてメモしておきましょう。

手順② : Google Mapを表示する

次にGoogle Mapを表示して見ましょう。といっても表示するだけならとてもカンタンで、
このページのコードを一旦全てコピーして、以下の様に編集するだけです。

注意する点としては、

「YOUR_API_KEY」と書いてあるところに、先ほど取得したapiキーを埋め込むことです。

 

ここまでで、この様にGoogle Mapが表示出来ます。

指定した緯度経度、周辺のカフェを表示してみよう

せっかくですので、自分の現在地を取得して、周辺のカフェを表示するプログラムを書いてみましょう。

まずは、指定した緯度経度周辺を調べることが出来るようにします。

大まかな手順としては以下の通りです。

  • 手順① : Places APIを有効にする
  • 手順② :指定した緯度経度周辺のカフェを調べる

手順① : Places APIを有効にする

Places APIとは、施設、地理的位置、有名なスポットとして定義されている場所の情報を取得できるサービスです。

今回の場合はこちらの「Nearby Search Requests」利用して、カフェを取得します。

まず、Places Libraryのページにアクセスして、Go to the Google Cloud Platform Consoleをクリックします。

するとこんな画面になるので、選択をクリック。


ここで先ほど作成したプロジェクトを選びます。自分の場合だと「gaogao」を選択します。

 

するとAPIダッシュボードというページに飛ぶので、「APIとサービスの有効化」をクリックし、「Places API」と検索してください。

 


「有効にする」をクリックしましょう。これでPlaces APIが使えるようになります!

手順② :指定した緯度経度周辺のカフェを調べる

さて、それではPlaces Libraryのページ「Nearby Search Requests」のを参考にしつつ指定した緯度経度周辺のカフェをGoogle Mapに表示するスクリプトを書いていきましょう。

「libraries=places」を付け加えるのを忘れないでください。

このように指定した緯度、経度(33.8665433,151.1956316)の半径1500m周辺のカフェが取得できます。

自分の現在地を取得して、周辺のカフェを調べる


ここまできたら後はカンタンで、自分の現在地の緯度と経度を取得してそこから検索できるようにしてあげるだけです。

Geolocation APIを使って現在地を取得します。(参照:Geolocation)

 

「get current location」というボタンをhtml側で用意し、ボタンを押すと現在地の取得が始まるようにしました。

 

後、jsの記述が長くなってきたのでjsを別ファイルに分けました。


このように、現在地取得のボタンを押すと、自分の現在地のマーカーと周りのカフェが表示されるようになりました。

さらにアイコンをクリックするとそのカフェの名前も表示できるようにしました。

 

ABOUT ME
リク@学生海外エンジニア
バンコクで働く大学生エンジニア兼講師。海外経験を積むため休学して元LINEの天才エンジニアに弟子入りしタイに移住。3ヶ月でWEBサービスを開発。その経験からプログラミング学習の秘訣を書きます。
フリーランスエンジニアになって自由に生きよう

【大学生へ】

「 毎日満員電車に乗って、クタクタになるまで働いても、給料はスズメの涙… 」

あなたがこのまま何も努力をしなかった場合、必ず上記のように、ツマラナイ毎日を過ごすことになります。ところが、今からでもこんな状況から脱出する方法があります。

それが、フリーランスエンジニアになることです。ぼくは文系大学生からフリーランスエンジニアになりましたが、ぶっちゃけ最高です。

フリーランスエンジニアになって自由に生きたいという方は、ぼくが紹介している記事を読んでみてください。

大学生がフリーランスエンジニアとして働いてみた感想【最高】