はじめに

お世話になります、hosochinです

今回は 「Google Maps APIを使ってブラウザに地図を表示」 を試してみたいと思います

目次

• やってみる

やってみる

前提としてgoogleアカウント作成済みです👍

ログイン状態からgoogle Cloud Platformにアクセスします

ライブラリ検索画面から「Maps JavaScript API」を検索、有効にするボタンをクリック

Google Maps PlatformからMaps JavaScript APIが有効になっていることを確認します

次にAPI Keyを作成します

「APIとサービス」から「認証情報」を選択

「認証情報を作成」からAPIキーを選択、「APIキーを作成しました」と出るので右下の「キーを制限」を選択します

今回は「APIの制限」からMaps JavaScript APIを選択し保存をクリック

ここまでで一旦APIにリクエストできるようになりますが、請求先情報を設定しないと正しくマップが表示されなので請求先情報を設定していきます

左メニューから「お支払い」をクリックし、「請求先アカウントを管理」を選択

「請求先アカウントを追加」をクリックし、住所とかクレジット情報とか入力していきます

追加し終えたらマイプロジェクトというタブに切り替えて「アクション」>「お支払い情報を変更」>先ほど作成した請求先アカウントを紐づければ完了です😀

さあこれで準備はだいたい整いました

Maps JavaScript APIの概要を参考にwebブラウザで表示してみます

sample.htmlのYOUR_API_KEYを作成したAPIキーに置き換えるだけで他は全部コピペでOKです

Maps JavaScript APIのレスポンスを表示できました！

ちなみに…請求先情報を設定しないとこんな感じになります😅