Google Maps JavaScript API V 3の使用(一)
Google Maps JavaScript API V 3ベース
概要
Google Mapsの第3版APIアプリケーションの基本要素はすべて「地図」そのものです.
Google Maps第3版「Hello,World」
Google Maps APIを初歩的に理解する最も簡単な方法は、簡単な例を見ることです.次のページには、オーストラリアのニューサウスウェールズのシドニーを中心とした地図が表示されます.
例の表示(map-simple.html)
この簡単な例でも、以下の点に注意してください.
地図を運ぶために「map_canvas」という
Javascriptオブジェクト定数を作成して、いくつかの地図プロパティを保存します.
Javascript関数を作成してmapオブジェクトを作成します.
以下、これらの手順について説明する.
アプリケーションをHTML 5として宣言
実際の
現在のほとんどのブラウザでは、この
互換モードで動作するCSSの一部は、標準モードでは無効であることに注意してください.具体的には、パーセンテージで表されるすべての寸法は親ブロック要素から継承されなければならないが、親要素のいずれかの親要素が寸法を指定していない場合、システムはその寸法を0 x 0画素と仮定する.このため、次の
CSS声明は、地図コンテナ
Google Maps APIにロード
このヘッダーの
また、
JavaScript Maps APIを
アプリケーションがHTTPSアプリケーションの場合は、HTTPSでGoogle Maps JavaScript APIをロードすることに変更できます.
地図DOM要素
Webページに地図を表示するには、その場所を残しておく必要があります.通常、
上記の例では、「map_canvas」という名前の
地図オプション
地図を初期化するには、まず地図初期化変数を含む
初期スケーリングレベルも設定し、
Google Mapsの第2版APIとは異なり、第3版ではデフォルトマップタイプが設定されていない.対応するブロックを表示するには、初期マップタイプを明確に設定する必要があります.
地図タイプの詳細については、「地図タイプ」セクションを参照してください.しかし、ほとんどの場合、上記の基本的なタイプの使用を理解するだけで十分です.
新しい地図インスタンスを作成する場合は、地図のコンテナとして
このコードは、
コンストラクタ
説明
google.maps.Map( opts?)
地図に載せる
HTMLページを表示すると、ドキュメントオブジェクトモデル(DOM)が拡張され、外部画像とスクリプトが受信され、
例の表示(map-simple.html)
緯度と経度
様々な地図の位置を参照する方法も必要です.Google Maps APIでは、
「アドレス」を地理的な場所に変換するプロセスを「アドレス解析」と呼ぶことに注意してください.このバージョンのGoogle Maps APIは、アドレス解析をサポートします.詳細については、「サービス」セクションのアドレス解析を参照してください.
スケールレベル
完全な地球を含む地図を単一の画像として提供するには、大きな地図が必要か、解像度の極めて低い小型地図が必要かのいずれかです.このため、Google MapsとMaps API内の地図画像は、地図「ブロック」と「スケールレベル」の2つの部分に分割される.低スケールレベルでは、地図ブロックのグループが広い領域をカバーすることができます.一方、高スケールレベルでは、ブロックの解像度が高くなり、上書きされた領域が小さくなります.
地図の表示解像度を指定するには、
次の3枚の画像は、東京の同じ位置がスケールレベル0、7、18のときの光景をそれぞれ反映しています.
概要
Google Mapsの第3版APIアプリケーションの基本要素はすべて「地図」そのものです.
google.maps.Mapベースオブジェクトの使い方と地図操作の基礎知識を紹介した.(第2版のマニュアルをすでに勉強している場合は、この2版のマニュアルの多くが同じ内容であることがわかります.しかし、両者の間にも違いがありますので、本稿をよく読んでください.)Google Maps第3版「Hello,World」
Google Maps APIを初歩的に理解する最も簡単な方法は、簡単な例を見ることです.次のページには、オーストラリアのニューサウスウェールズのシドニーを中心とした地図が表示されます.
<!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: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>例の表示(map-simple.html)
この簡単な例でも、以下の点に注意してください.
<!DOCTYPE html>宣言を使用して、アプリケーションをHTML 5として宣言しました. scriptタグを使用して、Maps API JavaScriptに参加します. 地図を運ぶために「map_canvas」という
div要素を作成します. Javascriptオブジェクト定数を作成して、いくつかの地図プロパティを保存します.
Javascript関数を作成してmapオブジェクトを作成します.
bodyタグのonloadイベントから地図オブジェクトを初期化した. 以下、これらの手順について説明する.
アプリケーションをHTML 5として宣言
実際の
DOCTYPEを自分のネットワークアプリケーションで宣言することをお勧めします.本明細書のこれらの例では、以下に示すように、簡単なHTML 5 DOCTYPEを使用してアプリケーションをHTML 5として宣言する.<!DOCTYPE html>現在のほとんどのブラウザでは、この
DOCTYPEで宣言された内容が標準モードで表示されます.これは、アプリケーションがブラウザ間でより強力な適応能力を持つ必要があることを意味します.DOCTYPEはまた、適度に降格可能に設計されている.ブラウザが無視することを理解できず、「互換モード」を使用してコンテンツを表示します.互換モードで動作するCSSの一部は、標準モードでは無効であることに注意してください.具体的には、パーセンテージで表されるすべての寸法は親ブロック要素から継承されなければならないが、親要素のいずれかの親要素が寸法を指定していない場合、システムはその寸法を0 x 0画素と仮定する.このため、次の
<style>の声明に参加しました.<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>CSS声明は、地図コンテナ
<div>(名称map_canvas)がHTML本体の完全な高さを占めるべきであることを示している.また、<body>と<html>の対応するパーセントを明確に宣言する必要があります.Google Maps APIにロード
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>http://maps.google.com/maps/api/js URLはJavascriptファイルが存在する場所を指し、このファイルは第3版Google Maps APIを使用するために必要なすべての記号と定義をロードします.Webページには、このWebサイトへのscriptラベルが含まれている必要があります.このヘッダーの
<meta>ラベルは、地図をフルスクリーンモードで表示し、ユーザーが地図のサイズを調整できないことを指定します.(詳細については、「モバイルデバイスの開発」セクションを参照してください.)また、
sensorパラメータを設定して、アプリケーションがセンサを使用してユーザーの位置を決定するかどうかを示す必要があります.この例では、パラメータを変数「set_to_true_or_false」に設定し、値をtrueまたはfalseに明示的に設定する必要があることを強調します.JavaScript Maps APIを
http://maps.google.com/maps/api/js Webサイトからロードする場合は、librariesパラメータを使用して他のライブラリをロードすることもできます.ライブラリは、プライマリJavaScript APIに他の機能を提供するコードのモジュールですが、特定のリクエスト時にのみロードされます.詳細については、V 3 MapsAPIのライブラリを参照してください.アプリケーションがHTTPSアプリケーションの場合は、HTTPSでGoogle Maps JavaScript APIをロードすることに変更できます.
地図DOM要素
<div id="map_canvas" style="width: 100%; height: 100%"></div>Webページに地図を表示するには、その場所を残しておく必要があります.通常、
divという要素を作成し、ブラウザのドキュメントオブジェクトモデル(DOM)でその要素の参照を取得します.上記の例では、「map_canvas」という名前の
<div>を定義し、スタイルプロパティを使用してサイズを設定します.このサイズは「100%」に設定されており、モバイルデバイスの画面サイズに合うように地図が展開されます.これらの値は、ブラウザの画面サイズと塗りつぶし領域に応じて調整する必要があります.地図は、常に要素のサイズに基づいてサイズが決定されるため、<div>に適切なサイズを明示的に設定する必要があります.地図オプション
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};地図を初期化するには、まず地図初期化変数を含む
Map optionsオブジェクトを作成する必要があります.このオブジェクトは構築されたものではなく、オブジェクト定数として作成されます.地図の中心を特定の点に設定するため、この位置情報を保存し、地図のオプションに渡すlatlng値を作成する必要があります.位置の指定の詳細については、次の緯度と経度セクションを参照してください.初期スケーリングレベルも設定し、
mapTypeIdをgoogle.maps.MapTypeId.ROADMAPに設定した.システムは次のタイプをサポートします.ROADMAPは、Google Mapsのデフォルトの通常の2次元ブロックを表示するために使用される. SATELLITEは、撮影されたブロックを表示するために使用される. HYBRIDは、撮影されたブロックと、突出した特徴(道路、都市名)のブロック層とを同時に表示するために用いられる. TERRAINは、自然地形ブロックを表示するために使用され、自然地形ブロックには高さと水体の特徴(山脈、河川など)が表示される. Google Mapsの第2版APIとは異なり、第3版ではデフォルトマップタイプが設定されていない.対応するブロックを表示するには、初期マップタイプを明確に設定する必要があります.
地図タイプの詳細については、「地図タイプ」セクションを参照してください.しかし、ほとんどの場合、上記の基本的なタイプの使用を理解するだけで十分です.
google.maps.Map-基本オブジェクトvar map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);Mapクラスは、地図を表すJavaScriptクラスです.このようなオブジェクトは、Webページ上の単一の地図を定義します.(このような複数のインスタンスを作成できます.各オブジェクトは、Webページに個別の地図を定義します.)Javascript newオペレータを使用して、このような新しいインスタンスを作成します.新しい地図インスタンスを作成する場合は、地図のコンテナとして
<div> HTML要素をWebページに指定する必要があります.HTMLノードはJavascript documentオブジェクトのサブオブジェクトであり、document.getElementById()メソッドで要素の参照を取得します.このコードは、
mapという名前の変数を定義し、その変数を新しいMapオブジェクトに割り当て、myOptionsオブジェクト定数内で定義されたオプションに渡すことができる.これらのオプションは、地図のプロパティを初期化するために使用されます.Map()関数は「構築関数」と呼ばれ、以下のように定義されています.コンストラクタ
説明
google.maps.Map( opts?)
optsパラメータで渡されたオプションのパラメータを使用して、新しい地図を作成します.地図に載せる
<body onload="initialize()">HTMLページを表示すると、ドキュメントオブジェクトモデル(DOM)が拡張され、外部画像とスクリプトが受信され、
documentオブジェクトにマージされます.システムがウェブページに完全にロードされた後に私たちの地図をウェブページに追加することを確保するために、私たちはHTMLページの<body>要素がonloadイベントを受信した後に、Mapオブジェクトを構築するための関数を実行するだけです.これにより、予期せぬ動作を回避し、地図の描画方法と時間をより多く制御することができます.bodyタグのonload属性は、イベントハンドラの一例である.Google Maps Javascript APIでは、ステータスの変化を特定するために処理できるイベントのセットも用意されています.詳細については、「マップイベント」セクションを参照してください.例の表示(map-simple.html)
緯度と経度
様々な地図の位置を参照する方法も必要です.Google Maps APIでは、
google.maps.LatLngオブジェクトがこのようなメカニズムを提供しています.パラメータを{緯度、経度}の順に渡すLatLngオブジェクトを構築できます. var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)「アドレス」を地理的な場所に変換するプロセスを「アドレス解析」と呼ぶことに注意してください.このバージョンのGoogle Maps APIは、アドレス解析をサポートします.詳細については、「サービス」セクションのアドレス解析を参照してください.
LatLngオブジェクトはGoogle Maps APIで広く使用されている.たとえば、google.maps.Markerオブジェクトは、そのコンストラクション関数にLatLngを適用し、地図上で指定された地理的位置にタグ重畳層を追加します.スケールレベル
完全な地球を含む地図を単一の画像として提供するには、大きな地図が必要か、解像度の極めて低い小型地図が必要かのいずれかです.このため、Google MapsとMaps API内の地図画像は、地図「ブロック」と「スケールレベル」の2つの部分に分割される.低スケールレベルでは、地図ブロックのグループが広い領域をカバーすることができます.一方、高スケールレベルでは、ブロックの解像度が高くなり、上書きされた領域が小さくなります.
地図の表示解像度を指定するには、
Mapのzoomプロパティを設定します.ここで、0は地球地図を最小限に抑えることに相当し、より高いスケールレベルでは地図をより高い解像度に拡大します.次の3枚の画像は、東京の同じ位置がスケールレベル0、7、18のときの光景をそれぞれ反映しています.