Go to Qiita Advent Calendar 2024 Top
LoginSignup
521
524

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Haruka-Ogawa

Google Maps API を使ってみた

Last updated at Posted at 2018-07-26

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

[コンソール]ボタンをクリックすると、次のような画面が表示されます。
図1.png

2-2. プロジェクト作成

次に、新規でプロジェクトを作成します。

画面左上にある、[プロジェクトの選択]ボタンをクリックすると、プロジェクトの選択画面が表示されます。
図1.png

図1.png

新規プロジェクトを作成するには、[新しいプロジェクト]ボタンをクリックします。
図1.png

新規プロジェクト作成画面が表示されます。
プロジェクト名の欄に任意の名前を入力し、[作成]ボタンをクリックします。
図1.png

これで、プロジェクトが作成されました。

2-3. プロジェクト選択

作成したプロジェクトを選択します。

再び、画面左上の[プロジェクトの選択]ボタンをクリックします。
図1.png

プロジェクト選択画面が表示されるので、先ほど作成したプロジェクトを選択し、[開く]ボタンをクリックします。
図1.png

これで、プロジェクトが選択されました。

2-4. APIの有効化

選択したプロジェクト内で、APIを有効化します。

画面左メニューから、[APIとサービス]にカーソルを合わせ、さらに、[ライブラリ]をクリックします。
図1.png

APIライブラリが表示されます。
図1.png

"Maps JavaScript API"を検索し、クリックします。
図1.png

Maps JavaScript APIの概要画面が表示されます。
[有効にする]ボタンをクリックし、APIを有効化します。
図1.png

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

2-5. APIキー取得

APIの有効化が完了すると、プロジェクトの[APIとサービス]の[ダッシュボード]に、有効化したAPIが追加されます。
図1.png

図1.png

ダッシュボードに表示されたAPI一覧から、"Maps JavaScript API"をクリックすると、次のような画面が表示されます。
図1.png

[認証情報]タブをクリックします。
画面が表示されると、認証情報作成のウィンドウが開きます。
図1.png

[認証情報を作成]ボタンをクリックし、さらに[APIキー]ボタンをクリックします。
図1.png

Maps JavaScript APIのAPIキーが作成されました。
ウィンドウにて、取得したAPIキーを確認することができます。
[キーを制限]ボタンをクリックし、次の設定に進みます。
図1.png

APIキーの制限設定画面が表示されます。
ここでは、そのままの設定で[保存]ボタンをクリックします。
図1.png

Maps JavaScript APIの[認証情報]タブに、取得したAPIキー情報が表示されます。
図1.png

これで、APIキーを取得できました。

3. コーディング

取得したMaps JavaScript APIのAPIキーを用いて、コーディングを行なっていきます。
今回は、簡単なサンプルを用いて、Google Maps APIによる地図の表示方法を紹介します。

3-1. サンプルコード

最も簡単な、マップを表示するだけのサンプルコードを紹介します。
以下のサンプルコードでは、ブラウザに指定した座標位置のマップを表示します。

map.html
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Sample_GoogleMap</title>

<script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja"></script>

<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>
</head>

<body>
<div id="map"></div>

<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), Options);
</script>

</body>
</html>

3.2 画面

ブラウザで確認すると、下図のような画面が表示されます。
図1.png

3.3 解説

サンプルコード（map.html）の中身を解説します。

・ APIロード

Maps JavaScript APIをロードするため、以下のように記述します。
{APIキー}の部分には、先ほど取得したAPIキーを入れてください。
languageは、日本語（ja)を指定します。

map.html
<script src="http://maps.google.com/maps/api/js?key={APIキー}&language=ja"></script>

・ style属性 指定

style属性にて、HTMLのスタイルを指定します。

ここでは、ウィンドウの高さ(height)を100%に設定しています。
さらに、マップ(id:map)のスタイルを、高さ(height)100%、幅(width)100%に設定します。

map.html
<style>
html { height: 100% }
body { height: 100% }
#map { height: 100%; width: 100%}
</style>

・ マップ表示

divにて、マップ(id:map)をブラウザ画面上に配置します。

map.html
<div id="map"></div>

・ スクリプト記述

マップ(id:map)を表示するためのスクリプトを、scriptタグに記述します。

map.html
<script>
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};
var map = new google.maps.Map(document.getElementById('map'), Options);
</script>

以下に、スクリプトの中身を解説します。

  • 座標指定
    LatLngクラスのインスタンスより、座標を取得します。
    ここでは、緯度：35.6811673、経度：139.7670516 を指定し、取得した座標情報を変数MyLatLngに入力しています。
var MyLatLng = new google.maps.LatLng(35.6811673, 139.7670516);
  • オプション設定
    表示するマップのオプションを設定します。
    設定した内容は、変数Optionsに入力しています。
var Options = {
 zoom: 15,      //地図の縮尺値
 center: MyLatLng,    //地図の中心座標
 mapTypeId: 'roadmap'   //地図の種類
};

ここでは、zoom、center、mapTypeidの３項目について設定をしています。
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クラスを利用して、マップを作成します。
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

521
524
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
521
524

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?