簡単!5分で取得!Google Maps APIキー取得方法

Dec 18, 2016

簡単!5分で取得!Google Maps APIキー取得方法

2016-12-18 最終更新日:2016-12-18
blog web browser map グーグルマップ

グーグルマップではよくgmaps.jsと一緒に利用してきたのですぐにAPI登録はしてしまいました。登録自体は簡単ですが一度登録するとあとはキーを記入するだけです。ですので登録方法を忘れそうなので書き記しておきます。

今までは必要なかった設定が必要になってきましたが、一度設定すれば後はAPIキーだけ取得すればそれを使って使い続けることが出来るのでさくっと取得してしまいましょう。わかってしまえばたぶん5分もかかりません。

キーだけあれば設定は終わりです。

API取得方法

グーグルでgoogle apiと検索すると最初に出てきます。Google API Consoleというのがでてきますのでこちらをクリックします。

googleapi

下記のGoogle API Console公式サイトからでも入れます。

Google API Console

googleapi

Googleのアカウントが持っている人がほとんどだと思いますが、持っていない人はアカウントを作成してください。

ログインしないと取得できません。ここでログインします。

googleapi

このような画面が出てきますが、同意して続行をクリックします。

googleapi

最初にプロジェクトを作成します。

googleapi

プロジェクト名は何でも良いです。とりあえずこのままMy Projectで作成します。因みにそんなに必要ないと思いますけどプロジェクトは複数作成できます。

googleapi

しばらく待ちます。

googleapi

完了したら次は認証情報を作成します。一番上のAPIキーをクリックします。

googleapi

APIキーを作成しましたと表示されます。これで完了ですが、キーを制限して利用した方が良いのでキーを制限をクリックします。閉じるを押しても後から編集できます。

googleapi

キーの名前は何でも良いです。googlemapとかにしておくとわかりやすいですね。キーの制限はHTTPリファラー(ウェブサイト)にしておきます。そしてURLを指定します。はワイルドカードが利用できます。.its-office.jp/*とかにしておくと、サブドメインでもドメイン以下でも利用可能という意味です。its-office.jp/companyとか指定するとそのURLしかこのAPIが効かないと言うことです。URLは複数登録できますし、APIキーも複数作成できます。

googleapi

APIの名前をクリックすると後で編集できます。複数のAPIキーを作成も出来ます。

あとはこのキーを利用して下記のようにxxxxのところにkeyを入れるとできあがりです。

 <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxx"></script>

以下はグーグルマップ表示例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>GoogleMap</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0RHtlc3VxgvwY_Vu4EG6fZirWnZ-ifzk"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.min.js"></script>
  <style type="text/css">
    #map {
      width: 800px;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
  var lat = 35.789966;
  var lng = 139.821961;
    var map = new GMaps({
      el: '#map',
      lat: lat,
      lng: lng
    });
    map.addMarker({
      lat: lat,
      lng: lng,
      title: '東京スカイツリー',
      click: function(e) {
        alert('マーカークリックしました!');
      }
    });
  </script>
</body>
</html>

googleapi

参考になれば幸いです。


∞Tadashi Suyama∞

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
速さ・時間・距離の計算

さて、最近は寒くなってきましたね。日本海側は大雪で大変な状態になっています。 外にも出られずちょっとした運動もしずらいですね。室内運動かジムに行くということになりますね。 そんなことを考えて...

14 Jan 2017

アイキャッチ
複数のチャットサービスをまとめてひとつで管理する方法

GmailやOutlook、Slackやチャットワークなどを使っている方も多いかと思います、このサービスを一元管理するアプリがありました。その名もFranz(フランツ)です。[⇒公式サイト](h...

07 Jan 2017

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は天候も良く人も多かった気がしますね。 勝田神社の夜中に行って参りました。大晦日深夜の初詣は何十年ぶりのことでしょ...

04 Jan 2017

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/30〜1/3までお休みでございます。 1/4日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/30-1/...

29 Dec 2016

アイキャッチ
いざというときのためのバックアップ

皆さん、こんにちは。クリスマスも終わり、あっという間に年末ですね。 データ整理とバックアップしてますか? 私はやっておりますが、先日不幸なことになりました。NASが故障してさらに中に入っている...

25 Dec 2016

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ