以下の例題は、Java スクリプトに関するものだけです。HTML ファイルは含んでいません。Java スクリプトのコードを先に示したスケルトンのHTMLファイルに埋め込んでもいいですし、各例題の後にあるリンクをクリックして、完全なHTMLファイルをダウンロードしてもどちらでもかまいません。
以下の例題は、今、私たちがいる会場を中心とした地図を表示しています。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.587754,139.73058), 13);
以下の例は、マップを表示してから1秒間待ち、新しい中心点に向かって移動するものです。
panTo メソッドは、与えられた地点をマップの中心とするように移動します。もし、与えられた地点が既に表示されているマップの内部ならば、パン(移動)は、スムーズに行われます。もし、外部であるなら、新しい中心に向かってジャンプします。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(35.658691,139.701505), 17);
window.setTimeout(function() {
map.panTo(new GLatLng(35.659445,139.698624));
}, 1000);
addControlメソッド利用することによって、地図にコントロールを加えることができます。
この場合、GSmallMapControlとGMapTypeControlコントロールを加えます。
これらは、地図を移動させる、拡大・縮小をする、地図と航空写真のモードを切り替える方法を提供します。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
イベントリスナーを登録するためには、GEvent.addListenerメソッドを呼びます。
このメソッドに地図オブジェクト、処理するイベント、そして指定されたイベントが発生したときに呼び出す関数を渡します。
次のコード例では、ユーザが地図をドラッグしたあと、地図の中心の緯度および経度を表示します。
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
イベントの詳細は、 「イベントの概要」を参照してください。GMap2のイベントの完全な一覧とそれらが生成する引数について、 GMap2.Eventsを参照してください。
情報ウィンドウを作成するためには、表示するべき位置およびDOM要素を指定して、openInfoWindowメソッドを呼んでください。
次のコード例は、地図の中央部分に「Hello World」というメッセージを情報ウィンドウで表示します。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
この例は、地図上に任意の位置に10のマーカーを表示しまし。そして、5つのポイントを結びつける１本のポリラインを表示します。
GMarkerオブジェクトは、もしアイコンの指定がなければ、Google Mapsアイコンをデフォルトで用います。
カスタム・アイコンを使用する例は、「アイコンを作成する」を参照してください。
Internet Explolerでポリラインを表示させるには、HTMLドキュメントの中ににVML名前空間とCSSを含まなければなりません。 より詳細には、 「XHTMLとVML」を参照してください。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers in random locations on the map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
}
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
ユーザが地図上でクリックした時、何かのアクションを引き起こすには、GMap2インスタンス上で「click」イベントに対するイベントリスナーを登録します。clickイベントが発生するとき、イベントハンドラは２つの引数を受理するでしょう。一つはクリックされたマーカー、そしてもう一つはクリックされた点のGLatLngオブジェクトです。
もしマーカーがクリックされなければ、最初の引数はnullになります。
click」イベントをサポートする唯一の組み込みのオーバーレイです。GPolylineのような他のタイプのオーバーレイはクリック可能ではありません。次の例において、ビジターがマーカーのない地図上のある点をクリックする場合、その場所に新しいマーカーが作成されます。 逆に、ビジターがマーカーをクリックすると、地図からそのマーカーが削除されます。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point));
}
});
イベントの詳細は、 「イベントの概要」を参照してください。
GMap2のイベントの完全な一覧とそれらが生成する引数について、 GMap2.Eventsを参照してください。
この例では、地図上のマーカー毎にカスタマイズされた情報ウィンドウを表示します。これは、各マーカーに対してクリックイベントのリスナーを定義することによって実現されます。 マーカー毎に情報ウィンドウに表示するコンテンツを変更するには、JavaScriptのクロージャを利用します。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
イベントの詳細は、 「イベントの概要」を参照してください。
GMap2のイベントの完全な一覧とそれらが生成する引数について、 GMap2.Eventsを参照してください。
Google Maps APIのバージョン2は、タブと呼ばれる複数の情報ウィンドウをサポートするopenInfoWindowTabs()およびGInfoWindowTabクラスを提供します。下記の例では、１つのマーカーの上にタブ付情報ウィンドウを表示します。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Our info window content
var infoTabs = [
new GInfoWindowTab("Tab #1", "This is tab #1 content"),
new GInfoWindowTab("Tab #2", "This is tab #2 content")
];
// Place a marker in the center of the map and open the info window
// automatically
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
次の例では、新しいタイプのアイコンを作成します。たとえば、Google Ride Finder "mini" マーカーを使ってみます。フォアグラウンド画像と、影の画像を指定します。また、アイコンを置く位置も指定します。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}
多くの場合、アイコンは異なる前景を持ちつつも、同じ形および影を持っているかもしれません。 この振る舞いを実現する最も簡単な方法はGIconクラスが提供するコピーコンストラクターを使用することです。 これは、カスタマイズすることができる新しいアイコンにすべてのプロパティをコピーします。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i));
}
この例では、 GDownloadUrlメソッドを使用して、緯度／経度座標のリストを含んだXMLファイル（data.xml)がダウンロードされます。
ダウンロードが完了すると GXml クラスのparseメソッドを用いて、ダウンロードされたXMLドキュメントを解析し、そこで定義された座標データに対応したマーカーを作成します。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
}
});
この例は外部XMLデータファイル data.xmlを使用します。
Google Maps APIのバージョン2では、移動や拡大・縮小コントロールのようなカスタムマップコントロールをGControlクラスのサブクラス化によって実現します。この例では、Google Maps標準のズーム・コントロールで用いられているグラフィカルなアイコンではなく、テキストリンクを持つシンプルなズーム・コントロールを作成します。
GTextualZoomControlクラスは、GControlインターフェースの2つの必要なメソッドを定義します。
initialize ()--コントローラを表すDOM要素を生成するgetDefaultPosition()--コントロールを地図に追加するとき、別の位置を与えない場合に使用するGControlPositionを返す
カスタムコントローラを作成するときにオーバーライドできるメソッドの詳しい情報はGControlクラスリファレンスを見てください。
全てのマップコントローラはGMap2のgetContainer()メソッドからアクセスできるマップcontainerに追加されるべきです。
// A TextualZoomControl is a GControl that displays textual "Zoom In"
// and "Zoom Out" buttons (as opposed to the iconic buttons used in
// Google Maps).
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
// Sets the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.font = "small Arial";
button.style.border = "1px solid black";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new TextualZoomControl());
map.setCenter(new GLatLng(37.441944, -122.141944), 13);
Google Maps APIのバージョン2は、GMarkerとGPolylineオーバーレイのように、GOverlayクラスをサブクラス化することで、カスタム地図オーバーレイを作成することができます。
この例では、地図上に地理的な領域を設けるRectangleオーバーレイを作成します。
Rectangleクラスは、GOverlayインターフェースの4つの必要なメソッドを定義します。
initialize() --オーバーレイを表わすDOM要素を作成する
remove () --地図からオーバーレイ要素を取り除く
copy () --別の地図インスタンスで使用されるオーバーレイをコピーする
redraw() --現在の投影図法とズームレベルに基づいて、地図の上のオーバーレイの位置とサイズを決める
カスタムオーバーレイを作成する場合、詳細は、GOverlayのためのクラス参照を参照してください。
オーバーレイを構築するすべてのDOM要素は、それが描かれるであろうz-orderを定義するmap paneに存在します。
例えば、ポリラインは地図に対して水平です。
したがって、それらは一番底（下）のG_MAP_MAP_PANEの中で引かれます。
マーカーはG_MAP_MARKER_SHADOW_PANEの影の要素とG_MAP_MARKER_PANEのフォアグランド要素を置きます。
正確なpaneにオーバーレイ要素を置くことは、ポリラインがマーカーの影の下に引かれ、情報ウィンドウが地図の他のオーバーレイの上に引かれることを保証します。
この例では、オーバーレイは地図に対して水平です。
したがって、ちょうどGPolylineのように、最も下にあるz-order pane G_MAP_MAP_PANEにそれを加えることになります。
map paneについての完全なリストは、 「クラスリファレンス」 を参照してください。
// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
this.bounds_ = bounds;
this.weight_ = opt_weight || 2;
this.color_ = opt_color || "#888888";
}
Rectangle.prototype = new GOverlay();
// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
// Create the DIV representing our rectangle
var div = document.createElement("div");
div.style.border = this.weight_ + "px solid " + this.color_;
div.style.position = "absolute";
// Our rectangle is flat against the map, so we add our selves to the
// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
// below the marker shadows)
map.getPane(G_MAP_MAP_PANE).appendChild(div);
this.map_ = map;
this.div_ = div;
}
// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
this.div_.parentNode.removeChild(this.div_);
}
// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
return new Rectangle(this.bounds_, this.weight_, this.color_,
this.backgroundColor_, this.opacity_);
}
// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
// We only need to redraw if the coordinate system has changed
if (!force) return;
// Calculate the DIV coordinates of two opposite corners of our bounds to
// get the size and position of our rectangle
var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Display a rectangle in the center of the map at about a quarter of
// the size of the main map
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngDelta = (northEast.lng() - southWest.lng()) / 4;
var latDelta = (northEast.lat() - southWest.lat()) / 4;
var rectBounds = new GLatLngBounds(
new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta),
new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta));
map.addOverlay(new Rectangle(rectBounds));
グーグルにHTTPリクエストを送ることによりMaps APIジオコーダに直接アクセスすることができます。
または、JavaScriptコードの中でGClientGeocoderオブジェクトを使用して、リクエストを送信することも可能です。
ジオコーディングの呼び出しをサーバないしはユーザのブラウザのどちらから行うかを決めるのは自由です。
もし、確定した住所データベース(例えば、販売に関する属性情報）)を持っている場合には、一度HTTPリクエストメソッドで住所データベースに格納された住所についてジオコードし、その結果をキャッシュしておくことをお勧めします。そうすることによってあなたのサイトのレスポンスは良くなりますし、日々のジオコードリクエストの回数を減らすことにもなります。
しかしながら、サーバサイドスクリプトにアクセスする手段を持っていないのであれば、JavaScriptコードからジオコードリクエストを送信することもできます。
GClientGeocoderオブジェクトを使用することで、JavaScriptコードからジオコーダにアクセスすることができます。
getLatLngメソッドはある住所をGLatLngオブジェクトに変換するために使用します。
ジオコーディングはグーグルのサーバへリクエストを送ることを含んでいるので、ある程度の時間はかかる場合があります。
JavaScriptコードが待ち状態になることを避けるために、レスポンスが戻った後に呼び出す関数の中に渡す必要があります。
次の例は、住所をジオコードし、その点のマーかを追加し、その住所を表示する情報ウィンドウをオープンします。
var map = new GMap2(document.getElementById("map"));
var geocoder = new GClientGeocoder();
function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
構造化された住所情報にアクセスしたいのであれば、GClientGeocoderクラスのgetLocationsメソッドが、以下のような情報から構成されるJSONオブジェクトを返します。
ステータスrequest -- リクエストタイプを表す。この場合、それは常にgeocodeである。code -- ジオコードリクエストが成功したかどうか示すレスポンスコード(HTTPステータスコードと同様)。 「ステータスコードの全リスト」を参照してください。Placemark -- ジオコーダが複数の結果を見つけた場合、多数のplacemarksが返されるかもしれない。address -- 適切に整形された住所。AddressDetails -- eXtensible Address Language(xAL, アドレス・フォーマット用の国際基準)としてフォーマットされた住所。Point -- 3D空間のポイント。coordinates -- 住所の経度、緯度および高度。この場合、高度は0に常にセットされる。次の例は、グーグル本社の住所をジオコーダによって変換した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"
}
}
}
}
}
},
Point: {
coordinates: [-122.083739, 37.423021, 0]
}
}
]
}
この例では、getLocationsメソッドを用いて住所をジオコードし、得られたJSONオブジェクトから住所と2文字の国表記を抽出し、情報ウィンドウに表示します。
var map;
var geocoder;
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34, 0), 1);
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);
}
}
var input = document.getElementById('in16');
// 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 = input.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
input.value = address;
showLocation();
}
Try these:
1600
amphitheatre mtn view ca
1
Telegraph Hill Blvd, San Francisco, CA, USA
4144
Avenue Pierre-De-Coubertin, Montréal, Canada
Champ
de Mars 75007 Paris, France
Piazza
del Colosseo, Roma, Italia
Domkloster
3, 50667 Köln, Deutschland
Plaza
de la Virgen de los Reyes, 41920, Sevilla, España
東京タワー (Tokyo Tower, Tokyo Japan)
123 Main St, Googleville
GClientGeocoderはデフォルトでクライアント側キャッシュを行います。
このキャッシュには、ジオコードのレスポンスを格納します。
もし、同じ住所に対してジオコードされる場合には、そのレスポンスはグーグルのジオコーダではなくキャッシュから返されるでしょう。
キャッシングを止めるには、null をGClientGeocoderのsetCacheメソッドに渡します。
しかしながら、パフォーマンスを改善するのであれば、キャッシュを有効にすることをお勧めします。
GClientGeocoderによって使用されているキャッシュを変更するためには、setCacheメソッドを用いて、新しいキャッシュの中で渡してください。現在のキャッシュのコンテンツを空にするためには、ジオコーダもしくはキャッシュ上でresetメソッドを利用します。
独自のクライアントサイドキャッシュを作ることもできます。
この例では、ジオコーディングAPIが対象とする国々において、６つの首都に関するジオコーディングのレスポンスを事前にキャッシュに持つとしましょう。最初に、ジオコードレスポンスの配列を作成します。次に、標準のGeocodeCacheを拡張してカスタムキャッシュを作成します。一旦キャッシュが定義されたら、setCacheメソッドを呼びます。
キャッシュに格納されたオブジェクトを厳密にチェックすることはできません。
したがって、キャッシュに他の情報(人口のような)を同様に格納してもよいかもしれません。
// Builds an array of geocode responses for the 6 capitals
var city = [
{
name: "Washington, DC",
Status: {
code: 200,
request: "geocode"
},
Placemark: [
{
address: "Washington, DC, USA",
population: "0.563M",
AddressDetails: {
Country: {
CountryNameCode: "US",
AdministrativeArea: {
AdministrativeAreaName: "DC",
Locality: {
LocalityName: "Washington"
}
}
}
},
Point: {
coordinates: [-77.036667, 38.895000, 0]
}
}
]
},
// ... etc., and so on for other cities
];
var map;
var geocoder;
// CapitalCitiesCache is a custom cache that extends the standard GeocodeCache.
// We call apply(this) to invoke the parent's class constructor.
function CapitalCitiesCache() {
GGeocodeCache.apply(this);
}
// Assigns an instance of the parent class as a prototype of the
// child class, to make sure that all methods defined on the parent
// class can be directly invoked on the child class.
CapitalCitiesCache.prototype = new GGeocodeCache();
// Override the reset method to populate the empty cache with
// information from our array of geocode responses for capitals.
CapitalCitiesCache.prototype.reset = function() {
GGeocodeCache.prototype.reset.call(this);
for (var i in city) {
this.put(city[i].name, city[i]);
}
}
function addAddressToMap(response) {
map.clearOverlays();
if (response && response.Status.code != 200) {
alert("Unable to locate " + decodeURIComponent(response.name));
} else {
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
map.setCenter(point, 6);
map.openInfoWindowHtml(point, "City: " + place.address
+ "
Population: " + place.population);
}
}
function findCity(which) {
if (which != 0) {
geocoder.getLocations(city[which - 1].name, addAddressToMap);
}
}
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.441944, -122.141944), 6);
// Here we set the cache to use the UsCitiesCache custom cache.
geocoder = new GClientGeocoder();
geocoder.setCache(new CapitalCitiesCache());
Go to:
サーバサイドスクリプトを利用して直接Maps APIジオコーダにアクセスするためには、http://maps.google.com/maps/geo?にリクエストを送信してください。そのパラメーターは次の通りです。
q -- ジオコードしたい住所key -- APIキーoutput -- 出力データのフォーマット。オプションはxml、kmlあるいはjsonである。この例では、グーグル本社の座標をリクエストします。
http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&key=abcdefg出力形式としてjsonを指定すれば、レスポンスはJSONオブジェクトとしてフォーマットされます。
xmlまたはkmlを指定すれば、レスポンスはXMLまたはKMLで返されます。
XMLとKMLの出力はMIMEタイプを除けば、中味は同一です。
例えば、これは、「1600 amphitheatre mtn view ca」に対するジオコーダのレスポンスです。
<kml>
<Response>
<name>1600 amphitheatre mtn view ca</name>
<Status>
<code>200</code>
<request>geocode</request>
</Status>
<Placemark>
<address>
1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA
</address>
<AddressDetails>
<Country>
<CountryNameCode>US</CountryNameCode>
<AdministrativeArea>
<AdministrativeAreaName>CA</AdministrativeAreaName>
<SubAdministrativeArea>
<SubAdministrativeAreaName>Santa Clara</SubAdministrativeAreaName>
<Locality>
<LocalityName>Mountain View</LocalityName>
<Thoroughfare>
<ThoroughfareName>1600 Amphitheatre Pkwy</ThoroughfareName>
</Thoroughfare>
<PostalCode>
<PostalCodeNumber>94043</PostalCodeNumber>
</PostalCode>
</Locality>
</SubAdministrativeArea>
</AdministrativeArea>
</Country>
</AddressDetails>
<Point>
<coordinates>-122.083739,37.423021,0</coordinates>
</Point>
</Placemark>
</Response>
</kml>
もし、作成したプログラムが動いていないようであれば、次のことが問題解決に役立つかもしれません。
ここに、いくつかの追加情報があります。 これらのサイトは、グーグルが所有しているもの、あるいは支援しているものではありません。
この「APIの概要」では、Maps APIの主要な概念を説明します。Maps APIによってエクスポートされたメソッドとクラスの完全なリファレンスは、Maps APIクラスリファレンスを参照してください。
GMap2クラスGMap2のインスタンスはページに一つの地図を表示します。必要な数だけこのクラスのインスタンスを作成することができます(ページの各地図あたり1つ)。新しい地図インスタンスを作成するとき、地図を含むためにページには命名された要素を指定します(通常div要素)。もしサイズを指定しなければ、地図はサイズを決定するためコンテナのサイズを使用します。
GMap2クラスは、地図の中心とズームレベルを操作し、オーバーレイ(GMarkerとGPolylineのインスタンスのような)を加えたり、削除するメソッドを持っています。さらに、それは「情報ウィンドウ」をオープンするメソッドを持っています。これは Google Maps上で見るポップアップ・ウィンドウです。より詳細には、「情報ウィンドウ」を参照してください。
GMap2についての詳細は、GMap2クラス参照 を参照してください。
イベントリスナーを使用することによって、ダイナミックな要素をアプリケーションに追加することができます。
オブジェクトは多くの命名されたイベントをエクスポートします。
また、アプリケーションはスタティックなメソッドのGEvent.addListenerとGEvent.bindを使用することでこれらのイベントのリスナーを定義することもできます。例えば、次のコードは、ユーザが地図をクリックするときはいつもアラートを表示します。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
GEvent.addListenerは3番目の引数として関数を設定します。ここではイベントハンドラのための関数クロージャの使用がお勧めです。あるクラスのインスタンスにおけるメソッドにイベントをバインドしたいなら、あなたはGEvent.bindを使用することができます。以下の例では、アプリケーションクラスインスタンスはそれ自身のメソッドに地図イベントをバインドします、イベントが引き起こされるときクラスの状態を変更します。
function MyApplication() {
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.bind(this.map, "click", this, this.onMapClick);
}
MyApplication.prototype.onMapClick = function() {
this.counter++;
alert("You have clicked the map " + this.counter + " " +
(this.counter == 1 ?"time" : "times"));
}
var application = new MyApplication();
各地図には、「情報ウィンドウ」を表示することができます。これは、地図上に浮いているウィンドウの中にHTML形式のコンテンツを表示するものです。情報ウィンドウは漫画雑誌のフキダシに少し似ています。それには、コンテンツエリアと先細りしている軸があります。軸の先が軸に地図の指定されたポイントです。Google Mapsで情報ウィンドウが動作中であることはマーカーをクリックすることによって、見ることができます。
一つの地図上で同時に複数の情報ウィンドウを表示させることはできません。しかし、情報ウィンドウを動かして、必要に応じてコンテンツを変えることはできます。
基本的な情報ウィンドウのメソッドはopenInfoWindowです。これは引数としてポイントとHTML DOM要素を持ちます。
HTML DOM要素を情報ウィンドウのコンテナに追加されると情報ウィンドウの先は、与えられたポイントに据えつけられます。
openInfoWindowHtmlメソッドも同様ですが、引数にはDOMエレメントではなく、HTMLストリングを指定します。
マーカーのようなオーバーレイの上に情報ウィンドウを表示するために、指定したポイントと情報ウィンドウの先の間でピクセル・オフセットを指定する3番目の引数（任意）を指定することもできます。
マーカーが10ピクセルの高さの場合、ピクセル・オフセットとしてGSize(0,-10)を指定することができます。
GMarkerクラスがアイコンの大きさや形状に基づいてピクセル・オフセット問題を扱うopenInfoWindowメソッドをエクスポートするので、通常はアプリケーションでアイコンのオフセットの計算を気にする必要はありません。
詳しい情報はGMap2とGMarkerクラスリファレンスを見てください。
オーバーレイは地図の上の緯度/経度座標に結び付けられたオブジェクトです。地図をドラッグするかズームさせるとき、あるいは地図の投影法を変更したとき（地図から航空写真に切り替えたときなど）、これらは動きます。
Maps APIは2つのタイプのオーバーレイをエクスポートします: マーカー（地図の上のアイコン）とポリライン（一連のポイントをつなげた線）です。
GMarkerコンストラクタは、アイコンと位置（ポイント）を引数として持ち、「クリック」のような小さいセットのイベントをエクスポートします。マーカーを作成する簡単な例として、overlay.htmlを見てください。
マーカーを作成する上で最も難しい部分がアイコンの指定です。このアイコンは複雑です。なぜなら、たった一つのアイコンを作るにも異なった複数のイメージを扱わなければならないからです。
すべてのアイコンは、フォアグラウンド画像と影画像を持ちます。 フォアグラウンド画像に対し影画像は45度(上向きかつ右方向へ)で作成され 影画像の下部左隅はアイコンのフォアグラウンド画像の下部左隅に並べられなければなりません。影画像はアルファ透明の24ビットのPNGイメージなので、影画像の縁は地図の上で正しく見えます。
GIconクラスは、Maps APIが適切なサイズのイメージ要素を作成することができるようにアイコンを初期化するとき、これらのイメージのサイズを指定するよう要求します。
これはアイコンを指定するのに必要最小限のコードです(この場合、アイコンはGoogle Mapsを使用する):
var icon = new GIcon(); icon.image = "http://www.google.com/mapfiles/marker.png"; icon.shadow = "http://www.google.com/mapfiles/shadow50.png"; icon.iconSize = new GSize(20, 34); icon.shadowSize = new GSize(37, 34);
また、GIcon クラスには、アイコンから最大のブラウザの互換性と機能性を得るように設定するべきである他の数個の特性があります。例えば、imageMapプロパティはアイコンイメージの非透過の部品の形を指定します。アイコンにこのプロパティをセットしないと、全体のアイコンイメージ(透明な部分を含む)はFirefox/Mozillaでクリック可能になってしまうでしょう。詳しい情報はGIcon classリファレンスを見てください。
GPolylineコンストラクタは、引数としてポイントの配列をもち、順に与えられたポイントを接続する一連の線を作成します。
線の色、太さ、および不透明を指定することができます。
色は16進の数値HTMLスタイル、例えば、red（赤）の代わりに #ff0000を使います。
GPolylineはカラーネームを理解できません。
以下のコードは2点間で10ピクセル幅の赤いポリラインを作成します。
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(37.44, -122.14), 14);
var polyline = new GPolyline([
new GLatLng(37.4419, -122.1419),
new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);
インターネット・エクスプローラーでは、Google Mapsはポリラインを描くのにVMLを使用します(詳しい情報に関して「XHTMLとVML」を見てください)。他のすべてのブラウザでは、Googleサーバから線のイメージを要求し、そのイメージを地図上にオーバーレイします。この時、地図がズームされたりドラッグされると必要に応じてイメージはリフレッシュされます。
ズームバーのようなコントローラを加えるために、addControlメソッドを使います。 Maps APIは地図で使えるビルトインのコントローラを提供します。
GLargeMapControl - Google Localで使われる大きいな移動/ズームコントローラー。 地図の左上角に現れます。GSmallMapControl - Google Mapsで使われる小さい移動/ズームコントローラー。 地図の左上角に現れます。GSmallZoomControl - Google Localで使われる小さな移動/ズームコントローラー。 地図の左上角に現れます。GScaleControl - 地図のスケールGMapTypeControl -(地図と航空写真のような)マップタイプ間のトグルボタンGOverviewMapControl New! - 画面の隅での折りたたみ可能な概要地図例えば、Google Mapsで自分の地図に移動/ズームコントローラーを加えるには、地図の初期化で以下の行を入れられるでしょう:
var map = new GMap2(document.getElementById('map'));
map.addControl(new GLargeMapControl());
addControlは、地図上でコントローラの位置を指定するためにオプションとして2番目のGControlPosition
var map = new GMap2(document.getElementById('map'));
map.addControl(new GMapTypeControl(),
new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));
詳しい情報はGControlPositionクラスリファレンスを見てください。
Google Maps APIは、Internet Explolerの最近のバージョン、 Firefox、およびSafariで動くようにXmlHttpRequestオブジェクトを作成するためのファクトリーメソッドをエクスポートします。以下の例は、myfile.txt と呼ばれるファイルをダウンロードして、JavaScriptのアラートウィンドウにコンテンツを表示します。
var request = GXmlHttp.create();
request.open("GET", "myfile.txt", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
alert(request.responseText);
}
}
request.send(null);
APIはXmlHttpRequestのreadyStateのチェックの必要性を除去するGDownloadUrlと呼ばれる典型的なHTTP GETリクエストのための簡単なメソッドをエクスポートします。以下のようにGDownloadUrlを使用することで上の例を書き直すことができるでしょう:/p>
GDownloadUrl("myfile.txt", function(data, responseCode) {
alert(data);
});
唯一の引数としてXMLの文字列をとる静的メソッドGXml.parseを使って、XMLドキュメントを解析することができます。
このメソッドは最近のブラウザであればほとんどのものと互換性があります。ただし、ブラウザがXMLのパージングをネイティブでサポートしない場合は例外を投げます。
詳しい情報はGXmlHttpとGXmlクラスリファレンスを見てください。
Google Maps APIは、 関数クロージャの使用を奨励します。
そして、APIイベントハンドリングシステムのGEventは、幾つかのブラウザ（特にInternet Exploler）のメモリリークを引き起こすような方法ででしか、DOM ノードにイベントを添付することができません。Maps APIのバージョン２では、新しいメソッドが用意されています。GUnload()というメソッドはメモリリークを引き起こす循環参照をほとんど削除することができます。したがって、メモリリークの可能性を減らすためにも、unloadイベントの中でGUnload()を呼び出しましょう。
<body onunload="GUnload()">
この関数を使用すると、Internet Explolerのメモリリークを実際にGoogle Mapsで排除することができます。ただし、メモリ消費の問題に気づいているのであれば、上記の変更後にメモリリークを引き起こさないことをDripのようなツールを用いて確認してください。