2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Google Maps API のAPIキーの取得方法

Posted at

概要

やったこと

Map表示用で有効化するAPI

Maps JavaScript API

  • JavaScriptからGoogle Mapを表示する用のAPI

呼び出し方

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

設定する制限

  • アプリケーションの制限
  • APIの制限
デフォルトで、API キーは制限されていません。制限されていないキーは、ブラウザ内などから公開されたり、
キーが置かれているデバイスからアクセスされたりする可能性があるため、安全ではありません。
キーを保護するために、制限を追加することをおすすめします。

アプリケーションの制限

  • 利用できるアプリケーションを制限する
  • ドメインやIPを登録できる

APIの制限

  • 利用できるAPIの種類を制限する

参考URL

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?