今回から数回にわたって「Google Maps JavaScript API v3」の使い方について書いていきます。
公式ドキュメントの流れに沿って説明します。
執筆時点でのGoogle Maps JavaScript API v3のリリースバージョンは3.9です。
ご覧になったタイミングによっては、Google Maps JavaScript API v3のバージョンアップに伴い使用方法が異なる可能性があります。
（バージョンを指定してAPIを呼び出す方法は後述します）
現在の公式ドキュメントには、
すべての Maps API アプリケーション* では、API キーを使用して Maps API を読み込む必要があります。API キーを使用することで、アプリケーションの Maps API 使用状況を各自でモニタリングすることが可能になります。また、API キーを元に、必要に応じて、Google より、アプリケーションに関して連絡を取ることがあります。アプリケーションの Maps API 使用量が使用制限を超過した場合、API キーを使用して Maps API を読み込み、追加割り当てを購入する必要があります。
と書かれております。
以前はAPIキーは必要なかったのですが、Google Maps API for Businessの発表時にそれっぽいアナウンスがあっていたので、タイミング的にはその辺りかもしれません。
APIキーの取得
APIキーの作成方法の部分を公式ドキュメントから抜粋します。
- API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。
- 左側のメニューから [Services] をクリックします。
- Google Maps API v3 サービスをオンにします。
- 左側のメニューから [API Access] をクリックします。API キーは、[API Access] ページの [Simple API Access] セクションにあります。Maps API アプリケーションでは [Key for browser apps] を使用します。
デフォルトでは、このキーはどのサイトでも利用できます。不正なサイトでの使用を防ぐため、管理者権限を持つドメインでのみこのキーを使用することを強くおすすめします。API キーの [Edit allowed referrers…] をクリックすると、キーを使用できるドメインを指定することができます。
※上記説明は少し情報が古いようです。APIコンソールの画面が現在とは異なります
地図を表示する
まずは簡単な例を紹介します。以下のHTMLは、熊本城を中心とした地図を表示します。
（公式ドキュメントのサンプルを少し変更してます）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(32.806187,130.705832),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
ここではbodyタグのonloadイベントから初期化していますが、jqueryを併用する場合は次のように書くこともできます。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
$(function(){
var mapOptions = {
center: new google.maps.LatLng(32.806187,130.705832),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas").get(0),
mapOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
どちらを使うかは必要に応じて使い分ければOKです。
以下の説明ではbodyのonloadイベントから初期化するパターンになります。
Google Maps APIを読み込む
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
scriptタグ内のURLは、javascriptファイルの位置を示しており、このファイルにはGoogle Maps APIを使用する上で必要なシンボルと定義がすべて入っています。このscriptタグは必須です。
keyパラメータにはアプリケーションのAPIキーが含まれています。APIキーはAPIコンソールから生成する必要があります。
APIキーは必須です。
sensorパラメータは必須です。このアプリケーションがユーザーの位置情報を取得するのにセンサー（GPS など）を使用するかどうかを示します。この例では、パラメータの値を true または false に明示的に設定する必要があることを強調するために、set_to_true_or_false を変数のままにしています。
HTTPS
HTTPSアプリケーションの場合は、HTTPS接続で Google Maps JavaScript API を読み込むこともできます。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
必要に応じて使い分けましょう。
地図のDOM要素
<div id="map_canvas" style="width: 100%; height: 100%"></div>
地図をウェブページに表示するには、そのための領域を用意する必要があります。それには、ブラウザのDOM内で名前付きの div 要素を作成し、この要素への参照を取得してください。
上の例では「map_canvas」というIDの＜div＞ を定義し、style 属性でそのサイズを設定しています。この値は携帯端末で適切なサイズに拡張されるよう「100%」に設定されています。これらの値は、必要に応じてブラウザの画面サイズに合わせて調整します。地図は常にそのサイズを、地図を収容する要素のサイズから取得するので、＜div＞のサイズは常に明示的に設定する必要があります。
地図のオプション
var mapOptions = {
center: new google.maps.LatLng(32.806187,130.705832),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
地図を初期化するために、まず地図の初期化変数を保持する Map options オブジェクトを作成します。このオブジェクトは構築するのではなく、オブジェクト リテラルとして作成します。
ここでは、「中心の位置」「ズームレベル」「マップタイプ」の3つが必須なのでその3つについて説明します。
緯度と経度
特定の地点を地図の中心として設定するには、その位置を格納するための LatLng オブジェクトを作成し、位置の座標を「緯度, 経度」の順序で渡します。
center = new google.maps.LatLng(32.806187,130.705832)
ズーム レベル
地図を表示するための最初の解像度は、zoom プロパティで設定します。ズーム 0 は、完全にズームアウトして地球全体を表示した状態です。ズーム レベルを上げるほど、ズームインして解像度が高くなります。
zoom: 8
地球全体の地図を 1 つの画像として表示するには、巨大な地図を用意するか、解像度をかなり下げて小さな地図で表示する必要があります。そのため、Google マップおよび Maps API では、地図画像を「タイル」に分割して「ズーム レベル」ごとに保持しています。低いズーム レベルでは、少数のマップ タイルで広い領域をカバーします。ズーム レベルが上がるほど、解像度の高いタイルで、より小さい領域をカバーします。
マップ タイプ
初期マップ タイプも明示的に設定する必要があります。
mapTypeId: google.maps.MapTypeId.ROADMAP
サポートされているマップ タイプは次のとおりです。
- ROADMAP は、Google マップの通常のデフォルトである 2D タイルを表示します。
- SATELLITE は、写真タイルを表示します。
- HYBRID は、写真タイルと主要な対象物（道路、地名）のタイル レイヤを組み合わせて表示します。
- TERRAIN は、物理的な起伏を示すタイルで、高度や水系の対象物（山、河川など）を表示します。
ほとんどの場合は上記の基本タイプを知っていれば十分です。
地図オブジェクト
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
地図を表す JavaScript クラスは、Map クラスです。このクラスのオブジェクトは、1 つの地図をページ上に定義します（このクラスのインスタンスを複数作成することで、別々の地図を同じページ上に生成することもできます）。JavaScript の new 演算子を使用して、このクラスの新しいインスタンスを作成します。
新しい地図のインスタンスを作成するときは、地図のコンテナとして、ページ内で
このコードでは変数（名前は map）を定義し、この変数を新しい Map オブジェクトに割り当てます。また、mapOptions オブジェクト リテラル内で定義したオプションを渡します。各オプションは、地図のプロパティを初期化するのに使用します。
地図を読み込む
<body onload="initialize()">
HTML ページをレンダリングすると同時に、DOMを作成し、外部の画像とスクリプトをすべて取得して、document オブジェクトに組み込みます。必ずページの読み込みが完了した後に地図を配置するには、HTML ページの
要素が onload イベントを受け取ったときにのみ Map オブジェクトを作成する関数を実行します。これにより、予測できない動作を防ぎ、地図を描画する方法とタイミングを正確にコントロールすることができます。おわりに
以上で冒頭に紹介した地図を表示できるようになります。
まずは上記サンプルの中心の位置を変更して、別の位置が表示されるかを確かめるといいでしょう。
次回はマーカーを配置する方法についての説明を予定してます。