GoogleMapで使うAPIキーの取得

2018年9月5日2019年1月20日

結構昔に試したっきりでだいぶ変わっていたのでGoogleMapを使うまでの流れを確認。

必要な物

1. Googleアカウント
2. APIキー

Googleアカウントの取得

事前にアカウントを取得しておく。

APIキーの取得

次のページからAPIキーを取得する。
Google Maps Platform

1. [使ってみる]を選択。
2. ポップアップウィンドウのいずれかをチェック入れて[CONTINUE]を選択。
3. Create a new projectからproject名を指定してNEXTを選択。
4. プロジェクトの請求先アカウントを設定する。
5. クレジットかデビットカードしかだめそう
6. Googleマップぷらっとフォームの有効化から次へを選択する。
7. 準備ができたらAPIキーが表示されます。
8. メニュー表示/サイドメニュー/APIとサービス/認証情報でAPIキーの確認ができる。
9. 作られたAPIキーを選択/キーの制限/アプリケーションの制限を指定する。
10. 今回WEBサイトで使用するのでHTTPリファラーを選択する。
11. このHTTPリファラーからのリクエストを受け入れるに自身のサイトアドレスを指定する。
12. 保存で完了

GoogleMapを表示する

サンプルコード

<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'),{
  center: new google.maps.LatLng(35.681167, 139.767052), // 地図位置を東京に指定
  zoom: 15 // 地図のズームを指定
});
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initMap" async defer></script>

<div id="map" style="width: 100%; height: 300px;"></div>