【HTML】Google Map APIの実装方法【DIVE INTO CODE】

投稿日:

「DIVE INTO CODE」学習記録 #25

こんにちは。

25日目。API実装練習。Googleマップをhtmlに挿入する。

学習内容

【API実装】

  • APIとは
  • APIキーの取得
  • Google Map APIの実装

 

感想

今回はAPI実装練習。

 

実装したAPIはGoogle Map 。

復習も兼ねて手順を書いていきます。

 

1、事前準備

◯ Googleアカウントを持っていること。

GoogleのAPIを利用する場合、「Google Cloud Platform」や「Google Developers Console」等の管理画面へのアクセスが必要になります。Gmail等使われていれば、そのアカウントでも大丈夫です。

 

◯「Google Cloud Platform」管理画面へのアクセス。

Google Cloud including GCP & G Suite — Try Free | Google Cloud

今回はGoogle Cloud Platformで説明します。上記リンクへアクセスすると、

Google管理画面

 

このような画面が開かれます。

赤い丸がついている真ん中の「コンソールを開く」ボタンもしくは画面右上の「コンソール」をクリック。

 

アカウント確認画面

 

使用するアカウントを選択し、次へ進む。

 

同意画面

 

利用規約の更新が出る場合は、右下「同意する」をクリック。

以上で完了です。

 

2、APIキーの取得

○「Google Maps JavaScript API」のAPIキーを取得する

次はキーの取得が必要になります。今回は「Maps JavaScript API」のAPIキー取得までの流れになります。

 

Googleアカウントでログインし、管理画面を開くと、

 

プロジェクトの選択

 

上のような画面が現れているかと思います。

 

まず、「プロジェクト」というものを新規作成しなくてはなりません。プロジェクトごとにAPIの取得や管理ができます。

今回はとりあえず最初の「プロジェクト」を作成します。

 

 

上の写真の赤い丸で囲んだ部分の「プロジェクトの選択」をクリックすると、

 

「プロジェクトの選択」画面になります。

ここで新しいプロジェクトを作成することができます。

 

プロジェクト作成画面1

 

右上の「新しいプロジェクト」をクリックし、

「プロジェクト名」を自由に入力(4文字以上みたいです。)して作成ボタンを押す。

 

プロジェクト作成画面2

 

管理画面トップに遷移するので、

プロジェクトがちゃんと作れているか確認します。

また「プロジェクトの選択」をクリックして見ます。

 

プロジェクト確認

 

先ほど作成した名前があれば大丈夫です。

プロジェクト名をクリックして作成したプロジェクトを選択しましょう。

 

プロジェクト確認

 

ここからAPIキーを取得していきます。

 

プロジェクト名が変わったことを確認し、

左のカラムにある「APIとサービス」をクリック。

 

APIキー取得1

 

 

続いて左カラムの上から三番目、「認証情報」をクリック。

 

APIキー取得2

 

「認証情報」の画面に以下のような表示が出ます。

「認証情報を作成」ボタンを押す。

APIキー取得3

 

下に「APIキー」が出るのでクリック。

押すとAPIキーが生成されます。

APIキー取得4

 

この画面が出たら成功。

 

APIキー取得5

 

「キーを制限してください。」と警告が出ますが、設定しなくても実装練習はできます。

作成したAPIキーは、コピーしてメモしておくでもいいですが、管理画面からいつでも確認できます。

また名前についても変更が可能です。

 

これでAPIキーの取得は完了です。

 

2.5、【補足】お支払いの設定、無料トライアルについて

ここまででAPIキーの取得は完了しましたが、実際にこの後htmlに反映させるにあたり、お支払いの設定を管理画面上でしておかないと本番環境で使用できないことになります。開発環境では一応動作しましたが、「develpoment only」なる文字がマップ上に羅列する状態での実装となります。

 

Google Maps JavaScript APIですが、基本的には無料で利用できます。

価格とプラン Google Maps Platform

上記リンクに詳細が書かれております。

特に抵抗がなければ、お支払い方法の設定したほうがより実戦に近い実装ができると思います。僕は設定しました。

 

ざっとですが説明します。

設定をしない場合ここは飛ばしてください。

 

まず、Google Cloud Platform管理画面のホームから、

左カラムの「お支払い」をクリック。

 

お支払い設定

 

 

「請求先アカウントをリンク」をクリック。

 

お支払い設定2

 

「請求先アカウントの作成」をクリック。

 

お支払い設定3

 

国と規約同意を行い、「同意して続行」を押す。

お支払い設定4

 

住所等を入力したら完了。

 

お支払い設定5

 

以上です。

これで本番環境でも利用が可能になります。

 

 

3、HTMLファイルでのGoogle Map API実装

◯Maps JavaScript APIを有効にする。

まず管理画面で作成したプロジェクトにて、「Maps JavaScript API」を有効にする必要があります。

管理画面ホームより、「APIとサービス」をクリック。

 

Map有効化

 

 

「ライブラリ」をクリック。

 

Map有効化2

 

 

「maps」と検索。

Map有効化3

 

 

「Maps JavaScript API」をクリック。

Map有効化4

 

「有効にする」ボタンを押す。

Map有効化5

これで作成したプロジェクト内で「Maps JavaScript API」が有効化されました。
APIキーでGoogleマップが表示できます。

◯作成したAPIキーを使って実装する。

今度は実際に作成したAPIコードを使い、HTMLにGoogleマップを載せます。

 

ここでやるものは最も簡単な設定です。

実装の初歩の初歩です。

 

まずhtmlファイルを作成。

今回はAtomエディタに「google_map_api」ディレクトリを作り、その中に「index.html」を作成しています。

Atom画面
ここにコーディングするのですが、

Adding a Google Map with a Marker to your website

上記リンクへアクセスすると、

htmlコピペ
「Try it yourself」にコーディングがあります。

 

 

これをコピペします。

 

Atom画面2

 

下の方を見ると、

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

というコーディングがあります。「YOUR_API_KEY」の部分に先ほど取得したAPIキーを記入します。

 

コピペ後

 

プレビューで確認すると、

プレビュー画面

 

マップが出てきます。

今回使ったAPIキーは「お支払い設定」をしてない状態のものです。

写真の通り開発環境では出てきますが、「For development purpoes only」と一面に表示されてしまいます。

 

支払い設定をしたら、

プレビュー画面(支払い設定後)

 

綺麗に写ります。

 

今回オーストラリアが映ったのは、コピペしたコードの

var uluru = {lat: -25.344, lng: 131.036};

この部分に相当します。「lat」が緯度、「lng」が経度です。

ここの変数名や数値を変えれば、好きな場所にmapの中心を移せます。

 

指定した場所がmapの中心にくるのは、

var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});

このコーディングによるものです。

最後に書いてある「center: uluru」で定義していた「uluru」が真ん中に来ます。

「zoom」は数値を上げると狭域になります。

 

また、「mapの中心」と「マーカー(赤いピン)」は別物です。

var marker = new google.maps.Marker({position: uluru, map: map});

ここで定義したものがマーカーとして実装されてます。

 

 

基礎的な実装は以上となります。

 

mapのスタイルを変えたい場合、

スタイル自動生成ツール

上記リンクで簡単にスタイルデータを生成できるそうです。

 

 

 

今回はちょっと参考になりそうな記事風に書こうと思い、このような形で学習日記を投稿しました。

 

次回はオリジナルアプリ作成について要件定義からやっていきたいと思います。

以上ありがとうございました。

 

-DIVE INTO CODE
-, , , , , ,

Copyright© s u p ? , 2019 All Rights Reserved.