簡単!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

最近の投稿

アイキャッチ
ワードプレス管理画面にログインできない対処法

今回はワードプレスについてです。 先日、管理画面には入れなくてかなり焦りました。ページは普通に表示されているのですが、管理画面には一切入れず、ページは機能していませんばかり。。。。 サーバー...

25 Mar 2017

アイキャッチ
Git最初の一歩

今回は分散型バージョン管理システムのgitについてです。ギットと読みます。 [公式サイト](https://git-scm.com/) ファイルのバージョン管理と思っていただければいいと思い...

18 Mar 2017

アイキャッチ
web-makerクロームエクステンション

すぐにJavascriptやcssを試して見てみたいというときがありますよね?そんなときはweb-makerが役立ちます!マークダウンも試せます、ちなみにクローム限定です。 すぐにjavasc...

14 Mar 2017

アイキャッチ
ドメイン移管について

ドメイン移管についての手順です。頻繁にすることでもないので忘れがちなので備忘録をかねて書き記しておきます。 ドメインの移管される側と移管する側の立場になって考えていきます。 仮定として佐藤さ...

07 Mar 2017

アイキャッチ
リンクタグの_blankについて

今回はちょいメモです。最近はあまりリンクにtarget="_blank"をつけることはなくなったのですが、これをする場合はrel="noopener noreferrer"をつけた方が良いという...

25 Feb 2017

著者

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

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

フッターイメージ