|
日本語
| Sign in
企業向けのライセンスとサポートが含まれます
Google Mapplets API は新機能の追加によって定期的に拡張されており、これらの新機能の多くは maps.google.co.jp で最初に公開されます。このセクションでは、これらのサービスについて説明します。注: 「サービス」の定義は難しいため、このセクションはやや包括的な内容となっています。基本的に、このセクションには、他の場所に掲載できなかった簡潔な事項がまとめられています。
Google Gadgets API の setprefs 機能を使用すると、セッションとセッションの間にユーザーの状態を保存できます。この機能を使用するには、マップレットに以下が含まれている必要があります。
setprefs ライブラリを読み込むように、ガジェットに指示する <Require feature="setprefs"/> タグ (<ModulePrefs> の下にあります)。<UserPref> タグ。この Userpref タグにデータ型 hidden を指定すると、ユーザーはこれを直接編集できなくなります。_IG_Prefs(__MODULE_ID__) コンストラクタの呼び出し。このオブジェクトには、設定を取得したり設定するためのメソッドがあります。ユーザー設定の操作方法の詳細については、Google Gadgets API ドキュメントの「Userpref データ タイプの処理」セクションを参照してください。
次の例には、カウンタをインクリメントしたり、リセットしたりするためのボタンが含まれています。マップレットを再読み込みした場合、カウンタの値はそのユーザーの複数のセッションにまたがって維持されます。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Set Userprefs Demo">
<Require feature="sharedmap" />
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="html">
<![CDATA[
<input type=button value="Increment Counter" onClick="incrementCounter();">
<input type=button value="Reset Counter" onClick="resetCounter();">
<div id="message" style="margin-top:1em"></span>
<script>
// Get user preferences
var prefs = new _IG_Prefs(__MODULE_ID__);
var message = document.getElementById("message");
showCounter();
// Show the current value of the counter
function showCounter() {
var counter = prefs.getInt("counter");
message.innerHTML = "The counter value is " + counter;
}
// Increment value of "counter" user preference
function incrementCounter() {
var counter = prefs.getInt("counter");
prefs.set("counter", counter + 1);
showCounter();
}
// Reset value of "counter" userpref to 0
function resetCounter(){
prefs.set("counter", 0);
showCounter();
}
</script>
]]>
</Content>
</Module>
ジオコーディングとは、住所 (「1600 Amphitheatre Parkway, Mountain View, CA」など) を地理座標 (緯度 37.423021、経度 -122.083739 など) に変換する処理のことです。地理座標を使用して、マーカーを配置したり地図の位置決めを行うことができます。
Mapplets API ジオコーダには、GClientGeocoder オブジェクトを介してアクセスできます。GClientGeocoder.getLatLng() を使用して、文字列の住所を GLatLng に変換します。このメソッドでは、変換する文字列の住所と、住所取得時に実行するコールバック関数をパラメータと見なします。ジオコーディングでは、リクエストを Google のサーバーに送信する必要があり、少し時間がかかるため、コールバック関数が必要となります。
次の例では、住所をジオコードし、その地点にマーカーを追加し、この住所を表示する情報ウィンドウを開きます。コールバックは、関数リテラルとして渡されている点にご注意ください。
var map = new GMap2();
var geocoder = new GClientGeocoder();
showAddress("76 9th ave new york");
function showAddress(address) {
geocoder.getLatLngAsync(
address,
function(latlng) {
if (!latlng) {
alert(address + " not found");
} else {
map.setCenter(latlng, 15);
var marker = new GMarker(latlng);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
この例を実行する (geocoding-simple.xml)
マップレットの外からジオコーダにアクセスする必要がある場合は、標準の Google Maps API の「Geocoding via HTTP」セクションを参照してください。
住所に関する構造化された情報にアクセスするために、GClientGeocoder には次の情報で構成される JSON オブジェクトを返す getLocations() メソッドも用意されています。
Status
request -- リクエストの種類。この場合は常に geocode です。code -- ジオコード リクエストが成功したかどうかを示す応答コード (HTTP ステータス コードと類似)。「full list of status codes」を参照してください。Placemark -- ジオコーダで複数の一致対象が見つかった場合は、複数の位置マークが返されることがあります。
address -- 適切な形式で表記された住所。AddressDetails -- 住所の表記形式の国際標準である xAL (eXtensible Address Language) に基づいて表記された住所。Accuracy -- 指定された住所をジオコードした際の精度を示す属性。「list of possible values」を参照してください。Point -- coordinates 値 (住所の緯度、経度、高度) で構成される 3D 空間内の地点。この場合、高度は常に 0 に設定されます。ここでは、ジオコーダから返された Google 本社の住所の JSON オブジェクトを示します。
{
"name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
"Status": {
"code": 200,
"request": "geocode"
},
"Placemark": [
{
"address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
"AddressDetails": {
"Country": {
"CountryNameCode": "US",
"AdministrativeArea": {
"AdministrativeAreaName": "CA",
"SubAdministrativeArea": {
"SubAdministrativeAreaName": "Santa Clara",
"Locality": {
"LocalityName": "Mountain View",
"Thoroughfare": {
"ThoroughfareName": "1600 Amphitheatre Pkwy"
},
"PostalCode": {
"PostalCodeNumber": "94043"
}
}
}
}
},
"Accuracy": 8
},
"Point": {
"coordinates": [-122.083739, 37.423021, 0]
}
}
]
}
この例では、getLocations() メソッドを使用して住所をジオコードし、適切な形式で表記された住所と 2 文字の国コードを JSON から抽出して、情報ウィンドウに表示します。
var map = new GMap2();;
map.setCenter(new GLatLng(34, 0), 1);
var geocoder = new GClientGeocoder();;
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("\"" + address + "\" not found");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
}
}
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocationsAsync(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
この例を実行する (geocoding-extraction.xml)
Gadgets API ドキュメントの「リモート コンテンツの処理」セクションに記載されているすべての呼び出しは、マプレット内で正常に機能します。
_IG_FetchContent(url, callback) -- url にあるコンテンツをテキストとして返します。HTML またはプレーン テキストのコンテンツを取得するには、この関数を使用します。_IG_FetchXmlContent(url, callback) -- url にある XML コンテンツを DOM オブジェクトとして返して処理します。解析が必要な XML コンテンツを取得するには、この関数を使用します。シカゴ交通局の赤鉄道路線の座標を列記した次の XML ファイル (http://mapgadgets.googlepages.co.jp/cta_red.xml で公開) があるとします。名前が付いている地点は、駅がある場所です。
<?xml version="1.0" encoding="UTF-8" ?> <points> <point lng="-87.67283499240875" lat="42.019110918045044">Howard</point> <point lng="-87.66907453536987" lat="42.01585473134908">Jarvis</point> <point lng="-87.66744375228882" lat="42.014483688722116" /> <point lng="-87.66716480255127" lat="42.014228607763144" /> <point lng="-87.66695022583008" lat="42.01400541108485" /> <point lng="-87.66682147979736" lat="42.01379815632509" /> <point lng="-87.66662836074829" lat="42.01357495813621" /> <point lng="-87.66645669937134" lat="42.0133198735327" /> <point lng="-87.66634941101074" lat="42.013080730787806" /> <point lng="-87.66611337661743" lat="42.01263432859157" /> <point lng="-87.6660704612732" lat="42.012283581810934" /> <point lng="-87.66602754592896" lat="42.01188500357604" /> <point lng="-87.66602754592896" lat="42.008010693009815">Morse</point> <!-- ... --> </points>
次の例では、_IG_FetchXmlContent() を使用して XML ファイルをダウンロードして解析してから、鉄道路線を描画して各駅のマーカーを追加します。
var map = new GMap2();
// Go to Chicago
map.setCenter(new GLatLng(41.882853, -87.642059), 11);
// Render the red train line and stations from a remote XML file
var url = "http://mapgadgets.googlepages.com/cta_red.xml";
_IG_FetchXmlContent(url, function(response) {
var trainline = [];
var points = response.getElementsByTagName("point");
for (var i = 0; i < points.length; i++) {
var point = points.item(i);
var lat = point.getAttribute("lat");
var lng = point.getAttribute("lng");
var latlng = new GLatLng(lat, lng);
trainline.push(latlng);
if (point.firstChild) {
var station = point.firstChild.nodeValue;
var marker = createMarker(latlng, station);
map.addOverlay(marker);
}
}
var polyline = new GPolyline(trainline, "#ff0000", 3, 1);
map.addOverlay(polyline);
});
// Creates a marker at the given point with the given name
function createMarker(point, name) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(name);
});
return marker;
}
注: _IG_FetchContent 呼び出しと _IG_FetchXmlContent 呼び出しは、サーバー上の負荷を軽減するためにコンテンツを自動的にキャッシュに保存します。キャッシュの保存期間を変更したりキャッシュ機能を無効にする方法については、Gadgets API ドキュメントの「キャッシュの更新」セクションを参照してください。
JavaScript を使用して地点を追加する代わりに、KML または GeoRSS のデータ形式でデータを保存することをお勧めします。これらのデータ形式は GGeoXml オブジェクトを使用して地図に追加されます。このオブジェクトのコンストラクタは、一般公開されている XML ファイルの URL を受け取ります。GGeoXml の位置マークは GMarker として表示されるのに対して、GGeoXml のポリラインとポリゴンは Google Maps API のポリラインとポリゴンとして表示されます。KML ファイル内の <GroundOverlay> 要素は、GGroundOverlay 要素として地図上に表示されます。
GGeoXml オブジェクトは、addOverlay() メソッドを使用して地図に追加されます。(地図から削除するには、removeOverlay() を使用します)。KML と GeoRSS、両方の XML ファイルがサポートされています。
次の例では、http://mapgadgets.googlepages.co.jp/cta.kml に列記されているシカゴ交通局の全鉄道路線を表示します (Google マップで表示)。この例は、_IG_FetchXmlContent を使用した上記の例と比べて大幅に簡略化されている点に注目してください。
var map = new GMap2();
var geoXml = new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
map.setCenter(new GLatLng(41.882853, -87.642059), 11);
map.addOverlay(geoXml);
ルート案内をマプレットに追加するには、GDirections オブジェクトを使用します。GDirections オブジェクトは、クエリ文字列 (「New York, NY to Chicago, IL」など) または指定されたテキストの緯度と経度 (「40.712882, -73.967257 to 41.943181,-87.770677」など) を使用して、ルート結果をリクエストして受け取ります。GDirections オブジェクトは、一連の地点を使用した複数の部分からなるルート案内もサポートしています。ルート案内は、地図上に経路を描画するポリラインとして表示されるか、JSON 構造体として取得されます。
Google Maps API でルートを使用するには、タイプ GDirections のオブジェクトを作成して、結果を受け取って表示するための GMap2 オブジェクトを指定します。デフォルトでは、返された経路に応じて地図の中心と範囲が決定されます (この動作は GDirectionOptions オブジェクト内のパラメータを使用して変更できます)。
ルート案内をリクエストするには、GDirections.load() メソッドを使用します。このメソッドは、クエリ文字列とオプションの一連の GDirectionsOptions パラメータのセットを受け取ります。GDirections オブジェクトが、指定された GMap2 オブジェクトを使用して構築された場合、返されるルートにはポリラインオーバーレイが含まれます。
返された情報は、directions オブジェクトにすぐには格納されません。このため、GDirections オブジェクトでは、この状態を確認するためにインターセプトできる load イベントが定義されています。
ルートが返されたら、GDirections オブジェクトに結果が格納されます。これらの結果は、GDirections.getPolyline() メソッドや GDirections.getRoute(i:Number) メソッドを使用して取得できます。経路内のステップを取得するには GRoute.getStep(i:Number) メソッドを使用し、そのステップの HTML 形式の要約を取得するには GStep.getDescriptionHtml() を使用します。
// Create a directions object and register a map to hold the
// resulting computed directions
var map;
var directions;
function initialize() {
map = new GMap2();
map.setCenter(new GLatLng(49.496675,-102.65625), 3);
directions = new GDirections(map);
directions.load("New York, NY to Chicago, IL");
}
GDirections オブジェクトは、複数の地点で構成されるルートもサポートしています。このルートを構築するには GDirections.loadFromWaypoints() メソッドを使用します。このメソッドは、テキストの入力住所またはテキストの緯度/経度による地点の配列を受け取ります。それぞれの連続する経由地点群に基づいたルートは別々の経路として計算され、別々の GRoute オブジェクトで返されます。これらの各オブジェクトには一連の GStep オブジェクトが含まれています。
GRoute オブジェクトは、ルートのステップ数 (タイプ GStep)、出発地点と到着地点のジオコード、および距離、所要時間、到着地点の正確な緯度と経度 (ジオコードが道路区分上にない場合は、到着地点のジオコードと異なる場合があります) などの計算されたその他の情報を格納します。各 GStep オブジェクトにも、そのテキスト (「サンノゼ方面のランプを経由して US-101 (南) に合流」など) の説明に加えて、距離、所要時間、正確な緯度/経度などの計算された情報が含まれます。
GDirections オブジェクトは、インターセプト可能な次の 3 つのイベントを発行します。
load」: このイベントは、ルート結果が正常に返されて、オーバーレイ要素が地図に追加される前にトリガされます。addoverlay」: このイベントは、ポリライン ルート コンポーネントがマップに追加された後にトリガされます。error」: このイベントは、ルート リクエストでエラーが発生した場合にトリガされます。呼び出し元は、GDirections.getStatus() を使用してエラーに関する詳細情報を取得できます。Directions API パッケージ内の各種のオブジェクト、メソッド、イベントの詳細については、「API Reference」を参照してください。