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

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

2016-12-18 最終更新日:2016-12-18

グーグルマップではよく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∞

google browser map グーグルマップ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

最近の投稿

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

アイキャッチ
MacのイラストレータデータをPDFに変換した容量を削減

なぜかMacのイラストレーターからPDFに保存した際ってほとんど容量変わらないですよね。とりあえず適当にイラストレーターデータを作ってみました。画像を入れてイラストデータ入れてtestdata....

04 Nov 2017

アイキャッチ
Macで画像の変換やリサイズ一括処理の方法

Mac標準で画像一括処理が出来るんです。フォルダアクションを使うことでjpgからpngやpngからjpgが可能です。 やり方は簡単です。アクションを加えたいフォルダを右クリックでサービスからフ...

27 Oct 2017

アイキャッチ
有名なアイコンフォントをpngで使う方法

サイトのカンプを作るときに最近ではアイコンフォントを使うことはもう当たり前になっていますが、アイコンフォントをフォトショップやスケッチに埋め込むときに便利なサイトをご紹介します。 fa2png...

20 Oct 2017

アイキャッチ
500 Internal Server Errorのcgiエラーの対処方法

久しぶりにcgiのフォームを使いました。昔はよくフォームならcgi(perl)だったのですが最近はほとんどワードプレスのプラグインだけで行うことが多くなりましたがまだ少なからず対応する機会がある...

14 Oct 2017

著者

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

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

フッターイメージ