--- title: Google Maps API を使ってみた tags: JavaScript HTML GoogleCloudPlatform GoogleMapsAPI author: Haruka-Ogawa slide: false --- # 1. Google Maps APIとは Google Maps APIを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。 Google Maps APIについての詳細は、公式ホームページに記載されています。 公式ホームページ https://developers.google.com/maps/?hl=ja 今回は、Google Maps APIを使って、ウェブブラウザに地図を表示させる方法について説明します。 # 2. APIキー取得 Google Maps APIを使用するには、APIキーを取得しなければなりません。 ※ 2016年6月11日から、APIキーの取得が必須になりました。 APIキーを取得するために、あらかじめGoogleアカウントを準備しておいてください。 Google アカウントの作成 https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&flowName=GlifWebSignIn&flowEntry=SignUp&nogm=true ## 2-1. Google Cloud Platform アクセス APIキーを取得するために、まずはGoogle Cloud Platformを開きます。 まずは、以下リンク先を開いてください。 Google Cloud https://cloud.google.com/ リンク先にアクセスできましたら、画面右上にある、[コンソール]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/06107fbb-8932-08f4-1d5c-f11ced1a333b.png) [コンソール]ボタンをクリックすると、次のような画面が表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/652ab33b-d814-4270-ece4-c1a080b8ec19.png) ##2-2. プロジェクト作成 次に、新規でプロジェクトを作成します。 画面左上にある、[プロジェクトの選択]ボタンをクリックすると、プロジェクトの選択画面が表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/4000dcd8-c9e5-0a2a-aade-fdcca3745c7e.png) ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/48b65eec-6673-30bf-35f4-440e1574ed22.png) 新規プロジェクトを作成するには、[新しいプロジェクト]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/16ceaf3d-813e-3c65-ebc6-aeb9d79b67ad.png) 新規プロジェクト作成画面が表示されます。 プロジェクト名の欄に任意の名前を入力し、[作成]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c62dc918-24c9-1a9e-e851-7ff214e80f1b.png) これで、プロジェクトが作成されました。 ##2-3. プロジェクト選択 作成したプロジェクトを選択します。 再び、画面左上の[プロジェクトの選択]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/9086a1b9-c5cc-5fdd-3b32-ede037912af2.png) プロジェクト選択画面が表示されるので、先ほど作成したプロジェクトを選択し、[開く]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/2a51c401-9106-0b18-d8d9-8f0242782e35.png) これで、プロジェクトが選択されました。 ##2-4. APIの有効化 選択したプロジェクト内で、APIを有効化します。 画面左メニューから、[APIとサービス]にカーソルを合わせ、さらに、[ライブラリ]をクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/5b627bef-6814-5097-5107-179aca71d816.png) APIライブラリが表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/3079ec08-2a6e-f15b-8cda-d812ac866248.png) "Maps JavaScript API"を検索し、クリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/74e2b84e-55de-de68-55d9-c1a81ab13ab2.png) Maps JavaScript APIの概要画面が表示されます。 [有効にする]ボタンをクリックし、APIを有効化します。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/bccb0d5d-b982-b1df-ccd4-baec37c347fe.png) これで、APIが有効化されました。 ##2-5. APIキー取得 APIの有効化が完了すると、プロジェクトの[APIとサービス]の[ダッシュボード]に、有効化したAPIが追加されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c1065531-61de-37ef-bdd2-4717a05a20ee.png) ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/d37da432-93de-a36e-7cb0-578c35fc7938.png) ダッシュボードに表示されたAPI一覧から、"Maps JavaScript API"をクリックすると、次のような画面が表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/c68313f5-f7a5-0089-f2d2-4ed7349a842d.png) [認証情報]タブをクリックします。 画面が表示されると、認証情報作成のウィンドウが開きます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/969231e8-f803-5ce8-7e04-a76a38212697.png) [認証情報を作成]ボタンをクリックし、さらに[APIキー]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/869470f5-9fed-b207-62e3-2bb40aa03a57.png) Maps JavaScript APIのAPIキーが作成されました。 ウィンドウにて、取得したAPIキーを確認することができます。 [キーを制限]ボタンをクリックし、次の設定に進みます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/30e6c3fc-4594-8559-32dc-925bb77a82e0.png) APIキーの制限設定画面が表示されます。 ここでは、そのままの設定で[保存]ボタンをクリックします。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/fa68022f-1add-0f2f-7a8d-a329b82cbe80.png) Maps JavaScript APIの[認証情報]タブに、取得したAPIキー情報が表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/4c68e084-f9c5-0b3b-31cb-d0922eafedaa.png) これで、APIキーを取得できました。 # 3. コーディング 取得したMaps JavaScript APIのAPIキーを用いて、コーディングを行なっていきます。 今回は、簡単なサンプルを用いて、Google Maps APIによる地図の表示方法を紹介します。 ## 3-1. サンプルコード 最も簡単な、マップを表示するだけのサンプルコードを紹介します。 以下のサンプルコードでは、ブラウザに指定した座標位置のマップを表示します。 ```map.html Sample_GoogleMap
``` ## 3.2 画面 ブラウザで確認すると、下図のような画面が表示されます。 ![図1.png](https://qiita-image-store.s3.amazonaws.com/0/174250/6f9a6b84-ef7e-ce87-9a8a-de42dc3fa697.png) ## 3.3 解説 サンプルコード(map.html)の中身を解説します。 ### ・ APIロード Maps JavaScript APIをロードするため、以下のように記述します。 {APIキー}の部分には、先ほど取得したAPIキーを入れてください。 languageは、日本語(ja)を指定します。 ```map.html ``` ### ・ style属性 指定 style属性にて、HTMLのスタイルを指定します。 ここでは、ウィンドウの高さ(height)を100%に設定しています。 さらに、マップ(id:map)のスタイルを、高さ(height)100%、幅(width)100%に設定します。 ```map.html ``` ### ・ マップ表示 divにて、マップ(id:map)をブラウザ画面上に配置します。 ```map.html
``` ### ・ スクリプト記述 マップ(id:map)を表示するためのスクリプトを、scriptタグに記述します。 ```map.html ``` 以下に、スクリプトの中身を解説します。 - 座標指定 LatLngクラスのインスタンスより、座標を取得します。 ここでは、緯度:35.6811673、経度:139.7670516 を指定し、取得した座標情報を変数MyLatLngに入力しています。 ```js var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516); ``` - オプション設定 表示するマップのオプションを設定します。 設定した内容は、変数Optionsに入力しています。 ```js var Options = { zoom: 15, //地図の縮尺値 center: MyLatLng, //地図の中心座標 mapTypeId: 'roadmap' //地図の種類 }; ``` ここでは、zoom、center、mapTypeidの3項目について設定をしています。 center項目については、先ほど座標指定にて取得した座標情報(変数:MyLatLng)を指定しています。 | 設定項目|説明 | |:----------------:|:-----------------:| |zoom|必須項目。マップの縮尺値を設定する。| |center|必須項目。マップの中心座標地を設定する。| |mapTypeid|初期に表示されるマップの種類を設定する。デフォルトはROADMAP。| 上記以外にも、設定項目は存在します。 オプションの設定項目について詳細は、公式サイトのリファレンスで確認できます。 Google Maps Platform - Map Options interface https://developers.google.com/maps/documentation/javascript/reference/3.exp/map?hl=ja#MapOptions - マップ作成 設定したオプション設定(変数:Options)を指定し、Mapクラスを利用して、マップを作成します。 ```js var map = new google.maps.Map(document.getElementById('map'), Options); ``` # 4. 最後に 今回は、Google Maps APIを用いて、ブラウザにマップを表示させる方法を紹介しました。 2018年6月から、APIキーの取得が必須になり、Google Maps APIは大幅な刷新が行われました。 注意しておきたいのが、新しい料金体系では、毎月200ドル分は無料で使用することが可能ですが、それを超えると利用料金を支払う必要があります。 Google Maps Platform - お客様のニーズを満たす柔軟な価格プラン https://cloud.google.com/maps-platform/pricing/?hl=ja 個人で検証用に利用する範囲であれば、無料枠を超えることはあまりなさそうですが、 念のため、APIの割り当で上限を設定しておくとよいかもしれません。 # 参考情報 公式ホームページ https://developers.google.com/maps/?hl=ja Google Maps Platform ドキュメント - Maps JavaScript API https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja