Google Maps APIキー取得方法
投稿日：
Google Maps APIキー取得方法
Google Maps APIを取得する前に、Googleのアカウントを取得してください。
こちらから取得します → https://developers.google.com/maps/web/
下図のような画面になると思いますので、右上にある「キーの取得」をクリックします。
1.Maps Web APIの有効化
下図のような画面が出たら「Yes」を選択して右下の「CREATE AND ENABLE API」をクリックします。
次に、下図のような画面になって有効化の準備が進みます。
有効化できればAPIキーが表示されます。
次に、枠内にある「API Console」をクリックしてください。
2.API キーの設定
上図の画面が表示されたら、①のHTTP referrers (web sites)を選択して、キーの制限をします。
これをしなかったら他人が自分のAPIキーを使って利用することができます。
次に、②のところに、Google APIキーを使いたいサイトを登録します。
例えば、
*.example.com/* www等のサブドメインがついた example.comと下位のURL
example.com/* example.com と下位のURL
入力後、「保存」をクリックしてください。
*.example.com/* に関しては、最初の*が入らないのも作っておいた方が良いかも？
3.APIキーの追加
続いて、追加（有効化）しないとうまく表示されない場合がありますので下記の項目などは追加（有効化）してください。
上図にある左メニューの「ライブラリ」から表示されますので、必要な項目をクリックしてください。
例：
Google Maps Directions API
Google Maps Geocoding API
Google Maps Elevation API
Google Maps JavaScript API
Google Places API for Android
Google Places API for iOS
APIキーの使い方
Google Mapsを表示する場合、ページのヘッダー(又はフッター又はbody内)に 先ほど追加したAPIキーを読み込むコードを記入します。
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXX"></script>
以上でGoogle マップが表示されると思います。
関連記事
-
-
メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …
-
-
自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …
-
-
WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルまたは、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作っ …
-
-
動画も一緒に表示させる方法 動かしてみた方法は以下の通りです。 1.先に動画を表示して、次に画像を表示する方法 jQuery(document).ready( …
-
-
ホームページから予約が取れる時代が当たり前になってきたんですねー 私もお客様からお問い合わせがあり、「予約が取れるようにして欲しい」っていうことで、数件取り入れたことがあります。 でも、 …
- PREV
- IEでスライダーslickのフェードはチカチカする
- NEXT
- Webサイトとドローン
