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つあります。

  1. Googleアカウント
  2. クレジットカード

が必要です。

まずは使用しているブラウザでGoogleアカウントにログインしておきます。

プロジェクトの作成

ログインしている状態で、以下のサイトにアクセスし、「プロジェクト選択」もしくは既存のプロジェクトを選択します。

Google Cloud Platform

Google Cloud Platformのログイン画面

Google Cloud Platformのプロジェクトの選択画面

プロジェクト名にデフォルトの名前が入っているので、わかりやすい名前を設定します。

Google Cloud Platform 新しいプロジェクトの作成画面

「作成」ボタンをクリックすると最初の画面に戻り、新規プロジェクトが作成された通知が来ます。

Google Cloud Platformの新しいプロジェクトの作成完了通知画面

既存のプロジェクトをクリックし、先ほど作成したプロジェクトに変更します。

Google Cloud Platform 既存のプロジェクト選択画面

新規のプロジェクトに変更できました。

 

APIの有効化

次に、使用するAPIを有効化します。最初の画面の左メニューにある「APIとサービス」にカーソルを合わせます。出てきたサブメニューの「ダッシュボード」をクリックします。

Google Cloud PlatformのAPIとサービスを選択する画面

ダッシュボードに移動し上部にある「APIとサービスの有効化」をクリックします。

Google Cloud PlatformのAPIとサービスの有効化選択画面

クリックするとAPIを選択する画面になります。その中から「Maps JavaScript API」をクリックします。

Google Cloud PlatformのAPIの選択画面でMaps JavaScript APIを選択

Google Cloud PlatformのMaps JavaScript APIの有効化画面

「有効にする」をクリックします。クリックするとMap JavaScript APIのメニュー画面に移動します。

Map JavaScript APIのメニュー画面

これで、APIの有効化ができました。

 

APIキーの取得、設定

次に、有効化したAPIを使用するためのキーを取得、設定します。先程移動した画面の「認証情報」タブをクリックします。認証情報タブ内の「認証情報を作成」をクリックします。

Maps JavaScript APIキーの取得、設定

クリックして出たメニューから「APIキー」をクリックします。クリック後、APIキーが作成されます。続いてダイアログ右下部にある「キーを制限」をクリックします。

Maps JavaScript APIの認証情報画面

クリックすると、作成したAPIキーの使用先を制限する画面になります。ここでは、ウェブサイトのURL、IPアドレス、アプリ名などで使用できる環境を設定できます。

Maps JavaScript APIのAPIキーの作成画面

今回は設定「なし」のまま進めていきます。

 

請求先情報を設定

APIキーを取得しましたが、このままではAPIを使用できません。API使用がBOTなどの自動作成・使用ではないか確認するためにクレジットカードの設定が必須になりました。

左上部のナビゲーションメニューから「支払い」をクリックします。請求先管理画面に移動しますので、「請求先アカウントを追加」ボタンをクリックします。

Maps JavaScript APIキーの請求先アカウントの追加画面

ボタンをクリックするとクレジット登録画面に移動しますので設定していきます。

Google Cloud PlatformのMaps JavaScript APIの個人情報登録画面

ここから先は登録画面なので割愛します。クレジットカードの登録が正常に完了すると

「この請求先アカウントにリンクされているプロジェクト」の部分に、設定してきたプロジェクト名が表示されていれば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サイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。