WEBデザイン制作・パンフレットデザイン制作
facebookrss

NETA

コラム

2018

9/14

「Google Maps API」を使う場合の、APIキー取得と設定方法

「Google Maps API」を使う場合はAPIキーが必須です

 
普段から大変お世話になっているGoogle Maps。日本の全国のみならず、世界中のロードマップを自由に閲覧できるGoogle Maps(以下、グーグルマップ)は、私達の生活を一変させ、より便利でより快適にしてくれました。
 
個人・企業問わず、オフィシャルサイトへの貼り付けも自由に行なえ、見に来てくれたネットユーザーに、より多くの、そしてより深い情報提供ができるようになったのも、グーグルマップのおかげです。
 
特に、我々、ウェブクリエイターにおいては、Googleが提供しているグーグルマップの仕組みを使って、よりデザイン性の高いビジュアルに変えたり、建物の位置をマーキングしたり、より高度で多彩な使い方もできるようになっています。そしてその際に使用しているのが「Google Maps API」です。「Google Maps API」を利用することで受けられる恩恵は、非常に大きなものとなりました。
 
しかし、これまでは自由に「Google Maps API」を使用しており、「APLキー」がなくても表示されていましたが、2018年6月からは、Googleの仕様変更があり、「Google Maps API」で使用する際には、APIキーの取得が必須になりました。よって、「APIキー」がついていないと正常に表示されません。よって、必ず取得する必要があります。さらに、このAPIキーの取得方法も少し変更になっていますので、本コラムでご説明いたします。
 

Google Cloud Console にアクセス

 
まず最初にGoogle Cloud Consoleにアクセスします。
https://cloud.google.com/ 
 

 
ページ右上に『コンソール』ボタンがありますので、そちらをクリックします。この後は、Googleのアカウントでログインが必要になりますので、GoogleにログインするためのID・パスワードを用意しておいてください。ログインするとGoogle Cloud Consoleのホーム画面に入ります。
 

 
上記の画面は、すでに「APIキー」を取得したプロジェクトが入っている画面ですが、何も取得していない状態の場合には、もう少し画面がシンプルになっていますのでご注意ください。次に、左上の「プロジェクトを選択」ボタンをクリックしてダイアログをだします。
 

 
その後、右上の新規プロジェクトを追加します。

 
プロジェクト名を入れて「作成」ボタンをクリックします。

 
仮に「Test Project」と入れた場合には、左上にプロジェクト名がでます。複数のプロジェクトを管理する場合には、ここで表示の切り替えを行います。次に「APIの概要」をクリックしてください。

ジャンプしたページに「APIとサービスの有効化」というボタンがありますので、ここをクリックします。
 

 
「Google Maps JavaScript API」をクリックします。もしも、ここに「Google Maps JavaScript API」がなければ、右の「すべてを表示」として出すか、上の検索バーに「Google Maps JavaScript API」と入れて表示させてください。

 
その後、「有効にする」をクリックしてください。

 
こちらの画面に遷移したら、「認証情報」のタブをクリックし、「認証情報を作成する」ボタンをクリックします。

 
「認証情報を作成」ボタンを押すと、3つの選択肢がでますので「APIキー」を選択してください。

 
すると「APIキー」が取得できます。こちらが「APLキー」です。


 

APIキー制限

 
次にセキュリティ面の設定をしておきます。万が一、ご自身のAPIキーが漏れてしまうと悪用される可能性があります。非常に重要な情報ですので、他で利用されないよう制限をかけます。「APIキー」の右側にある「えんぴつマーク」をクリックします。
 

 
ウェブサイト上で使う「APIキー」ですので、「HTTPリファラー(ウェブサイト)」を選択します。その後、「APIキー」を使用するウェブサイトのURLを入力します。この際、URLをそのまま入力するのではなく、ドメイン名をアスタリスク(*)で囲みます。画面に入力の見本があります。

http://*.www.no-b.co.jp*
この設定は複数指定できますので、複数ある場合は追加された行にいれていきます。その後、下部の「保存」ボタンを押します。
 

 
さらに安全に利用するため、「API制限」も設定可能です。「select API」から「Google Maps JavaScript API」を選択して、下部の「保存」をクリックします。
 

 
こちらで完了です。

 

一度設定した「APLキー」を確認する

 
一度、取得した「APLキー」を確認する場合は、毎回、まず最初にGoogle Cloud Consoleにアクセスします。
https://cloud.google.com/ 
 

 
上部のプロジェクト選択から、見たいプロジェクトを選択しジャンプします。その後「APIの概要」をクリックします。
 

 
左の「認証情報」をクリックすると、このプロジェクトで取得した「APIキー」が見られます。
 

 
いかがでしたか?どうぞ、「APIキー」の取得時にはご参考ください。

販売促進のネタ

2018

9/14

「Google Maps API」を使う場合はAPIキーが必須です   普段から大変お世話...

詳細を見る
詳細を見る

2018

9/06

先日の「販促のネタ」コラムにて、『常時SSL化の必要性』について書きました。   こちらの...

詳細を見る
詳細を見る

2018

9/05

印刷業界においても、数年前から価格破壊が起こり、ネット通販で格安印刷できるサービスが乱立しています。...

詳細を見る
詳細を見る

2018

8/21

中小企業にウェブサイトは必要不可欠   当社では、会社を立ち上げる(起業)際に必要な、販促...

詳細を見る
詳細を見る

2018

8/17

当社では、様々な紙媒体のデザイン制作・印刷を承っておりますが、ときどき、制作+印刷のみならず、その後...

詳細を見る
詳細を見る

2018

7/25

  『初めてパンフレットを作成するので、分からない』という方々からのご質問で、特に多いのが...

詳細を見る
詳細を見る

2018

6/25

  <目次> 1.Googleが『HTTPS』のサイトを良質と判断しています 2.そもそも...

詳細を見る
詳細を見る

2018

6/06

※以下、ブログ記事は、いかなる理由においても無料複製・転載を禁じます。   前回、『医療広...

詳細を見る
詳細を見る

2018

5/09

子どもがなりたい職業と親世代のギャップ   毎年、子どもの教育に携わる機関から、『子どもが...

詳細を見る
詳細を見る

2018

4/18

中小企業の倒産で一番多い原因は、販売不振   企業活動の中で、最も重要であり、かつ譲れない...

詳細を見る
詳細を見る

2018

3/12

※以下、ブログ記事は、いかなる理由においても無料複製・転載を禁じます。 今年(2018年)6月より医...

詳細を見る
詳細を見る

2018

3/09

2018年の幕開けから、あっという間に2ヶ月が過ぎ、そして3月に入りました….季節はすっ...

詳細を見る
詳細を見る

2018

1/18

※本コラムは、当社の顧客へのメールマガジンの内容を一部編集して公開しています。   横浜デ...

詳細を見る
詳細を見る

2017

12/20

20年間、脱下請け   最近、あるメディアで経営コンサルタントの浜口隆則さんという方を知り...

詳細を見る
詳細を見る

2017

10/31

週休3日制をはじめました   実は当社では、今年の8月の末より平日の金曜日をお休みにし、週...

詳細を見る
詳細を見る