Google Maps APIを使ってみる

せっかくGoogle Cloud Platform使えるようにしてみたし、試しにGoogle Maps APIを使ってみようと思う。
ブラウザから出る位置情報へのアクセスを許可すると、この下にGoogle Mapが表示されるハズ。
 

 

 

やったことまとめ。
 

1.GCPに新しいプロジェクトを用意してみる。

「新しいプロジェクト」を作ってぇ。

 

2.Maps JavaScript API を有効化する。

おぉ、さすがメジャーなAPI。検索しなくても上にいるわ。

 

3.認証情報を作成する。

ポチポチっと押すと・・・API Keyが払い出されましたぁ。

一応、誰でも使えるようになってしまうと困るから制限事項ってところから「HTTPリファラー」で「https://yizm.work/」からのアクセス時のみ有効にしておこう。

 

4.Google Mapを読み込むタグを用意する。

ふむ。骨組みはこんな感じでいいのかな。

 

5.せっかくだから自分の現在値を取得して地図読み込んでみる。

ふむふむ。なんか「navigator.geolocation」っていうのを使うと現在位置が取れるらしい。

navigator.geolocation.getCurrentPosition( successCallback , errorCallback , option)

⇒ 現在の位置情報

navigator.geolocation.watchPosition( successCallback , errorCallback , option)

⇒ 位置情報の監視開始、変更検知時にsuccessCallback実行

navigator.geolocation.clearWatch( watchId)

⇒ 位置情報の監視停止

 

6.請求情報を設定してなかったからエラーでた。

請求情報を設定してサービスアカウントを有効化しました。

 

ん~。。。よく見るやつだ。

 

タグ:

「Google Maps APIを使ってみる」に2件のコメントがあります

コメントを残す

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