- 更新日: 2017年3月9日
- 公開日: 2016年8月19日
Web & アプリ開発者必見の『Google Maps API』とは
日常生活をより豊かで便利にしてくれる Googleマップ。
この便利な Googleマップ機能を、webや アプリ開発者でも利用できるようにしたものが、Google Maps API になります。
Uber や Airbnbをはじめとする人気アプリに加えて、各種企業や物流、行政など社会そのものを変えてしまおうとする Google Maps API に迫ってみたいと思います。
Web&アプリ開発者必見の『Google Maps API』とは
Google Maps APIとは
Google Maps APIとは、2005年2月にリリースされたGoogleマップのAPIになります。
高機能なGoogleマップを自分の開発するwebサイトやアプリにも無料で利用できるとあって、2013年時点で100万以上のwebサイトで利用されています。
またGoogle Maps APIの利用方法も比較的簡単で、HTMLやJavaScriptの基礎知識があればだれでも利用することができます。
具体的にGoogle Maps APIを使ったwebアプリの例を少しご紹介いたします。
Google maps API の導入事例
民泊の代名詞ともいえる Airbnb でも Google Maps API は活用されています。
民間だけでなく行政でも公共工事のスケジュール調整などに Google Maps API が使われています。
API の種類
| web用 API | ||
|
オリジナルコンテンツや画像を使ってマップを作成 25,000回／日まで無料 |
多くの場所の最新情報を利用可 25,000回／日まで無料 |
シンプルで埋め込み可能、コード最小限のマップ 25,000回／日まで無料 |
|
コードや割り当ての制限なくサイトに追加 25,000回／日まで無料 |
リアルな画像とパノラマ画像を使用 25,000回／日まで無料 |
|
| webサービス API | ||
|
目的地への移動時間と距離 2500回／日まで無料 |
正確な経路情報の取得 2500回／日まで無料 |
住所と地理的座標を変換 2500回／日まで無料 |
|
世界中の場所のタイムゾーンデータを利用 2500回／日まで無料 |
携帯の基地局や Wi-Fi からの位置データを利用 2500回／日まで無料 |
複数ポイントのルート検索 2500回／日まで無料 |
|
標高データの利用 2500回／日まで無料 |
多くの場所の最新情報を Get クレカ認証で 150,000回／日まで無料 |
|
| Android用 API | ||
|
Android アプリ向けのマップ 制限なしの無料利用 |
|
|
| iOS用 API | ||
|
iOS アプリ向けのマップ 制限なしの無料利用 |
場所情報へのユーザー・アクセス許可 クレカ認証で 150,000回／日まで無料 |
|
image : Google Maps API スタートガイド
Google Maps API の注意点
Google の API 仕様変更に伴うコード修正の手間
過去にあった大きな変更と言えば Flash用 API の中止です。Google Maps API リリース当初から Flash 用の API は公開されていましたが、2011年9月に Flash用 API を中止しました。
API 経由の地図ロード回数には上限がある
1日あたりの API リクエスト回数には上限が設けられています。プレミアムプランを利用すれば上限も引き上げられますが、アプリの維持コストとして負担になります。（参考ドキュメント）
Google Maps API を使ってみる
開発環境によって Google Maps API の使い方も変わると思いますが、今回はプレーンな HTML ファイルでテストしてみたいと思います。
事前準備
- Googleのアカウント
- APIキー
- ドメイン＆レンタルサーバーもしくは XAMPP などのローカル開発環境
それでは API キーの取得から始めてみましょう。
API キーの取得
API キーの取得は簡単です。
- API マネージャーの https://console.developers.google.com にアクセスし、プロジェクトを作成 をクリックします。
- 任意のプロジェクト名を入力し、作成 をクリックします。
- Google Maps JavaScript API をクリックします。
- API を有効にし、認証情報を追加していきます。
- API キーの名前を作成します。今回は web-app-demo-1 としました。
- API キーが生成されました。
- API キー管理画面でキーの名前のところに注意！が出ていますのでチェックします。
- リファラ―の指定が必要になりますので、利用するドメインを入力します。今回は、ドメイン管理している bitcoin-with.com と codecamp.bitcoin-with.com、localhost の 3つを入力しました。
- これで API キーが使えるようになりました。
- 次に Google Maps API を出力する HTML ファイルを作成します。
サンプルファイルの作成
Google Maps API スタートガイドに従って、基本となるプレーンな Google マップを表示したいと思います。
まずはスタートガイドで紹介されているコードをテキストエディタにコピペします。
この状態ではシドニーの地図が表示されますので、日本の地図表示に変更します。
変更箇所は、lat と lng の後の数字 と API キー です。
ちなみに latは Latitude の略で緯度、lngは Longitudeの略で経度を表します。
住所から緯度経度を教えてくれるこちらの オンライン・コンバーター を使って、東京都新宿区西新宿7-22-35 の緯度、経度を取得します。
緯度（lat） 35.696567
経度（lng）139.696381
この2つの数字を HTML シート内にある
lat: -34.397, lng: 150.644
の数字と置き換えます。
lat: 35.696567, lng: 139.696381
API キーは、21行目の YOUR API KEY の部分に消して、API キーの取得で作成したキーをコピペします。
これで日本の地図が表示できる HTML ファイルが作成できましたので、HTML ファイルをサーバーに保存します。
今回は、レンタルサーバーとローカル環境の XAMPP の両方に保存してみました。
XAMPP の場合の保存先 C:\xampp\htdocs
上記コードの実行結果（サーバー版はこちら）
[code]
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.696567, lng: 139.696381},
zoom: 8
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=あなたのAPIキー&callback=initMap">
</script>
</body>
</html>
[/code]
HTML ファイルの補足情報
- 16行目の zoom
表示される地図の拡大状況を指定します。一般的に 0から 20 までが有効で、値が大きくなるほど拡大されます。 ＿ - 20行目の async defer という属性
上記コードの async defer という属性を与えることで、Google Maps API の読み込みと web サイトの読み込みが並行して行われます。API が使用できるようになると指定したマップ（var map;）の情報（JavaScript）が読み込まれるようになります。
API の読み込みを後回しにしたい場合は、async をなくして、defer のみにします。
defer は、HTML ファイルの構文解析が終わってから JavaScriptを実行するための属性になります。参考 http://www.w3schools.com/tags/att_script_defer.asp
今回は基本的な Google Maps API のサンプルをご紹介させて頂きましたが、web 上では Airbnb っぽい地図のソースコードなども紹介されています。
ちょっと Google Maps API 頑張ってみようという方はご参考ください。
＿
また手っ取り早く web 開発に Google Maps を利用したいときは、 jQuery や WordPress、Ruby on Rails で利用できるプラグインも参考になります。
- jQuery
Leaflet.js
Mapbox
開発者向けの地図ツールソフトになります。
機能、レイアウト、充実の無料利用枠、魅力的なツールと思います。
＿ - WordPress
たくさんの Google Map プラグインがリリースされています。 Google Maps API for WordPress - Ruby on Rails
Geocoder
GMaps4rails
＼Webサイト担当者としてのスキルが身に付く！！／
まとめ
いかがでしたでしょうか？こんなに多機能な Googleマップが自分の web or アプリ開発でも簡単に利用できるとなると、使わない手はないですよね。
上記でも Airbnb っぽい地図を少しご紹介させて頂きましたが、Google Maps API に加えてデータベースやPHPなどのプログラミング知識があると、より充実したコンテンツを作成できると思います。
PHP、データベース、まだの方、CodeCamp のマンツーマンレッスン、ご参考ください。
_
Google Maps API に関するリンク
- この記事を書いた人
- オシママサラ
