Google Maps JavaScript API v3
- Google Maps API v3について
- 基本的な地図の埋め込み方法
- 緯度・経度の地理的な座標位置〔LatLngクラス〕
- 地図オプション〔MapOptionsオブジェクト〕
- 地図タイプ〔MapTypeIdクラス〕
Google Maps API v3について
2011/6/26
Google Maps JavaScript APIのバージョン2は廃止され、バージョン3に移行しました。
バージョン3からはAPIキーなしで利用できます。
また、パソコンだけでなく、スマートフォン等の携帯端末でも高速に動作するようになり、Google Mapと端末のGPS機能を連動させたアプリなども作成できるようになりました。
基本的な地図の埋め込み方法
2011/6/26
地図の埋め込み例として、「表参道駅」を中心とした地図をPC、スマートフォンで表示する流れを説明します。
- Google Maps APIを読み込む
head要素内でGoogle Maps APIを読み込みます。
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' /> <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
「metaタグのviewport」は、スマートフォン向けの指定です。 スマートフォンで地図を全画面表示させる場合、地図サイズを端末の画面いっぱいに表示されるよう幅・高さ共に100%で指定するため、ユーザーが端末の画面を拡大・縮小できないようにviewportでスケールを固定にします。
「sensor」パラメータは、ユーザーの位置情報を取得するのにセンサーを使用するかどうかの有無を指定します。 PCサイトで使う場合は、PCにはGPS機能がないので、「false」を指定します。 AndroidやiPhoneなどスマートフォン向けのサイトで使う場合は、端末にGPS機能があるので「true」を指定します。
※この「sensor」パラメータは必須です。指定しないとおこられます。
-
地図の表示領域と地図サイズを指定
地図を表示する領域は、body要素内にdiv要素で指定します。
div要素には任意のID名を付け、地図のサイズを定義します。 このID名は、地図を生成する際、Mapオブジェクトの第1引数に指定します。スマートフォン向けの地図で画面いっぱいに表示する場合は、div要素の幅・高さに100%を指定します。
<style> html, body { height:100%; margin:0; padding:0; } #map { height:100%; } </style> <div id='map'></div>PC向けの地図で画面いっぱいに表示しない場合は、div要素に任意の幅・高さを指定します。
<style> #map { width:500px; heght:400px; } </style> <div id='map'></div> - 緯度・経度を取得
場所の緯度・経度は、住所を地理上の座標（緯度・経度等）に変換するGeocoding APIで取得できます。 ここでは、表参道駅の緯度・経度を取得してみます。
◆ジオコード
Geocoding APIのaddressパラメータに「表参道駅」を指定し、下記のURLにブラウザでアクセスすると、XML形式で場所の位置情報が返ります。http://maps.google.com/maps/api/geocode/xml?address=%E8%A1%A8%E5%8F%82%E9%81%93&sensor=false
XMLのGeocodeResponse/result/geometry/locationノード内のlat、lngノードの値が、緯度・経度になります。
<?xml version="1.0" encoding="utf-8"?> <GeocodeResponse> <status>OK</status> <result> <type>train_station</type> <type>transit_station</type> <formatted_address>日本, 表参道駅（東京）</formatted_address> <address_component> <long_name>表参道駅（東京）</long_name> <short_name>表参道駅（東京）</short_name> <type>train_station</type> <type>transit_station</type> </address_component> <address_component> <long_name>日本</long_name> <short_name>JP</short_name> <type>country</type> <type>political</type> </address_component> <geometry> <location> <lat>35.6652470</lat> <lng>139.7123140</lng> </location> <location_type>APPROXIMATE</location_type> <viewport> <southwest> <lat>35.6573860</lat> <lng>139.7030010</lng> </southwest> <northeast> <lat>35.6724400</lat> <lng>139.7210990</lng> </northeast> </viewport> <bounds> <southwest> <lat>35.6573860</lat> <lng>139.7030010</lng> </southwest> <northeast> <lat>35.6724400</lat> <lng>139.7210990</lng> </northeast> </bounds> </geometry> </result> </GeocodeResponse>◆Googleマップ検索
Googleマップからも場所の緯度・経度を取得可能です。 「表参道駅」で地図を検索し、右上の「リンク」をクリックされてると表示される「このリンクをメール・・・」のURLに含まれる「sllパラメータ」の値が表参道駅の緯度・経度になります。
http://maps.google.co.jp/maps? q=%E8%A1%A8%E5%8F%82%E9%81%93%E9%A7%85 &hl=ja &ie=UTF8 &sll=36.5626,136.362305 &sspn=68.192218,117.773438 &brcurrent=3,0x60188c99569a36dd:0xb9034c9751b5b2e2,0 &z=16
- 地図オブジェクトを生成
地図オブジェクトを作成し、地図の表示領域となるdiv要素のID名と地図オプションを渡します。 この処理は関数化しておきます。
地図オプションには、地図タイプ、ズームレベル、地図の中心地点を指定します。 地図の中心地点には、3.で取得した緯度・経度のLatlng値を指定します。
<script type='text/javascript'> /* ページ読み込み時に地図を初期化 */ function initialize() { /* 緯度・経度：日本, 表参道駅（東京）*/ var latlng=new google.maps.LatLng(35.6652470, 139.7123140); /* 地図のオプション設定 */ var myOptions = { zoom: 14, /*初期のズーム レベル */ center: latlng, /* 地図の中心地点 */ mapTypeId: google.maps.MapTypeId.HYBRID /* 地図タイプ */ }; /* 地図オブジェクト生成 */ var map=new google.maps.Map(document.getElementById('map'), myOptions); } </script>
-
地図の読み込み
ページロード時に、地図オブジェクトを生成する関数を呼びます。
<body onload='initialize()'> <div id='map'></div> </body>
設置サンプル
「表参道駅」（lat:35.6652470, lng:139.7123140）を中心とした地図を表示。
iPhone
Android<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル</title>
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
/* 緯度・経度：日本, 表参道駅（東京）*/
var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
/* 地図のオプション設定 */
var myOptions = {
/*初期のズーム レベル */
zoom: 18,
/* 地図の中心点 */
center: latlng,
/* 地図タイプ */
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"), myOptions);
}
</script>
<style type="text/css">
html, body { margin:0; padding:0; }
#map { width:100%; height:100%; }
</style>
</head>
<body onload="initialize()">
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
緯度・経度の地理的な座標位置
LatLngクラス
2011/6/26
Google Maps JavaScript API V3 - LatLngクラス
LatLngは、指定した緯度と経度の地理的な座標位置を生成します。
noWrapフラグがtreの場合、緯度・経度の数値がそのまま使用されます。 falseの場合は、緯度は-90～+90度の範囲、経度は、-180～+180度の範囲に収まるよう修正されます。
地図またはマーカーがクリックされた時に、イベントが発生した位置の緯度・経度を取得する場合は、LatLngクラスのメソッドを使用します。 詳細はこちら。
地図オプション
MapOptionsオブジェクト
2011/6/26
地図には、下記のオプションを指定可能です。
以下の3つは必須指定項目です。
・地図の中心地点（center）
・地図タイプ（mapTypeId）
・ズームレベル（zoom）
地図のオプション設定は、setOptionsメソッドで変更できます。
| プロパティ | 説明 |
|---|---|
| backgroundColor |
地図を描画するDIV要素の背景色を指定。 読み込みや移動時など地図のレンダリング中に表示されます。 このオプションは地図を初期化した時のみ設定可能。 |
| center |
地図の中心地点を緯度・経度をLatLngオブジェクトで指定。 ※必須 |
| disableDefaultUI |
地図上のすべてのデフォルトUIを無効にする場合はtrueを指定。 デフォルトはfalse（有効）。 |
| disableDoubleClickZoom |
地図のダブルクリック時に、ズームとセンターを無効にする場合はtrueを指定。 デフォルトはfalse（有効）。 |
| draggable |
地図上でのドラッグ操作を無効にする場合はfalseを指定。 デフォルトはtrue（有効）。 |
| draggableCursor |
ドラッグ可能な地図上に表示されるカーソルを名前またはURLで指定。 例：draggableCursor:'crosshair' |
| draggingCursor | 地図がドラッグされている時に表示されるカーソルを名前またはURLで指定。 例：draggingCursor:'url(/content/img/cur/qoo-n_02.cur)' |
| heading |
カメラの方角を指定。 北からの相対角度（北が0°、東が90°、南が180°、西は270°） |
| keyboardShortcuts |
地図上でのキーボード操作を無効にする場合はfalseを指定。 デフォルトはtrue（有効）。 |
| mapMaker |
地図メーカーのタイルでなく、通常のタイルを使用する場合はtrueを指定。 デフォルトはfalse。 |
| mapTypeControl |
地図タイプコントロールを初期表示しない場合はfalseを指定。 デフォルトはtrue（表示）。 |
| mapTypeControlOptions | 地図タイプコントロールの初期表示オプションを指定。 |
| mapTypeId |
初期の地図タイプを指定。 ※必須 |
| maxZoom |
地図の最大ズームレベルを指定。 省略したりnullを指定した場合は、現在の地図タイプから最大ズームが代用されます。 |
| minZoom |
地図の最小ズームレベルを指定。 省略したりnullを指定した場合は、現在の地図タイプから最小ズームが代用されます。 |
| noClear |
地図を描画するDIV要素の内容を消去しない場合はtrueを指定。 デフォルトはfalse（消去）。 |
| overviewMapControl |
概観地図コントロールを無効にする場合はfalseを指定。 デフォルトはtrue（有効）。 |
| overviewMapControlOptions | 概観地図コントロールの表示オプションを指定。 |
| panControl |
移動コントロールを無効にする場合はfalseを指定。 デフォルトはtrue（有効）。 |
| panControlOptions | 移動コントロールの表示オプションを指定。 |
| rotateControl |
回転コントロールを無効にする場合はfalseを指定。 デフォルトはtrue（有効）。 |
| rotateControlOptions | 回転コントロールの表示オプションを指定。 |
| scaleControl |
スケールコントロールを初期表示しない場合はfalseを指定。 デフォルトはtrue（有効）。 |
| scaleControlOptions | スケールコントロールの初期表示オプションを指定。 |
| scrollwheel | 地図上上で、マウスホイールによるズームスクロール（地図の拡大・縮小）を無効にするにはfalseを指定。 デフォルトはtrue（有効）。 |
| streetView | ストリートビューでペグマンが地図上にドロップされた時に表示するストリートビューパノラマを指定。 パノラマが指定されていない場合は、デフォルトのストリートビューパノラマが地図のDIV要素内に表示されます。 |
| streetViewControl | ストリートビューペグマンコントロールを初期表示しない場合はfalseを指定。 このコントロールはデフォルトUIの一部で、ストリートビューのストリートオーバーレイが表示されない地図タイプを表示するときにはfalseに設定する必要があります。 |
| streetViewControlOptions | ストリートビューペグマンコントロールの初期表示オプションを指定。 |
| styles |
デフォルトの地図タイプにそれぞれ適用するスタイルを指定。 スタイルは地図タイプがSATELLITE、HYBRIDの場合のみ適用されます。 |
| tilt |
地図の傾きを指定。 0または45のいずれかを指定可能。 地図が45度の傾きに対応していない場所では適用されません。 |
| zoom |
地図の初期のズームレベルを指定。 ※必須 |
| zoomControl |
ズームコントロールを非表示にする場合はfalseを指定。 デフォルトはtrue（表示）。 |
| zoomControlOptions | ズームコントロールの表示オプションを指定。 |
地図タイプ
MapTypeIdクラス
2011/6/26
Googleマップで指定可能な地図タイプは下記の4種類。
地図オプションの設定で、地図タイプのIDを下記のように指定します。
{
mapTypeId: google.maps.MapTypeId.HYBRID
}
地図タイプは、setMapTypeIdメソッドで変更できます。
| 表示イメージ | 定数 |
|---|---|
 | ROADMAP デフォルトの道路地図。2Dタイル。 |
 | SATELLITE Google Earthの航空写真。写真タイル。 |
 | HYBRID デフォルト＋航空写真の組合せ。 |
 | TERRAIN 起伏、高度、山、河川など地形情報に基づいて物理的なマップタイルを表示。 |