Google Maps JavaScript APIの使い方を現役エンジニアが解説【初心者向け】
初心者向けにGoogle Maps JavaScript APIの使い方について現役エンジニアが解説しています。Google社が提供している地図サービスを自身のウェブサイトに埋め込み・表示ができるAPIです。プロジェクトの作成方法やAPIの有効化・取得・設定方法、請求先情報を解説し実際に地図を表示させてみます。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。
Google Maps JavaScript APIの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
Google Maps JavaScript APIの使い方について詳しく説明していくね！
お願いします！
APIとは
APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略称です。とある一つの機能をJavaScript上で簡単に実現できるように作られた構造体のことを指します。
例えば、パソコンやスマートフォンなどでブラウザを開いたときに位置情報の使用を求められる場合があると思います。それはGeolocation APIというブラウザが用意しているAPIを使用しているからです。
このAPIは、ブラウザが位置情報を取得するための複雑なコードを別の言語（例えばC++）などでデバイスと通信しJavaScriptで取得できるようなものにするために変換してくれる構造になっています。
Google Maps JavaScript APIとは
Google Maps JavaScript APIはGoogle社が提供している地図サービスを自身のウェブサイトに埋め込み・表示ができるAPIです。
Google Maps JavaScript APIは様々なAPIを総称した名前であり各APIを使用することによって自身が設定した位置を初期で表示したり独自のマーカーを表示させたり、システム上で指定した区間のルート検索を自動で行ったりすることができます。
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
Google Maps JavaScript APIの利用方法
Google Maps JavaScript APIを使用するために準備するものが2つあります。
- Googleアカウント
- クレジットカード
が必要です。
まずは使用しているブラウザでGoogleアカウントにログインしておきます。
プロジェクトの作成
ログインしている状態で、以下のサイトにアクセスし、「プロジェクト選択」もしくは既存のプロジェクトを選択します。
プロジェクト名にデフォルトの名前が入っているので、わかりやすい名前を設定します。
「作成」ボタンをクリックすると最初の画面に戻り、新規プロジェクトが作成された通知が来ます。
既存のプロジェクトをクリックし、先ほど作成したプロジェクトに変更します。
新規のプロジェクトに変更できました。
APIの有効化
次に、使用するAPIを有効化します。最初の画面の左メニューにある「APIとサービス」にカーソルを合わせます。出てきたサブメニューの「ダッシュボード」をクリックします。
ダッシュボードに移動し上部にある「APIとサービスの有効化」をクリックします。
クリックするとAPIを選択する画面になります。その中から「Maps JavaScript API」をクリックします。
「有効にする」をクリックします。クリックするとMap JavaScript APIのメニュー画面に移動します。
これで、APIの有効化ができました。
APIキーの取得、設定
次に、有効化したAPIを使用するためのキーを取得、設定します。先程移動した画面の「認証情報」タブをクリックします。認証情報タブ内の「認証情報を作成」をクリックします。
クリックして出たメニューから「APIキー」をクリックします。クリック後、APIキーが作成されます。続いてダイアログ右下部にある「キーを制限」をクリックします。
クリックすると、作成したAPIキーの使用先を制限する画面になります。ここでは、ウェブサイトのURL、IPアドレス、アプリ名などで使用できる環境を設定できます。
今回は設定「なし」のまま進めていきます。
請求先情報を設定
APIキーを取得しましたが、このままではAPIを使用できません。API使用がBOTなどの自動作成・使用ではないか確認するためにクレジットカードの設定が必須になりました。
左上部のナビゲーションメニューから「支払い」をクリックします。請求先管理画面に移動しますので、「請求先アカウントを追加」ボタンをクリックします。
ボタンをクリックするとクレジット登録画面に移動しますので設定していきます。
ここから先は登録画面なので割愛します。クレジットカードの登録が正常に完了すると
「この請求先アカウントにリンクされているプロジェクト」の部分に、設定してきたプロジェクト名が表示されていればOKです。
実際にやってみよう
下記のGoogleMapAPIのサンプルページを参考に地図表示するHTMLを作成してみます。
Google Maps JavaScript APIのチュートリアル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Map Sample</title>
<style>
#map {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
スクリプト部分にある「YOUR_API_KEY」を上記で作成したプロジェクトのAPIキーを設定します。確認する画面としては、
ナビゲーションメニュー ＞ APIとサービス ＞ 認証情報 で移動した先にある「キー」
の部分の文字列を設定します。画面にGoogleMapの地図が出れば、完了です。
筆者プロフィール
| 水野大輝（みずのたいき）
2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。
プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。
また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。
