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

サイト内検索

最近の投稿

アイキャッチ
WordPress内でFTP操作ができるプラグインFile Managerのご紹介

今回はワードプレスプラグインFile Managerのご紹介です。これはどんなプラグインかと申しますと、ダッシュボードにFTPソフトが入ったようなプラグインです。FTPソフトがなくてもワードプレ...

26 Nov 2018

アイキャッチ
WordPressでPHPの値をJavaScriptファイルへ渡す方法

今回はワードプレスの値をJavaScriptに渡す方法です。ワードプレスからじゃなくてPHPからJavaScriptへ値を渡す方法もご紹介します。 PHPの値をJavaScriptで処理を行う...

22 Nov 2018

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

著者

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

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

フッターイメージ