GoogleMapsAPI - デジタルチャイルド日記

GoogleMapsEmbedAPIを扱う機会があったので、そのメモです。

GoogleMapをサイトに埋め込む方法はいろいろありますが、無料で無制限の方法としては、GoogleMapsEmbedAPIがあります。(コンソールをみると実際には制限があるようです。)

詳しくは以下

実際にGoogleMapsEmbedAPIを使うための手順は以下です。

Googleアカウントを作成する為には、電話番号かスマホ用のメールアドレスが必要になる場合があります。

以下のページで作成しましょう。

アカウントの作成が終わったら、次はGoogleのサービスを受けるために、GoogleDeveloperConsoleへログインします。

こちらでID、パスワードを入力すると、管理画面にログインできます。

初回だと、プロジェクト名を記入する画面がでてくるかも・・・

※前のことなので忘れました。

f:id:digitalchild:20180304042630p:plain

プロジェクト名を入力すると、管理コンソールが表示されます。

ダッシュボードが表示されたら、左メニューからライブラリを選択して、ライブラリ一覧画面を表示します。

Mapの一覧が表示されると思いますので、その中からGoogleMapsEmbedAPIを選択します。表示されていなければ、右のほうの「すべて表示」を押下すると、Mapのライブラリがすべて表示されますので、その中から探してみてください。

f:id:digitalchild:20180304044706p:plain

遷移先の画面で、「有効にする」をクリックします。

※遷移先の画面の内容はよく確認しておいてください。

追加が完了すると、GoogleMapsEmbedAPIが、ダッシュボードの下部の一覧に追加されます。

f:id:digitalchild:20180304042949p:plain

次に認証情報を作成します。この中でAPIKEYを作成することになります。

左メニューから、認証情報を選択すると、画面が切り替わり以下が表示されます。

f:id:digitalchild:20180304035823p:plain

認証情報を作成を押下して、APIキーを選択します。

しばらくすると、APIが作成されます。

GoogleMapsEmbedAPIのURLパラメータにのせるAPIキーがこれで完成です。

そのままでは、だれでも使えるAPIキーになってしまうので、アクセス制限をかけます。キーが表示されている画面で、「キーを制限」をクリックします。

APIキー画面に遷移しますので、キーを制限項目に制限する内容を記入します。

f:id:digitalchild:20180304041909p:plain

以上で、APIキーの設定は完了です。

発行したキーを使って、地図を表示するためには、以下のようなiframeをHTML内に記述します。

東京スカイツリーを表示すると以下のようになります。