Web & アプリ開発者必見の『Google Maps API』とは



Web & アプリ開発者必見の『Google Maps API』とは

日常生活をより豊かで便利にしてくれる Googleマップ。

この便利な Googleマップ機能を、webや アプリ開発者でも利用できるようにしたものが、Google Maps API になります。

Uber や Airbnbをはじめとする人気アプリに加えて、各種企業や物流、行政など社会そのものを変えてしまおうとする Google Maps API に迫ってみたいと思います。

目次
  1. Web&アプリ開発者必見の『Google Maps API』とは
  2. Google Maps APIとは
  3. API の種類
  4. Google Maps API の注意点
  5. Google Maps API を使ってみる
  6. API キーの取得
  7. サンプルファイルの作成
  8. まとめ

Web&アプリ開発者必見の『Google Maps API』とは

Google Maps APIとは

imageGoogle Maps APIとは、2005年2月にリリースされたGoogleマップのAPIになります。

高機能なGoogleマップを自分の開発するwebサイトやアプリにも無料で利用できるとあって、2013年時点で100万以上のwebサイトで利用されています。

またGoogle Maps APIの利用方法も比較的簡単で、HTMLやJavaScriptの基礎知識があればだれでも利用することができます。

具体的にGoogle Maps APIを使ったwebアプリの例を少しご紹介いたします。

Google maps API の導入事例

image

Airbnb

民泊の代名詞ともいえる Airbnb でも Google Maps API は活用されています。

image

シカゴ運輸局

民間だけでなく行政でも公共工事のスケジュール調整などに Google Maps API が使われています。

API の種類

web用 API

Google Maps JavaScript API

オリジナルコンテンツや画像を使ってマップを作成

25,000回/日まで無料

Google Places API JavaScript ライブラリ

多くの場所の最新情報を利用可

25,000回/日まで無料

Google Static Maps API

シンプルで埋め込み可能、コード最小限のマップ

25,000回/日まで無料

Google Maps Embed API

コードや割り当ての制限なくサイトに追加

25,000回/日まで無料

Google Street View Image API

リアルな画像とパノラマ画像を使用

25,000回/日まで無料

webサービス API

Google Maps Distance Matrix API

目的地への移動時間と距離

2500回/日まで無料

Google Maps Roads API

正確な経路情報の取得

2500回/日まで無料

Google Maps Geocoding API

住所と地理的座標を変換

2500回/日まで無料

Google Maps Time Zone API

世界中の場所のタイムゾーンデータを利用

2500回/日まで無料

Google Maps Geolocation API

携帯の基地局や Wi-Fi からの位置データを利用

2500回/日まで無料

Google Maps Directions API

複数ポイントのルート検索

2500回/日まで無料

Google Maps Elevation API

標高データの利用

2500回/日まで無料

Google Places API Web Service

多くの場所の最新情報を Get

クレカ認証で 150,000回/日まで無料

Android用 API

Google Maps Android API

Android アプリ向けのマップ 制限なしの無料利用

Google Places API for Android 場所情報へのユーザー・アクセス許可 クレカ認証で 150,000回/日まで無料

iOS用 API

Google Maps SDK for iOS

iOS アプリ向けのマップ 制限なしの無料利用

Google Places API for 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 などのローカル開発環境
Google アカウントは持っている前提で進めさせていただきます。

それでは API キーの取得から始めてみましょう。

API キーの取得

API キーの取得は簡単です。

  1. API マネージャーの https://console.developers.google.com にアクセスし、プロジェクトを作成 をクリックします。
  2. 任意のプロジェクト名を入力し、作成 をクリックします。
  3. Google Maps JavaScript API をクリックします。
  4. API を有効にし、認証情報を追加していきます。
  5. API キーの名前を作成します。今回は web-app-demo-1 としました。
  6. API キーが生成されました。
  7. API キー管理画面でキーの名前のところに注意!が出ていますのでチェックします。
  8. リファラ―の指定が必要になりますので、利用するドメインを入力します。今回は、ドメイン管理している bitcoin-with.com と codecamp.bitcoin-with.com、localhost の 3つを入力しました。
  9. これで API キーが使えるようになりました。
  10. 次に Google Maps API を出力する HTML ファイルを作成します。

サンプルファイルの作成

Google Maps API スタートガイドに従って、基本となるプレーンな Google マップを表示したいと思います。
まずはスタートガイドで紹介されているコードをテキストエディタにコピペします。

image

この状態ではシドニーの地図が表示されますので、日本の地図表示に変更します。
変更箇所は、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 

 

上記コードの実行結果(サーバー版はこちら

image

[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

まとめ

いかがでしたでしょうか?こんなに多機能な Googleマップが自分の web or アプリ開発でも簡単に利用できるとなると、使わない手はないですよね。

上記でも Airbnb っぽい地図を少しご紹介させて頂きましたが、Google Maps API に加えてデータベースやPHPなどのプログラミング知識があると、より充実したコンテンツを作成できると思います。

PHP、データベース、まだの方、CodeCamp のマンツーマンレッスン、ご参考ください。

_

Google Maps API に関するリンク

 

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp