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)を中心とした地図を表示。



<!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 起伏、高度、山、河川など地形情報に基づいて物理的なマップタイルを表示。 |