このドキュメントはGoogle Maps API Version 2 Documentationを元に翻訳いたしました。

Google Maps API Version 2ドキュメント
Google Maps API Version 2 Documentation

Google Maps JavaScript APIで、あなたはGoogle Mapsをあなたのウェブページに埋め込むことができます。 APIを使用するためには、APIキーに申し込みをするのが必要があり、そして以下での使用法に従います。
The Google Maps JavaScript API lets you embed Google Maps in your own web pages. To use the API, you need to sign up for an API key, and then follow the instructions below.

APIが新しいので、バグとわずかにあまり完全でないドキュメンテーションがあるかもしれません。私たちが穴をふさぐのを我慢していただいて、Maps APIディスカッション・グループに加わり、フィードバックとAPIについて議論をしてください。
The API is new, so there may be bugs and slightly less than perfect documentation. Bear with us as we fill in the holes, and join the Maps API discussion group to give feedback and discuss the API.

このドキュメンテーションは2006年4月3日に始められたMaps APIのバージョン2を示します。もしあなたがMaps APIのバージョン1を使うなら(2006年4月3日以前に、サイトを開発していたら)、あなたのウェブサイトをアップグレードさせるのを試みるべきです。以下を見てください。
This documentation refers to Version 2 of the Maps API, launched on April 3, 2006. If your API uses Version 1 of the Maps API (i.e., you developed your site before April 3, 2006), you should attempt to upgrade your web site. Please see:

コンテンツ一覧
Table of Contents

対象読者 Audience

はじめに Introduction: Google Mapsの"Hello, World" The Hello World of Google Maps; ブラウザ互換性 Browser Compatibility; XHTMLとVML XHTML and VML; APIの更新 API Updates; 住所からの地理座標検索と経路検索 Geocoding and Routing

使用例 Examples: 基本 The Basics; 地図の移動とアニメーション Map Movement and Animation; 地図へのコントローラ追加 Adding Controls to the Map; イベントリスナー Event Listeners; インフォウィンドウを開く Opening an Info Window; マップオーバーレイ Map Overlays; クリックハンドリング Click Handling; マーカー上にインフォウィンドウ Display Info Windows Above Markers; タブ付きインフォウィンドウ Tabbed Info Windows New!; アイコンの作成 Creating Icons; Iconクラスを使う Using Icon Classes; XMLとAJAXを使う Using XML and Asynchronous RPC ("AJAX") with Maps; カスタムマップコントローラー Custom Map Controls New!; カスタムオーバーレイ Custom Overlays New!

トラブルシューティング Troubleshooting: 他のリソース Other resources

API概要 API Overview: GMap2クラス The GMap2 class; イベント Events; インフォウィンドウ The Info Window; オーバーレイ Overlays; コントローラー Controls New!; XMLとRPC XML and RPC; ブラウザメモリーリークの減少 Reducing Browser Memory Leaks New!

クラスリファレンス Class Reference New!

対象読者
Audience

このドキュメンテーションはJavaScriptプログラミングとオブジェクト指向プログラミング概念に詳しい人々のために設計されます。また、あなたもユーザの観点からのGoogle Mapsに詳しくあるべきです。ウェブで利用可能な多くのJavaScriptチュートリアルがあります。
This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. You should also be familiar with Google Maps from a user's point of view. There are many JavaScript tutorials available on the Web

はじめに
Introduction

Google Mapsの"Hello, World"
The "Hello, World" of Google Maps

このAPIに関して学び始める最も容易な方法は簡単な例を見ることです。以下のウェブページは500×3000サイズの地図がパロアルト(カリフォルニア)の中心を表示します。
The easiest way to start learning about this API is to see a simple example. The following web page displays a 500x300 map centered on Palo Alto, California:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

編集してさわるためにこの例をダウンロードすることができますが、あなたはそのファイルの中のキーをあなた自身のMaps APIキーに取り替えなければいけません。 (あなたが特定のディレクトリのためにキーを登録するなら、それはすべてのサブディレクトリで動きます。)
You can download this example to edit and play around with it, but you'll have to replace the key in that file with your own Maps API key. (If you register a key for a particular directory, it works for all subdirectories as well.)

上の例のURL(http://maps.google.com/maps?file=api&v=2)は、Google Mapsをあなたのページに置くのに必要とするシンボルのすべてを含んでいるJavaScriptファイルの位置です。あなたのページはAPIに申し込みをし手に入れたキーを使用して、上記URLを含むscriptタグを含まなければなりません。あなたのMaps APIキーが"abcdefg"であるなら、あなたのscriptタグは以下のようになる:
The URL in the example above (http://maps.google.com/maps?file=api&v=2) is the location of a JavaScript file that includes all of the symbols you need for placing Google Maps on your pages. Your page must contain a script tag pointing to that URL, using the key you got when you signed up for the API. If your Maps API key were "abcdefg", then your script tag might look like this:

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
        type="text/javascript">
</script>

地図を表すクラスはGMap2です。このクラスはページに一つの地図を描写します。あなたはこのクラスのインスタンスを必要なだけ(ページの各地図あたり1つ)作成することができます。新しい地図インスタンスを作成するとき、あなたは、地図を含むようにページ内の命名された要素(通常はdiv要素)を指定します。あなたが明確に地図にサイズを指定しないなら、サイズを決定するのにコンテナのサイズを使用します。
The class that represents a map is GMap2. This class represents a single map on the page. You can create as many instances of this class as you want (one for each map on the page). When you create a new map instance, you specify a named element in the page (usually a div element) to contain the map. Unless you specify a size explicitly for the map, the map uses the size of the container to determine its size.

ブラウザ互換性
Browser Compatibility

Google Maps APIはGoogle Localサイトと同じブラウザをサポートします。異なったアプリケーションはユーザのために互換性ないブラウザで異なった振舞いを必要とするので、互換性をチェックする為にMaps APIはグローバルなメソッドである(GBrowserIsCompatible())を提供しますが、それは互換性ないブラウザを検出するのに少しの自動振舞いもしません。スクリプトhttp://maps.google.com/maps?file=api&v=2は誤りなしでほとんどすべてのブラウザにおいて解析することができるので、互換性をチェックする前に、安全にそのスクリプトをインクルードすることができます。
The Google Maps API supports the same browsers as the Google Local site. Since different applications require different behaviors for users with incompatible browsers, the Maps API provides a global method (GBrowserIsCompatible()) to check compatibility, but it does not have any automatic behavior when it detects an incompatible browser. The script http://maps.google.com/maps?file=api&v=2 can be parsed in almost every browser without errors, so you can safely include that script before checking for compatibility.

本書での例は、いずれも互換性のためのチェックをしません(上記の最初の例を除いて)。そして、より古いブラウザのためにエラーメッセージを表示しません。明確に、実際のアプリケーションは互換性ないブラウザに何かより好意的なことをするべきですが、私たちは、例をより読み込み可能にするようにそのようなチェックを省略しました。
None of the examples in this document check for compatibility (other than the first example, above), nor do they display an error message for older browsers. Clearly real applications should do something more friendly with incompatible browsers, but we have omitted such checks to make the examples more readable.

平凡ではないアプリケーションは必然的にブラウザとプラットホームの間の矛盾に遭遇するでしょう。これらの問題へのどんな簡単な解決もありませんが、Google Maps API ディスカッション・グループとquirksmode.orgは回避策を見つける両方の良いリソースです。
Non-trivial applications will inevitably encounter inconsistencies between browsers and platforms. There is no simple solution to these problems, but the Google Maps API discussion group and quirksmode.org are both good resources to find workarounds.

XHTMLとVML
XHTML and VML

私たちは地図を含むページで標準準拠XHTMLの使用を推奨します。ブラウザがページの上部にXHTML DOCTYPEを見るとき、ページを「規格承諾モード」にでレンダリングします。(それは、レイアウトと振舞いをブラウザの向こう側にはるかに予測できるようにします)。
We recommend that you use standards-compliant XHTML on pages that contain maps. When browsers see the XHTML DOCTYPE at the top of the page, they render the page in "standards compliance mode," which makes layout and behaviors much more predictable across browsers.

あなたの地図上でpolylinesを見せたいなら(運転指示を示すのにGoogle Mapsによって使用された線のようなもの)、IEで適切にすべてが動くように、XHTMLドキュメントにVML名前空間と何らかのCSSコードを含む必要があります。あなたのXHTMLドキュメントの始まりはこのようにすべきです:
If you want to show polylines on your map (like the lines used by Google Maps to show driving directions), you need to include the VML namespace and some CSS code in your XHTML document to make everything work properly in IE. The beginning of your XHTML document should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>My Google Maps Hack</title>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
             type="text/javascript"></script>
  </head>

APIの更新
API Updates

URL http://maps.google.com/maps?file=api&v=2 のv=2部分はAPIの「バージョン2」を参照します。私たちが将来APIに重要なアップデートをするとき、Google CodeとMaps API ディスカッション・グループでバージョン番号を変えて、掲示を出すつもりです。
The v=2 part of the URL http://maps.google.com/maps?file=api&v=2 refers to "Version 2 " of the API. When we do a significant update to the API in the future, we will change the version number and post a notice on Google Code and the Maps API discussion group.

新しいバージョンがリリースされた後に、私たちは古いのと新しいバージョンをおよそ1カ月並行して動くようにするでしょう。 1カ月後に、古いバージョンはオフにされるでしょう、そして、古いバージョンを使用するコードはもう動かないでしょう。
After a new version is released, we will try to run the old and new versions concurrently for about a month. After a month, the old version will be turned off, and code that uses the old version will no longer work.

Mapsチームは最新のバグフィックスとパフォーマンス強化でAPIをアップデートします。これらのバグフィックスは、性能の向上とバグを修理の為にするべきですが、私たち偶然にもいくつかのAPIクライアントをとめるかもしれません。どうかMaps API ディスカッション・グループを使用して、そのような問題を報告してください。
The Maps team transparently updates the API with the most recent bug fixes and performance enhancements. These bug fixes should only improve performance and fix bugs, but we may inadvertently break some API clients. Please use the Maps API discussion group to report such issues.

住所からの地理座標検索と経路検索
Geocoding and Routing

今回Google Maps APIは住所からの地理座標検索もしくは経路検索サービスは含みません。しかしながら、多くの自由なfree geocodersがウェブにあります。
The Google Maps API does not include geocoding or routing services at this time. However, there are a number of free geocoders on the web.

使用例
Examples

それぞれに関する以下の例は完全なHTMLファイルではなく、関連JavaScriptコードだけを示します。あなたが、先に示された骸骨のHTMLファイルにJSコードを接続することができます。例の後にリンクをクリックすることによって、各例のための完全なHTMLファイルをダウンロードすることができます。???
Each of the following examples shows only the relevant JavaScript code, not the full HTML file. You can plug the JS code into the skeleton HTML file shown earlier, or you can download the full HTML file for each example by clicking the link after the example.

基本
The Basics

以下の例は、地図を作成して、中心をパロアルト(カリフォルニア)にします。
The following example creates a map and centers it on Palo Alto, California.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

使用例を見るView example (simple.html)

地図の移動とアニメーション
Map Movement and Animation

以下の例は値巣を表示し、2秒後に新しい中心位置へパンします。
The following example displays a map, waits two seconds, and then pans to a new center point.

panToメソッドは地図の中心を与えられた地点にします。指定されたポイントが地図の目に見える部分にあるなら、地図はスムーズにポイントにパンされます; そうでなければ、地図はポイントまでジャンプします。
The panTo method centers the map at a given point. If the specified point is in the visible part of the map, then the map pans smoothly to the point; if not, the map jumps to the point.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
  map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000);

使用例を見るView example (animate.html)

地図へのコントローラ追加
Adding Controls to the Map

addControlメソッドで地図にコントローラを追加することが出来ます。この場合、ビルトインのGSmallMapControlとGMapTypeControlで、地図のパン/ズーム、マップとサテライト間の変更のそれぞれを追加します。
You can add controls to the map with the addControl method. In this case, we add the built-in GSmallMapControl and GMapTypeControl controls, which let us pan/zoom the map and switch between Map and Satellite modes, respectively.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

使用例を見るView example (controls.html)

イベントリスナー
Event Listeners

イベントリスナーを登録するのはGEvent.addListenerメソッドを呼び出す。それを渡される。聞くためのイベント、指定されたイベントが起きたときに呼ぶための関数。??? 例のコードでは、地図をドラッグした後に地図の中心の緯度と経度を表示します。
To register an event listener, call the GEvent.addListener method. Pass it a map, an event to listen for, and a function to call when the specified event occurs. In the following example code, we display the latitude and longitude of the center of the map after the user drags the map.

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);

使用例を見るView example (event.html)

イベントについての情報はEvents Overviewを見てください。 GMap2イベントに関する全リストとそれらが生成する引数はGMap2.Eventsをみてください。
For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.Events.

インフォウィンドを開く
Opening an Info Window

インフォウィンドウを作るためにopenInfoWindowメソッドを呼び出し、ロケーションと表示するためのDOMエレメントを渡します。以下の例では地図の中心にインフォウィンドウを表示し"Hello, world"メッセージを表示します。
To create an info window, call the openInfoWindow method, passing it a location and a DOM element to display. The following example code displays an info window anchored to the center of the map with a simple "Hello, world" message.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),
                   document.createTextNode("Hello, world"));

使用例を見るView example (infowindow.html)

マップオーバーレイ
Map Overlays

この例は地図上のランダムなロケーションに10個のマーカーとランダムな5地点を表示します。 GMarkerは他のアイコンを与えられなければデフォルトのGoogle Mapsアイコンを使用します。カスタムアイコンを使用する例はCreating Iconsを見てください。
This example displays 10 markers at random locations on the map and a polyline with 5 random points. GMarker use the default Google Maps icon if no other icon is given. See Creating Icons for an example using custom icons.

IEでポリラインを表示させるためにはVMLネームスペースとCSSをHTMLドキュメントに含ませるのを忘れないでください。さらなる情報はXHTML and VMLを見てください。
Remember that you must include the VML namespace and CSS in your HTML document to view polylines in IE. See XHTML and VML for more information.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

//地図上のランダムな位置に10個のマーカーを加える
// 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));
}
//無作為の5ポイントにpolylineを加える。 線自体が交差しないように、
//経度のそばでポイントをソートする。
// 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));

使用例を見るView example (overlay.html)

クリックハンドリング
Click Handling

ユーザが地図をクリックすしたときのトリガーとして、GMap2インスタンスにおける"click"イベントのためにリスナーを登録してください。イベントが引き起こされるとき、イベントハンドラは2つの引数を受けるでしょう: クリックされたマーカー(もしあるならば)、およびクリックされたポイントのGLatLng。マーカーが全くクリックされなかったなら、最初の引数はnullになるでしょう。
To trigger an action when a user clicks the map, register a listener for the "click" event on your GMap2 instance. When the event is triggered, the event handler will receive two arguments: the marker that was clicked (if any), and the GLatLng of the clicked point. If no marker was clicked, the first argument will be null.

注意:マーカーは"click"イベントをサポートする唯一のビルトインのオーバーレイです。 GPolylineのようなほかのタイプのオーバーレイはクリックできません。
Note: Markers are the only built-in overlay that supports the "click" event. Other types of overlays, like GPolyline, are not clickable.

以下の使用例ではマーカー外の地図上をクリックしたとき、その地点に新しいマーカーを作ります。マーカーをクリックすると地図上から削除します。
In the following example, when the visitor clicks a point on the map without a marker, we create a new marker at that point. When the visitor clicks a marker, we remove it from the map.

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));
  }
});

使用例を見るView example (click.html)

イベントについてのさらなる情報はEvents Overviewをみてください。 GMap2イベントの全リストとそれらが生成する引数はGMap2.Eventsを見てください。
For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.Events.

マーカー上にインフォウィンドウを表示する。
Display Info Windows Above Markers

この例ではそれぞれのマーカーのクリックイベントをリッスンすることで、それぞれのマーカーの上にカスタムインフォウィンドウを表示します。それぞれのマーカーのインフォウィンドウコンテンツをカスタマイズするにはJavaScript function closuresを利用します。
In this example, we show a custom info window above each marker by listening to the click event for each marker. We take advantage of JavaScript function closures to customize the info window content for each marker.

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;
}
// 10個のマーカーを地図のランダムな位置に追加する
// 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));
}

使用例を見るView example (markerinfowindow.html)

イベントについてのさらなる情報はEvents Overviewを見てください。 GMap2イベントの全リストとそれらが生成する引数についてはGMap2.Eventsを見てください。
For more information about events, see the Events Overview. For a complete list of GMap2 events and the arguments they generate, see GMap2.Events.

タブ付きインフォウィンドウ
Tabbed Info Windows

APIのバージョン2はタブと名づけられた複数のインフォウィンドウをサポートするためにopenInfoWindowTabs()とGInfoWindowTabクラスを取り入れました。下の例ではマーカー上にシンプルなタブ付きインフォウィンドウを表示します。
Version 2 of the API introduces openInfoWindowTabs() and the GInfoWindowTab class to support info windows with multiple, named tabs. The example below displays a simple tabbed info window above a single marker.

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);

使用例を見るView example (tabbedinfowindow.html)

アイコンの作成
Creating Icons

このサンプルでは例としてGoogle Ride Finder"mini"マーカーを使って新しいタイプのアイコンを作ります。私たちはフォアグラウンド画像、影のイメージ、およびアイコンを地図に据えつけて、インフォメーションウィンドウをアイコンに据えつけるポイントを指定しなければなりません。
This example creates a new type of icon, using the Google Ride Finder "mini" markers as an example. We have to specify the foreground image, the shadow image, and the points at which we anchor the icon to the map and anchor the info window to the icon.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// "tiny"マーカーアイコンを作る
// 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);

// 10個のマーカーを地図のランダムな位置に追加する
// 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));
}

使用例を見るView example (icon.html)

Iconクラスを使う
Using Icon Classes

いくつ物場合において、あなたのアイコンは異なったフォアグラウンドをしていると思うが、同じ形と影であろう。この振舞いを達成する最も簡単な方法は=GIcon=クラスにコピーコンストラクタを使用することです。 (それは、次にあなたがカスタム設計することができる新しいアイコンへのすべての特性をコピーします)。
In many cases, your icons may have different foregrounds, but the same shape and shadow. The easiest way to achieve this behavior is to use the copy constructor for the =GIcon= class, which copies all the properties over to a new icon which you can then customize.

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;
}

// 10個のマーカーを地図のランダムな位置に追加する
// 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));
}

使用例を見るView example (iconclass.html)

XMLと地図による非同期なHTTPを使う
Using XML and Asynchronous HTTP with Maps

この例では、GDownloadUrlメソッドを使って経度緯度座標のリストを含む静的ファイル("data.xml")をダウンロードします。そしてXMLの地点にマーカーを作成します。ダウンロードが完了したとき、GXmlでXMLを分析(パース)して、XMLドキュメントのそれぞれのポイントにマーカーを作成します。
In this example, we download a static file ("data.xml") that contains a list of lat/lng coordinates in XML using the GDownloadUrl method. When the download completes, we parse the XML with GXml and create a marker at each of those points in the XML document.

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// data.xmlのデータをダウンロードして、地図にロードする。
// フォーマットは以下のように
// 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));
  }
});

使用例を見るView example (async.html). この例は外部のXMLデータファイルdata.xmlを使います。
This example uses the external XML data file data.xml.

カスタムマップコントローラー
Custom Map Controls

Maps APIのバージョン2ではビルトインのサブクラスであるGControlクラスによってビルトインのパン、スームのようなカスタムマップコントローラーを可能にする事を取り入れました。この例ではグラフィカルな標準のGoogle Mapsズームコントローラーよりもむしろシンプルなテキストリンクによるズームコントローラーを作成します。
Version 2 of the Maps API introduces the ability to create custom map controls, like the built-in pan and zoom controls, by subclassing the built-in GControl class. In this example, we create a simple zoom control that has textual links rather than the graphical icons used in the standard Google Maps zoom control.

GTextualZoomControlクラスはGControlインターフェースの二つの必要なメソッドを定義します。コントローラをあらわすDOMエレメントを作成するinitialize()、コントロールを地図に追加するとき、別の位置を与えない場合に使用するGControlPositionを返すgetDefaultPosition() カスタムコントローラを作成するときにオーバーライドできるメソッドについてのさらなる情報はclass reference for GControlを見てください。
The GTextualZoomControl class defines the two required methods of the GControl interface: initialize(), in which we create the DOM elements representing our control; and getDefaultPosition(), in which we return the GControlPosition used if another position is not given when this control is added to a map. See the class reference for GControl for more information about the methods you can override when you create your custom controls.

全てのマップコントローラはGMap2のgetContainer()メソッドからアクセスできるマップcontainerに追加されるべきです。
All map controls should be added to the map container which can be accessed with the getContainer() method on GMap2.

// TextualZoomControlは(Google Mapsで使用されるアイコンボタンと対照的な)
// "Zoom In"と"Zoom Out"ボタンのGControlです。
// 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();

// それぞれのボタンのために1つのDIVを作成して、それらを制御要素として返される
// DIVコンテナに置きます。地図コンテナにコントロールを加えて、適切な場所の
// マップクラスに要素を返します。
// 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;
}

// デフォルトでコントローラーは7ピクセルパディングされた左上角に
// 表示されるだろう。
// 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));
}

// 与えられたボタンの要素に適切なCSSを設定する
// 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);

使用例を見るView example (customcontrol.html)

カスタムオーバーレイ
Custom Overlays

Maps APIのバージョン2は、ビルトインのGMarkerとGPolylineオーバレイのように、ビルトインのGOverlayクラスをサブクラスにすることによって、カスタム地図オーバレイを作成可能とすることを取り入れました。この例では地図上に地理領域境界線のRectangleオーバーレイを作成します。
Version 2 of the Maps API introduces the ability to create custom map overlays, like the built-in GMarker and GPolyline overlays, by subclassing the built-in GOverlay class. In this example, we create a Rectangle overlay that outlines a geographic region on the map.

RectangleクラスはGOverlayインターフェースの4つのメソッドを定義します: オーバレイを表すDOM要素を作成するinitialize(); 地図からオーバレイ要素を取り除くremove(); 別の地図インスタンスにおける使用のためにオーバレイをコピーするcopy(); 地図の上のオーバレイが現在の投影図法とズームレベルに基礎づけた位置とサイズのredraw()。カスタムオーバーレイを作成するときのオーバーライドできるメソッドについてのさらなる情報はclass reference for GOverlayを見てください。
The Rectangle class defines the four required methods of the GOverlay interface: initialize(), in which we create the DOM elements representing our overlay; remove(), in which we remove the overlay elements from the map; copy(), which copies the overlay for use in another map instance; and redraw(), which positions and sizes the overlay on the map based on the current projection and zoom level. See the class reference for GOverlay for more information about the methods you can override when you create your custom overlays.

オーバレイを作るあらゆるDOMエレメントがえがかれたであろう所のz-orderを定義するmap paneに実在する。??? たとえばポリラインは地図に対してフラットであり、それらは一番底のG_MAP_MAP_PANEに描かれる。マーカーはG_MAP_MARKER_SHADOW_PANEの影の要素とG_MAP_MARKER_PANEのフォアグランド要素を置きます。あなたのオーバレイ要素を正しい枠に置くのは、ポリラインがマーカー影の下で描かれ、インフォメーションウィンドウが地図上の他のオーバレイの上に描かれるのを確実にします。??? この例では、私たちのオーバレイが地図に対して平坦であるので、私たちは枠のG_MAP_MAP_PANEという最も低いz-orderにそれを加えます、まさしくGPolylineのように。地図枠に関する全リストのclass referenceを見てください。
Every DOM element that makes up an overlay exists on a map pane that defines the z-order at which it will be drawn. For example, polylines are flat against the map, so they are drawn in the lowest G_MAP_MAP_PANE. Markers place their shadow elements in the G_MAP_MARKER_SHADOW_PANE and their foreground elements in the G_MAP_MARKER_PANE. Placing your overlay elements in the correct panes ensures that polylines are drawn below marker shadows and the info window is drawn above other overlays on the map. In this example, our overlay is flat against the map, so we add it to the lowest z-order pane G_MAP_MAP_PANE, just like GPolyline. See the class reference for a complete list of map panes.

// 矩形は地図の上のlat/lng領域について概説する簡単なオーバレイです。
// それは、与えられた太さと色の境界を持っていて、任意に半透明なバックグラウンド色を
//持つことができます。
// 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();

// この矩形を表すDIVを作成する。
// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
  // 矩形を表すDIVを作成
  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.position = "absolute";

  // 矩形が地図に対して平坦であるので、地図自体と同じz-indexなMAP_PANE枠に
  // 自身を加えます。(すなわち、マーカー影の下)
  // 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;
}

// 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;

  // 領域の対角である2のDIV座標について、矩形のサイズと位置を得るのに計算する
  // 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());

  // 今度は、領域のDIV座標に基づくDIVを置く
  // 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);

// 地図のセンターにメインマップの1/4サイズの矩形を表示する
// 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));

使用例を見るView example (customoverlay.html)

トラブルシューティング
Troubleshooting

あなたのコードが働いているように思えないなら、ここに、あなたが問題を解決するのを助けるかもしれないいくつかのアプローチがあります: If your code doesn't seem to be working, here are some approaches that might help you solve your problems:

あなたのAPIキーが有効か確認してください。
Make sure your API key is valid.
誤字脱字を探してください。 JavaScriptが大文字と小文字を区別する言語であることを覚えていてください。
Look for typos. Remember that JavaScript is a case-sensitive language.
JavaScriptデバッガを使用してください。ファイヤーフォックスでは、あなたはJavaScriptコンソールかVenkman Debuggerを使用することができます。 IEでは、あなたはマイクロソフトScript Debuggerを使用することができます。
Use a JavaScript debugger. In Firefox, you can use the JavaScript console or the Venkman Debugger. In IE, you can use the Microsoft Script Debugger.
Maps APIディスカッション・グループを捜してください。あなたの質問にお答えするポストを見つけることができないなら、問題を示すウェブページへのリンクに伴うグループに質問を掲示してください。
Search the Maps API discussion group. If you can't find a post that answers your question, post your question to the group along with a link to a web page that demonstrates the problem.
サードパーティ開発者リソースに関してOther Resourcesを見てください。
See Other Resources for third party developer resources.

他のリソース
Other resources

ここに、いくつかの追加リソースがあります。これらのサイトがGoogleによって所有されていないし、またはサポートされないのに注意してください。
Here are some additional resources. Note that these sites are not owned or supported by Google.

MapkiはFAQ pageページを含むMaps APIに関する情報があるポピュラーなwikiです。
Mapki is a popular wiki with information about the Maps API, including an FAQ page.

API概要
API Overview

API OverviewはMaps APIの主要な概念をウォークスルーします。APIによってエクスポートされたメソッドとクラスの完全なリファレンスに関しては、Maps API Class Referenceを見てください。
The API Overview walks through the central concepts of the Maps API. For a complete reference of methods and classes exported by the API, see the Maps API Class Reference.

GMap2クラス
The GMap2 class

GMap2のインスタンスはページに一つの地図を表示します。あなたはこのクラスの好きなだけ多くのインスタンスを作成することができます(ページの各地図あたり1つ)。新しい地図インスタンスを作成するとき、あなたは、地図を含むようにページの命名された要素を指定します(通常div要素)。あなたが明らかにサイズを指定しないなら、地図は、サイズを決定するのにコンテナのサイズを使用します。
An instance of GMap2 represents a single map on the page. You can create as many instances of this class as you want (one for each map on the page). When you create a new map instance, you specify a named element in the page (usually a div element) to contain the map. Unless you specify a size explicitly, the map uses the size of the container to determine its size.

GMap2クラスに、地図のセンター、ズームレベル、オーバレイの追加と削除などを操る(GMarkerやGPolyline例などの)。また、それには、「インフォメーションウィンドウ」を開く方法があります。(それは、あなたがGoogle Mapsで見るポップアップウィンドウです)。さらなる情報はThe Info Windowを見てください。
The GMap2 class has methods to manipulate the map's center and zoom level and to add and remove overlays (such as GMarker and GPolyline instances). It also has a method to open an "info window," which is the popup window you see on Google Maps. See The Info Window for more information.

GMap2についてのさらなる情報はGMap2クラスリファレンスを見てください。
For more information about GMap2, see the GMap2 class reference.

イベント
Events

あなたは、イベントリスナーを使用することによって、ダイナミックな要素をアプリケーションに追加することができます。オブジェクトは多くの命名されたイベントをエクスポートします、そして、あなたのアプリケーションは静的なメソッドのGEvent.addListenerとGEvent.bindを使用することでそれらのイベントを「聴く」ことができます。例えば、ユーザが地図をクリックするときはいつも、このコードスニペットは警戒を示します:
You can add dynamic elements to your application by using event listeners. An object exports a number of named events, and your application can "listen" to those events using the static methods GEvent.addListener and GEvent.bind. For example, this code snippet shows an alert every time the user clicks on the map:

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を使用することができます。以下の例では、アプリケーションクラスインスタンスはそれ自身のメソッドに地図イベントをバインドします、イベントが引き起こされるときクラスの状態を変更して:
GEvent.addListener takes a function as the third argument, which promotes the use of function closures for event handlers. If you want to bind an event to a method on a class instance, you can use GEvent.bind. In the following example, an application class instance binds map events to its own methods, modifying class state when events are triggered:

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();

使用例を見るView example (bind.html)

インフォウィンドウ
The Info Window

各地図には、単一の「インフォメーションウィンドウ」があります。(それは、地図の上の浮いている窓にHTML内容を表示します)。インフォメーションウィンドウは漫画雑誌のフキダシに少し似ています; それには、コンテンツエリアと先細りしている軸があります。軸の先が軸に地図の指定されたポイントであります。あなたは、Google Mapsでインフォメーションウィンドウが動作中であることをマーカーをクリックすることによって、見ることができます。
Each map has a single "info window," which displays HTML content in a floating window above the map. The info window looks a little like a comic-book word balloon; it has a content area and a tapered stem, where the tip of the stem is at a specified point on the map. You can see the info window in action by clicking a marker in Google Maps.

与えられた地図のために一度に1つ以上のインフォメーションウィンドウを見せることができませんが、あなたは、インフォメーションウィンドウを動かして、必要に応じてコンテンツを変えることができます。
You can't show more than one info window at a time for a given map, but you can move the info window and change its contents as needed.

基本的なインフォメーションウィンドウのメソッドはopenInfoWindowです。それは引数としてポイントとHTML DOMエレメントを持ちます。 HTML DOMエレメントをインフォメーションウィンドウのコンテナに追加します、そして、インフォメーションウィンドウの先を与えられたポイントに据えつけます。
The basic info window method is openInfoWindow, which takes a point and an HTML DOM element as arguments. The HTML DOM element is appended to the info window container, and the info window window tip is anchored to the given point.

openInfoWindowHtmlメソッドは同様ですが、それはDOMエレメントよりむしろ2番目の引数としてHTMLストリングを持ちます。
The openInfoWindowHtml method is similar, but it takes an HTML string as its second argument rather than a DOM element.

マーカーのようなオーバレイの上にインフォメーションウィンドウを表示するために、あなたは指定されたポイントとインフォメーションウィンドウの先の間でピクセル・オフセットを指定する3番目の任意の引数を渡すことができます。したがって、あなたのマーカーが10ピクセルの高さであるなら、あなたはピクセル・オフセットGSize(0, -10)を渡すかもしれません。
To display an info window above an overlay like a marker, you can pass an optional third argument that specifies the pixel offset between the specified point and the tip of the info window. So, if your marker is 10 pixels tall, you might pass the pixel offset GSize(0, -10).

GMarkerクラスがアイコンの大きさ形状に基づいてあなたのためにピクセル・オフセット問題を扱うopenInfoWindowメソッドをエクスポートするので、あなたは一般にあなたのアプリケーションにおける計算のアイコンオフセットを心配する必要はありません。
The GMarker class exports openInfoWindow methods that handle the pixel offset issues for you based on the size and shape of the icon, so you generally don't have to worry about calculating icon offsets in your application.

詳しい情報はGMap2とGMarkerクラスリファレンスを見てください。
See the GMap2 and GMarker class references for more information.

オーバーレイ
Overlays

オーバレイは地図の上の緯度/経度座標に縛られたオブジェクトで、それらはあなたが地図をドラッグするかズームさせるときは動いて、あなたが地図投影法を切り換える(あなたがMapからSatelliteモードに切り替わる時などの)。???
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map and when you switch map projections (such as when you switch from Map to Satellite mode).

Maps APIは2つのタイプのオーバレイをエクスポートします: マーカーは地図の上のアイコンで、polylinesは一連のポイントをつなげた線である。
The Maps API exports two types of overlays: markers, which are icons on the map, and polylines, which are lines made up of a series of points.

マーカーとアイコン
Markers and Icons

GMarkerコンストラクタはアイコンと引数として場所、「クリック」のような小さいセットのイベントをエクスポートします。マーカーを作成する簡単な例として、overlay.htmlを見てください。
The GMarker constructor takes an icon and a point as arguments and exports a small set of events like "click". See the overlay.html example above for a simple example of creating markers.

マーカーを作成する最も難しい部分はアイコンを指定しています。Maps APIに単一のアイコンを作る異なったイメージの数のために複雑です???。
The most difficult part of creating a marker is specifying the icon, which is complex because of the number of different images that make up a single icon in the Maps API.

あらゆるアイコンには、フォアグラウンド画像と影画像があります。フォアグラウンド画像に対し影は45角度(上向きに、そして、右への)で　影画像の下部左隅をアイコンフォアグラウンド画像の下部左隅に並べるべきである。影がアルファ透明がある24ビットのPNGイメージであるべきであるので、影の縁は地図の上で正しく見えます。
Every icon has a foreground image and a shadow image. The shadow should be created at a 45 degree angle (upward and to the right) from the foreground image, and the bottom left corner of the shadow image should align with the bottom-left corner of the icon foreground image. The shadow should be a 24-bit PNG image with alpha transparency so that the edges of the shadow look correct on top of the map.

GIconクラスはMaps APIが適切なサイズのイメージエレメントを作成することができるようアイコンを初期化するときイメージのサイズを指定必要するよう要求します。これはアイコンを指定するのに必要である最小の量のコードです(この場合、アイコンはGoogle Mapsを使用する):
The GIcon class requires you specify the size of these images when you initialize the icon so the Maps API can create image elements of the appropriate size. This is the minimum amount of code required to specify an icon (in this case, the icon used on 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リファレンスを見てください。
The GIcon class also has several other properties that you should set to get maximum browser compatibility and functionality from your icons. For example, the imageMap property specifies the shape of the non-transparent parts of the icon image. If you do not set this property in your icon, the entire icon image (including the transparent parts) will be clickable in Firefox/Mozilla. See the GIcon class reference for more information.

ポリライン
Polylines

GPolylineコンストラクタは、引数としてポイントの配列をもち、順に与えられたポイントを接続する一連の線を作成します。また、あなたは線の色、太さ、および不透明を指定することができます。色は16進の数値HTMLスタイルであるべきです。例えば、redの代わりに#ff0000を使います。 GPolylineはカラーネームを理解できません。
The GPolyline constructor takes an array of points as an argument, and creates a series of line segments that connect those points in the given sequence. You can also specify the color, weight, and opacity of the line. The color should be in the hexadecimal numeric HTML style, e.g., use #ff0000 instead of red. GPolyline does not understand named colors.

以下のコードは2個所間で10ピクセル幅の赤いpolylineを作成します:
The following code snippet creates a 10-pixel-wide red polyline between two points:

var polyline = new GPolyline([
  new GLatLng(37.4419, -122.1419),
  new GLatLng(37.4519, -122.1519)
], "#ff0000", 10);
map.addOverlay(polyline);

インターネット・エクスプローラーでは、Google Mapsは、polylinesを描くのにVMLを使用します(詳しい情報に関してXHTML and VMLを見てください)。他のすべてのブラウザでは、私たちは、Googleサーバから線イメージを要求して、地図がズームするので必要な同じくらいイメージをリフレッシュして、地図の上でそのイメージをかぶせて、周囲でドラッギングしました。???
In Internet Explorer, Google Maps uses VML to draw polylines (see XHTML and VML for more information). In all other browsers, we request an image of the line from Google servers and overlay that image on the map, refreshing the image as necessary as the map is zoomed and dragged around.

コントローラー
Controls

ズームバーのようなコントローラーを加えるために、addControlメソッドを使います。 Maps APIは地図で使える一握りのビルトインのコントローラを付属します。???
To add controls like the zoom bar to your map, use the addControl method. The Maps API comes with a handful of built-in controls you can use in your maps:

GLargeMapControl - Google Localで使われる大きいなパン/ズームコントローラー。地図の左上角に現れます。
GLargeMapControl - a large pan/zoom control used on Google Local. Appears in the top left corner of the map.
GSmallMapControl - Google Localで使われる小さなパン/ズームコントローラー。地図の左上角に現れます。
GSmallMapControl - a smaller pan/zoom control used on Google Local. Appears in the top left corner of the map.
GSmallZoomControl - 小さい地図ウィンドウで使用される小さいズームコントローラー(パンコントローラーがない)で、以前はよくGoogle Localにおける運転経路ステップを表示していました。
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Local.
GScaleControl - 地図のスケール
GScaleControl - a map scale
GMapTypeControl - (マップとサテライトのような)マップタイプ間のトグルボタン
GMapTypeControl - buttons that let the user toggle between map types (such as Map and Satellite)
GOverviewMapControl New! - 画面の隅での折りたたみ可能な概要地図
GOverviewMapControl New! - a collapsible overview map in the corner of the screen

例えば、Google Mapsで自分の地図にパン/ズームコントローラーを加えるには、地図の初期化で以下の行を入れられるでしょう:
For example, to add the panning/zooming control you see on Google Maps to your map, you would include the following line in your map initialization:

map.addControl(new GLargeMapControl());

addControlはあなたがあなたの地図の上でコントロールの位置を指定することができる2番目のオプションGControlPositionパラメタを取ります。もし引数がないなら、Maps APIはデフォルト位置が使われる。この例は、地図タイプが10ピクセルのpaddingで右隅下部に地図のコントローラーを付け加えます:
addControl takes an optional second GControlPosition parameter that lets you specify the position of the control on your map. If this argument is excluded, the Maps API uses the default position specified by the control. This example adds the map type control to the bottom right corner of the map with 10 pixels of padding:

map.addControl(new GMapTypeControl(),
               new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10)));

さらなる情報はGControlPositionクラスリファレンスを見てください。
See the GControlPosition class reference for more information.

XMLとRPC
XML and RPC

Google Maps APIは、IEの最近のバージョン、 Firefox、およびSafariで動くようにXmlHttpRequestオブジェクトを作成するためのファクトリーメソッドをエクスポートします。以下の例は、myfile.txtと呼ばれるファイルをダウンロードして、JavaScriptのalertでコンテンツを表示します:
The Google Maps API exports a factory method for creating XmlHttpRequest objects that work in recent versions of IE, Firefox, and Safari. The following example downloads a file called myfile.txt and displays its contents in a JavaScript alert:

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を使用することで上の例を書き直すことができるでしょう:
The API also exports a simpler method for typical HTTP GET requests called GDownloadUrl that eliminates the need for XmlHttpRequest readyState checking. The example above could be rewritten using GDownloadUrl like this:

GDownloadUrl("myfile.txt", function(data, responseCode) {
  alert(data);
});

あなたは唯一の引数としてXMLの文字列をとる静的なメソッドGXml.parseでXMLドキュメントを分析(パース)することができます。このメソッドはほとんどの最近のブラウザと互換性がありますが、ブラウザが、XML構文解析がネイティブでサポートしないなら、それは例外を投げます。
You can parse an XML document with the static method GXml.parse, which takes a string of XML as its only argument. This method is compatible with most modern browsers, but it throws an exception if the browser does not support XML parsing natively.

さらなる情報はGXmlHttpとGXmlクラスリファレンスを見てください。
See the GXmlHttp and GXml class references for more information.

ブラウザメモリリークの減少
Reducing Browser Memory Leaks

Google Maps APIはfunction closuresの使用を奨励します。そして、APIイベンハンドリングシステムGEventは避けられないブラウザのメモリリークparticularly Internet Explorerを漏らすような方法でイベントをDOMノードに付けます。バージョン2ではGUnload()という新しいメソッドを導入しました。それはそのようなリークを??? あなたは、あなたのアプリケーションがメモリ漏らす可能性を減少させるようにページのunloadイベントにおけるGUnload()を呼ぶべきです:
The Google Maps API encourages the use of function closures, and the API event handling system GEvent attaches events to DOM nodes in such a way that almost inevitably causes some browsers to leak memory, particularly Internet Explorer. Version 2 of the Maps API introduces a new method, GUnload(), that will remove most of the circular references that cause these leaks. You should call GUnload() in the unload event of your page to reduce the potential that your application leaks memory:

<body onunload="GUnload()">

この関数を使用すると、インターネット・エクスプローラーのメモリリークを実際にGoogle Mapsで排除し、あなたがメモリリークがないかどうかあなた自身のサイトであなたがメモリ消費問題に気付いているならDripのようなツールを使用しテストするべきです。
Using this function has virtually eliminated Internet Explorer memory leaks in Google Maps, though you should test for memory leaks on your own site using tools like Drip if you are noticing memory consumption problems.

Google Maps API Version 2ドキュメントGoogle Maps API Version 2 Documentation

コンテンツ一覧 Table of Contents

対象読者 Audience

はじめに Introduction

Google Maps API Version 2ドキュメント
Google Maps API Version 2 Documentation

コンテンツ一覧
Table of Contents

対象読者
Audience

はじめに
Introduction