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

サイト内検索

最近の投稿

アイキャッチ
正規表現はじめの一歩

今回は正規表現です。たまにしか使わないのですぐに忘れてしまいますのでまとめておきます。 文字列の検索時にある条件にマッチしたものを表示させるものです。 エディターにも検索条件に正規表現という検...

07 Oct 2018

アイキャッチ
ワードプレス記事一括削除する方法

ワードプレスで記事を一括削除する方法が意外と簡単なことに気がつきました。記事を大量に削除する場合はあまりなかったのですが、調べてみたら簡単なことでした。 大量のデータをインポートする時に失敗し...

30 Sep 2018

アイキャッチ
メールはGmailに限る

大分間が空きました。。。さて今回はGmailをご紹介します。最近ではチャット系アプリが主流ですが、それでもやはりメールはなんだかんだで使います。いつも悩まされるのはスパムメールですが、Gmail...

25 Sep 2018

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

著者

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

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

フッターイメージ