Maps JavaScript API v2 は、2021 年 5 月 26 日をもってご利用いただけなくなりました。その結果、お客様のサイトの v2 のマップは機能しなくなり、JavaScript エラーが返されます。サイト上でマップを引き続き使用するには、Maps JavaScript API v3 に移行してください。このガイドでは、このプロセスについて説明します。
概要
アプリケーションごとに移行プロセスは多少異なりますが、すべてのプロジェクトに共通する手順があります。
- 新しいキーを取得します。Maps JavaScript API が Google Cloud Console を使用して鍵を管理するようになりました。v2 鍵を使用している場合は、移行を開始する前に新しい API キーを取得してください。
- API ブートストラップを更新します。ほとんどのアプリケーションでは、次のコードを使用して Maps JavaScript API v3 を読み込みます。
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- コードを更新する。必要な変更の量は、アプリケーションによって大きく異なります。一般的な変更は次のとおりです。
- 常に google.maps 名前空間を参照します。v3 では、すべての Maps JavaScript API コードはグローバル名前空間ではなく、
google.maps.*
名前空間に保存されます。ほとんどのオブジェクトは、このプロセスの一環として名前も変更されています。たとえば、GMap2
の代わりに google.maps.Map
を読み込みます。
- 古いメソッドへの参照をすべて削除します。
GDownloadURL
や GLog
など、いくつかの汎用ユーティリティ メソッドが削除されました。
この機能をサードパーティのユーティリティ ライブラリに置き換えるか、これらの参照をコードから削除してください。
- (省略可)コードにライブラリを追加します。多くの機能はユーティリティ ライブラリに外部化されているため、アプリは API の一部を読み込むだけで済みます。
- (省略可)v3 外部設定を使用するようにプロジェクトを構成します。v3 エクステンションを使用して、Closure Compiler によるコードの検証や、IDE でオートコンプリートをトリガーできます。詳しくは、高度なコンパイルと外部クエリをご覧ください。
- テストを繰り返す。この時点でまだやるべきことはいくつかありますが、
Maps JavaScript API の V3 における変更点
移行を計画する前に、Maps JavaScript API v2 と Maps JavaScript API v3 の相違点をよく理解する必要があります。最新バージョンの Maps JavaScript API は、最新の JavaScript プログラミング技術、ライブラリの使用促進、シンプルな API に重点を置いて、ゼロから作成されています。多くの新機能が API に追加され、認識済みの機能の一部が変更または削除されています。このセクションでは、2 つのリリースの主な違いについて説明します。
v3 API の主な変更点は次のとおりです。
- コア ライブラリを簡素化。多くの補足関数がライブラリに移動されました。これにより、Core API の負荷と解析時間を短縮し、あらゆるデバイスで地図をすばやく読み込むことができます。
- ポリゴン レンダリングやマーカーの配置など、いくつかの機能のパフォーマンスを改善しました。
- クライアントサイドの使用制限に対する新しいアプローチにより、モバイル プロキシや企業のファイアウォールで使用される共有アドレスに適切に対応できるようになりました。
- 複数の最新ブラウザとモバイル ブラウザのサポートを追加しました。Internet Explorer 6 のサポートは終了しました。
- 多くの汎用ヘルパークラス(
GLog
または GDownloadUrl
)が削除されました。現在、Closure や jQuery など、同様の機能を提供する優れた JavaScript ライブラリが数多く存在します。
- あらゆるモバイル端末でロードされる HTML5 ストリート ビューが実装されました。
- カスタム ストリートビュー パノラマ: 撮影した写真を使用して、スキーのゲレンデや販売用の住宅などの有名スポットのパノラマ画像を共有できます。
- スタイル付き地図のカスタマイズ: 基本地図上の要素の表示を、独自のビジュアル スタイルに合わせて変更できるようにします。
- ElevationService や Distance Matrix など、複数の新しいサービスをサポートしています。
- 改善されたルートサービスでは、代替ルート、ルートの最適化(巡回セールスマンの問題のおおよその解決方法)、自転車ルート(自転車レイヤを含む)、乗換案内、ドラッグ可能なルートが提供されます。
- 更新後の Geocoding 形式で、Geocoding API v2 の
accuracy
の値より正確なタイプの情報を提供できるようになりました。
- 1 つのマップで複数の情報ウィンドウをサポート
新しいキー
Maps JavaScript API v3 は、v2 の新しい鍵システムを使用します。アプリケーションですでに v3 鍵を使用している場合、変更は必要ありません。確認するには、key
パラメータで Maps JavaScript API を読み込む URL を確認します。キー値が 'ABQIAA' で始まる場合は、v2 キーを使用します。v2 鍵がある場合は、移行の一環として v3 鍵にアップグレードする必要があります。これにより、次のことが可能になります。
キーは、Maps JavaScript API v3 を読み込むときに渡されます。API キーの生成について学習する。
Google Maps API for Work をご利用の場合は、key
パラメータではなく、client
パラメータでクライアント ID を使用している可能性があります。クライアント ID は Maps JavaScript API v3 でも引き続きサポートされます。鍵のアップグレード プロセスを行う必要はありません。
API の読み込み
コードに加える必要がある最初の変更には、API の読み込み方法が含まれます。v2 では、http://maps.google.com/maps
へのリクエストによって Maps JavaScript API を読み込みます。Maps JavaScript API v3 を読み込む場合、次の変更を行う必要があります。
//maps.googleapis.com/maps/api/js
から API を読み込む
file
パラメータを削除します。
key
パラメータを新しい v3 鍵で更新します。Google Maps API for Work ユーザーは、client
パラメータを使用する必要があります。
- (Google Maps Platform プレミアム プランのみ)Google Maps Platform プレミアム プランのデベロッパー ガイドで説明されているように、
client
パラメータが指定されていることを確認します。
v
パラメータを削除して、最新のリリース バージョンをリクエストするか、v3 のバージョニング スキームに応じて値を変更します。
- (省略可)
hl
パラメータを language
に置き換え、その値を保持します。
- (省略可)
libraries
パラメータを追加して、オプションのライブラリを読み込みます。
最も単純なケースでは、v3 ブートストラップで API キーパラメータのみを指定します。
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
以下の例では、ドイツ語の Maps JavaScript API v2 の最新バージョンをリクエストしています。
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
次の例は、v3 の場合の同等のリクエストです。
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
google.maps 名前空間の導入
Maps JavaScript API v3 の最も大きな変更点は、google.maps
名前空間の導入です。v2 API では、デフォルトですべてのオブジェクトがグローバル名前空間に配置されるため、名前が競合する可能性があります。v3 内では、すべてのオブジェクトは google.maps
名前空間内に配置されます。
アプリケーションを v3 に移行する場合は、新しい名前空間を利用するためにコードを変更する必要があります。「G」で検索し、代わりに「google.maps." Won」を使用するのは簡単ではありません。ただし、一般的には、コードを確認する際に適用することをおすすめします。v2 と v3 での同等のクラスの例を以下に示します。
v2 |
v3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
廃止されたコードの削除
Maps JavaScript API v3 には、v2 の機能のほとんどの部分が類似しています。ただし、サポートが終了したクラスもあります。移行の一環として、これらのクラスをサードパーティのユーティリティ ライブラリに置き換えるか、これらの参照をコードから削除してください。Closure や jQuery など、同様の機能を提供する優れた JavaScript ライブラリが数多く存在します。
Maps JavaScript API v3 では、次のクラスは並列処理されません。
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
コードの比較
v2 API と v3 API で記述された 2 つの単純なアプリケーションを比較してみましょう。
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
この表からわかるように、2 つのアプリにはいくつかの違いがあります。主な変更点は、以下のとおりです。
- API のロード元のアドレスが変更されています。
GBrowserIsCompatible()
メソッドと GUnload()
メソッドは v3 では不要になったため、API から削除されました。
- API オブジェクトでは、
GMap2
オブジェクトは google.maps.Map
に置き換えられます。
- プロパティは、Options クラスを通じて読み込まれるようになりました。上の例では、インラインで
MapOptions
オブジェクトを使用して、地図の読み込みに必要な 3 つのプロパティ(center
、zoom
、mapTypeId
)を設定しました。
- V3 では、デフォルト ユーザー インターフェースがデフォルトでオンになっています。これを無効にするには、
MapOptions
オブジェクトで disableDefaultUI
プロパティを true に設定します。
まとめ
この時点で、Maps JavaScript API の v2 から v3 への移行に伴う主なポイントのいくつかを体験できます。他にも知っておく必要がある情報がありますが、アプリケーションによって異なります。以降のセクションでは、発生する可能性のある特定のケースの移行手順について説明します。アップグレード プロセスに役立つリソースもあります。
この記事について問題やご不明な点がございましたら、このページの上部にある [フィードバックを送信] リンクを使用してください。
このセクションには、Maps JavaScript API の v2 と v3 の主な特長の詳細な比較が表示されます。リファレンスの各セクションは個別に読むように設計されています。この資料の全文はお読みいただくことをおすすめします。代わりに、この資料を使用して、移行の計画を立てる際に役立ちます。
- イベント: イベントの登録と処理を行います。
- コントロール - 地図上に表示されるナビゲーション コントロールを操作します。
- オーバーレイ - 地図上のオブジェクトを追加、編集します。
- マップタイプ - 基本地図を構成するタイル。
- レイヤ - KML レイヤやトラフィック レイヤなどの、グループとしてのコンテンツの追加と編集。
- サービス - Google のジオコーディング、ルート、ストリートビュー サービスを使用します。
イベント
Maps JavaScript API v3 のイベントモデルは、v2 で使用されているものと似ていますが、内部的には多くの変更が行われています。
MVC をサポートするための新しいイベント
V3 API は、MVC の状態変化を反映する新しいタイプのイベントが追加されています。次の 2 種類のイベントが追加されました。
- ユーザー イベント(クリックやマウスイベントなど)は、DOM から Maps JavaScript API に伝達されます。これらのイベントは、標準の DOM イベントとは異なるものです。
- MVC の状態変化の通知は、Maps API オブジェクトの変化を反映しており、これには
property_changed
規則に基づいて名前が付けられています。
各 Maps API オブジェクトは、いくつかの名前付きイベントをエクスポートします。特定のイベントに関心があるアプリケーションは、そのイベントのイベント リスナーを登録し、イベントを受信したときにコードを実行する必要があります。このイベント ドリブン メカニズムは、Maps JavaScript API v2 と v3 の両方で同じです。ただし、名前空間が GEvent
から google.maps.event
に変更されています。
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
イベント リスナーを削除する
パフォーマンス上の理由から、不要になったイベント リスナーは削除することをおすすめします。イベント リスナーの削除は、v2 と v3 でも同じように機能します。
- イベント リスナーを作成すると、不透明オブジェクト(v2 では GEventListener、v3 では MapsEventListener)が返されます。
- イベント リスナーを削除する場合は、このオブジェクトを
removeListener()
メソッド(v2 の場合は GEvent.removeListener()
、v3 の場合は google.maps.event.removeListener()
)に渡して、イベント リスナーを削除します。
DOM イベントをリッスンする
DOM(ドキュメント オブジェクト モデル)イベントをキャプチャして応答する場合、v3 には、v2 の GEvent.addDomListener()
メソッドと同等の google.maps.event.addDomListener()
静的メソッドが用意されています。
イベントで渡された引数を使用する
多くの場合、UI イベントはイベント引数を渡して、イベント リスナーがアクセスできます。v3 のほとんどのイベント引数は、API のオブジェクトに一貫性を持たせるよう簡略化されています。(詳しくは、v3 リファレンスをご覧ください)。
v3 イベント リスナーに overlay
引数はありません。v3 マップで click
イベントを登録した場合、ユーザーが基本地図をクリックした場合にのみコールバックが発生します。クリックに反応する必要がある場合は、クリック可能なオーバーレイに追加のコールバックを登録できます。
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
コントロール
Maps JavaScript API には、ユーザーが地図の操作に使用できる UI コントロールが表示されます。API を使用すると、これらのコントロールの表示方法をカスタマイズできます。
コントロール タイプの変更
control
タイプの一部の変更は、v3 API で導入されました。
- v3 API は、地形マップやカスタムのマップタイプを追加できるなど、追加のマップタイプをサポートしています。
- v2 階層コントロール
GHierarchicalMapTypeControl
はご利用いただけなくなりました。google.maps.MapTypeControlStyle.HORIZONTAL_BAR
コントロールを使用すると、同様の効果が得られます。
- v2 の
GMapTypeControl
によって提供される水平レイアウトは、v3 では使用できません。
地図にコントロールを追加する
Maps JavaScript API v2 では、地図オブジェクトの addControl()
メソッドを使って地図にコントロールを追加します。v3 では、コントロールを直接アクセスまたは変更するのではなく、関連する MapOptions
オブジェクトを変更します。次のサンプルは、次のコントロールを追加するために地図をカスタマイズする方法を示しています。
- 使用可能なマップタイプをユーザーが切り替えることができるボタン
- マップの縮尺
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
マップ上のコントロールの配置
V3 では、コントロールの配置方法が大きく変更されています。v2 では、addControl()
メソッドはオプションの第 2 パラメータを受け取り、地図の角に対するコントロールの位置を指定できます。
v3 では、コントロール オプションは、コントロール オプションの position
プロパティを使用して設定します。これらのコントロールの配置は絶対的なものではありません。API は「フロー」によってコントロールをインテリジェントにレイアウトし、特定の制約(地図サイズなど)の中で既存のマップ要素の周囲に配置されます。これにより、デフォルトのコントロールがコントロールと互換性を持つようになります。詳しくは、v3 でのコントロールの位置づけをご覧ください。
次のコードは、上のサンプルのコントロールを再配置します。
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
カスタム コントロール
Maps JavaScript API を使用すると、カスタムのナビゲーション コントロールを作成できます。v2 API でコントロールをカスタマイズするには、GControl
クラスをサブクラス化して、initialize()
メソッドと getDefaultPosition()
メソッドのハンドラを定義します。v3 には、GControl
クラスに相当するものはありません。代わりに、コントロールは DOM 要素として表されます。v3 API でカスタム コントロールを追加するには、コンストラクタ内に DOM 構造を Node
の子として作成し(<div>
要素など)、DOM イベントを処理するイベント リスナーを追加します。Node
を maps' controls[position]
配列に push し、カスタム コントロールのインスタンスを地図に追加します。
前述のインターフェース要件を遵守する HomeControl
クラスの実装(詳細については、カスタム コントロールのドキュメントを参照)により、次のコードサンプルは、カスタム コントロールを地図に追加する方法を示しています。
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
オーバーレイ
オーバーレイは、地図に「追加」したオブジェクトを反映して、ポイント、ライン、エリア、またはオブジェクトの集合を示します。
オーバーレイの追加と削除
オーバーレイで表されるオブジェクトの型は、v2 と v3 では同一ですが、扱い方は異なります。
v2 API のオーバーレイは、GMap2
オブジェクトの addOverlay()
メソッドと removeOverlay()
メソッドを使用して、地図に追加、地図から削除されました。v3 では、関連するオーバーレイ オプション クラスの map
プロパティを使用して、オーバーレイに地図を割り当てます。
オーバーレイを直接追加または削除するには、オーバーレイ オブジェクトの setMap()
メソッドを呼び出して、目的の地図を指定します。マップ プロパティを null
に設定すると、オーバーレイが削除されます。
v3 に clearOverlays()
メソッドは存在しません。オーバーレイのセットを管理する場合は、オーバーレイを保持するための配列を作成する必要があります。この配列を使用して、配列内の各オーバーレイに対して setMap()
を呼び出すことができます(削除する必要がある場合は null
を渡します)。
ドラッグ可能マーカー
デフォルトでは、マーカーはクリック可能ですが、ドラッグ可能ではありません。次の 2 つのサンプルでは、ドラッグ可能なマーカーが追加されます。
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
アイコン
デフォルトのマーカーの代わりに表示するカスタム アイコンを定義できます。
v2 でカスタム イメージを使用するには、G_DEFAULT_ICON type
から GIcon
インスタンスを作成し、変更します。画像がデフォルトのアイコンよりも大きいか小さい場合は、GSize
インスタンスで指定する必要があります。v3 API では、このプロセスが若干簡素化されます。マーカーの icon
プロパティをカスタム画像の URL に設定するだけで、API によりアイコンのサイズが自動的に変更されます。
Maps JavaScript API は複雑なアイコンもサポートしています。
複雑なアイコンの場合、複数のタイルや複雑なシェイプが含まれることがあります。また、画像を他のオーバーレイに対してどのように表示するかを表す「スタックの順序」を指定することもできます。v2 でマーカーにシェイプを追加するには、各 GIcon
インスタンスで追加のプロパティを指定し、これをオプションとして GMarker
コンストラクタに渡す必要があります。v3 では、この方法で指定するアイコンの icon
プロパティを Icon
型のオブジェクトに設定する必要があります。v3 では、マーカー シャドウはサポートされません。
次の画像は、オーストラリアのボンディビーチのビーチフラグを示しています。アイコンの透明な部分はクリックできません。
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
ポリライン
ポリラインは、LatLng
の配列と、これらの位置を決まった順序で連結する一連の線分で構成されます。v3 での Polyline
オブジェクトの作成と表示は、v2 での GPolyline
オブジェクトの使用と似ています。以下のサンプルでは、半透明の 3 ピクセル幅のチューリッヒからシンガポールまでのシドニーの測地線ポリラインを描画しています。
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
エンコードしたポリライン
v3 では、エンコードされたポリラインから直接 Polyline
オブジェクトを作成することはできません。代わりに、ジオメトリ ライブラリにはポリラインをエンコードおよびデコードするためのメソッドが用意されています。このライブラリを読み込む方法について詳しくは、v3 Maps API のライブラリをご覧ください。
以下の例では、同じエンコードされたポリラインを描画しています。v3 のコードは、google.maps.geometry.encoding
名前空間の decodePath()
メソッドを使用します。
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
ポリゴン
ポリゴンは、閉ループ内の領域を定義します。Polyline
オブジェクトと同様に、Polygon
オブジェクトは順序付けされた一連のポイントで構成されます。v3 の Polygon
クラスは v2 の GPolygon
クラスとほぼ同じですが、ループを閉じるためにパスの最後で開始頂点を繰り返す必要がなくなった点に注目してください。v3 API では、最後の座標と最初の座標を連結するストロークを描画して、すべてのポリゴンを自動的に閉じます。次のコード スニペットは、バミューダ トライアングルを表すポリゴンを作成します。
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
ユーザーによる編集が可能なシェイプ
ポリラインとポリゴンは、ユーザーによる編集を可能にすることができます。次のコード スニペットは同等です。
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
より高度な描画機能については、v3 ドキュメントの描画ライブラリをご覧ください。
情報ウィンドウ
InfoWindow
は、地図の上にフローティング ウィンドウでコンテンツを表示します。v2 と v3 の情報ウィンドウには、次のような重要な違いがあります。
- v2 API では、1 つの地図につき
GInfoWindow
のみがサポートされます。v3 API では、各マップで複数の InfoWindow
が同時にサポートされます。
- v3 の
InfoWindow
は、地図をクリックしたときに開いたままになります。v2 GInfoWindow
は、地図をクリックすると自動的に閉じます。v2 の動作をエミュレートするには、Map
オブジェクトに click
リスナーを追加します。
- v3 API では、タブ付きの
InfoWindow
に対するネイティブ サポートは提供されていません。
地面オーバーレイ
地図上に画像を配置するには、GroundOverlay
オブジェクトを使用する必要があります。GroundOverlay
のコンストラクタは v2 と v3 で基本的に同じで、画像の URL と画像の境界をパラメータとして指定します。
次のサンプルは、ニュージャージー州ニューアークのアンティーク地図をオーバーレイとして地図上に配置します。
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
マップタイプ
v2 と v3 では使用可能な地図の種類が若干異なりますが、基本的な地図の種類はすべて API の両方のバージョンで利用できます。デフォルトでは、v2 は標準の「絵を描く」道路地図タイルを使用します。ただし、v3 では、google.maps.Map
オブジェクトの作成時に特定のマップタイプを指定する必要があります。
共通のマップタイプ
v2 および v3 では、次の 4 つの基本マップタイプを使用できます。
MapTypeId.ROADMAP
(G_NORMAL_MAP
の代わり)は、道路地図ビューを表示します。
MapTypeId.SATELLITE
(G_SATELLITE_MAP
の代わり)は、Google Earth の衛星画像を表示します。
MapTypeId.HYBRID
(G_HYBRID_MAP
の後継)は、通常ビューと衛星画像ビューの組み合わせを表示します。
MapTypeId.TERRAIN
(G_PHYSICAL_MAP
の代わり)は、地形情報に基づいて物理地図を表示します。
次に、マップを地形ビューに設定している v2 と v3 の例を示します。
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
Maps JavaScript API v3 では、使用頻度の低いマップタイプにもいくつかの変更が加えられました。
- Earth 以外の天体の地図タイルは、v3 API ではマップタイプとして使用できませんが、この例に示すように、カスタムのマップタイプとしてアクセスできます。
- v3 には、v2 の
G_SATELLITE_3D_MAP
タイプを置き換える特別なマップタイプはありません。代わりに、こちらのライブラリを使用することで、Google Earth プラグインを v3 マップに統合できます。
最大ズーム画像
航空写真の場合、高いズーム レベルが利用できるとは限りませんズームレベルを設定する前に、使用可能な最高ズームレベルが知りたい場合は、google.maps.MaxZoomService
クラスを使用します。このクラスは、v2 の GMapType.getMaxZoomAtLatLng()
メソッドに代わるものです。
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
空気遠近法画像
v3 で航空写真を有効にする場合、コントロールは v2 の GLargeZoomControl3D
コントロールと同様ですが、回転コントロールを追加してインタースティシャルをサポートする方向に回転します。
45° 画像が現在利用可能な都市は、この地図で追跡できます。45° 画像が利用できる場合は、Maps API 衛星ボタンにサブメニュー オプションが追加されます。
レイヤ
レイヤは、1 つ以上のオーバーレイで構成される地図上のオブジェクトです。単一のユニットとして操作でき、通常はオブジェクトのコレクションを反映します。
サポートされるレイヤ
V3 API は、さまざまなレイヤに対するアクセスを可能にします。これらのレイヤは、次の領域で v2 GLayer
クラスと重複します。
-
KmlLayer
オブジェクトは、KML 要素と GeoRSS 要素を v3 オーバーレイにレンダリングします。これにより、v2 GeoXml
レイヤと同等の機能を提供します。
TrafficLayer
オブジェクトは、v2 GTrafficOverlay
オーバーレイと同様に、交通状況を示すレイヤをレンダリングします。
各レイヤは、V2 とは異なります。以下では違いについて説明します。地図に追加するには、setMap()
を呼び出して、レイヤを表示する Map
オブジェクトを渡します。
サポートされているレイヤの詳細については、レイヤのドキュメントをご覧ください。
KML レイヤと GeoRSS レイヤ
Maps JavaScript API は、地理情報を表示するために KML および GeoRSS のデータ形式をサポートしています。地図に KML または GeoRSS のファイルを含める場合は、そのファイルを一般公開する必要があります。v3 では、これらのデータ形式は KmlLayer
のインスタンスを使用して表示されます。これは、v2 の GGeoXml
オブジェクトに代わるものです。
v3 API は KML をレンダリングする際の柔軟性が高いため、InfoWindows を抑制し、クリック レスポンスを変更できます。詳細については、V3 の KML レイヤと GeoRSS レイヤのドキュメントをご覧ください。
KmlLayer
をレンダリングする場合は、サイズと複雑さの制限が適用されます。詳しくは、KmlLayer のドキュメントをご覧ください。
次のサンプルは、KML ファイルをロードする方法を比較しています。
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
交通状況レイヤ
v3 では、TrafficLayer
オブジェクトを使用してリアルタイムの交通状況(対象地域に限る)を地図に追加できます。交通情報は、リクエストが行われたときに提供されます。次の例は、ロサンゼルスの交通情報を示しています。
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
v2 とは異なり、v3 では TrafficLayer
コンストラクタのオプションはありません。v3 ではインシデントを使用できません。
サービス
Geocoding
Maps JavaScript API の geocoder
オブジェクトは、ユーザー入力から動的に住所をジオコーディングします。既知の住所を動的にではなく静的にジオコーディングしたい場合は、Geocoding API のドキュメントをご覧ください。
Geocoding API のアップグレードと改善により、新機能が追加され、データ表現方法も変更されました。
v2 API の GClientGeocoder
には、フォワード ジオコーディングとリバース ジオコーディングの 2 つの異なるメソッドと、ジオコーディングの実行方法を制御する追加のメソッドが用意されていました。v3 の Geocoder
オブジェクトでは geocode()
メソッドのみが提供されます。このメソッドは、入力用語(ジオコーディング リクエスト オブジェクトの形式)を含むオブジェクト リテラルとコールバック メソッドを受け取ります。リクエストにテキスト形式の address
属性と LatLng
オブジェクトのどちらが含まれているかに応じて、Geocoding API はフォワードまたはリバース ジオコーディングのレスポンスを返します。ジオコーディング リクエストに追加のフィールドを渡すことで、ジオコーディングの方法に影響を与えることができます。
- テキストの
address
を含めると、getLatLng()
メソッドを呼び出す場合と同等のフォワード ジオコーディングがトリガーされます。
latLng
オブジェクトを含めると、getLocations()
メソッドの呼び出しと逆のジオコーディングのリバース トリガーが発生します。
bounds
属性を含めると、setViewport()
メソッドを呼び出す場合と同等のビューポート バイアスが有効になります。
region
属性を含めると、setBaseCountryCode()
メソッドを呼び出す場合と同等の地域コードのバイアスが有効になります。
v3 のジオコーディング レスポンスは、v2 レスポンスとは大きく異なります。v3 API は、v2 が使用するネストされた構造を、解析しやすいフラットな構造に置き換えます。さらに、v3 のレスポンスはより詳細です。各結果にはいくつかの住所コンポーネントがあり、これによって各結果の解像度を適切に把握できます。
次のコードは、テキスト形式の住所を取得して、ジオコーディングの結果の最初の結果を表示します。
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
Directions
Maps JavaScript API v3 は、v2 の GDirections
クラスを、ルートを計算するための DirectionsService
クラスに置き換えます。
v3 の route()
メソッドは、v2 API の load()
メソッドと loadFromWaypoints()
メソッドの両方を置き換えます。このメソッドは、入力語句を含む単一の DirectionsRequest
オブジェクト リテラルと、レスポンスの受信時に実行するコールバック メソッドを受け取ります。v2 の GDirectionsOptions
オブジェクト リテラルと同様に、このオブジェクト リテラルでオプションを指定できます。
Maps JavaScript API v3 では、ルート リクエストを送信するタスクは、リクエストのレンダリング タスクから分離されています。レンダリング タスクは、DirectionsRenderer
クラスで処理されるようになりました。DirectionsRenderer
オブジェクトは、その setMap()
メソッドと setDirections()
メソッドを使用して、任意のマップまたは DirectionsResult
オブジェクトに関連付けることができます。レンダラは MVCObject
であるため、プロパティへの変更をすべて検出し、関連付けられたルートが変更されると地図を更新します。
次のコードは、住所からの歩行者専用道路を使用して、特定の場所への徒歩経路をリクエストする方法を示しています。ダブリン動物園の歩道に徒歩経路を提示できるのは、v3 だけです。
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
ストリートビュー
Google ストリートビューは、対象地域内の指定された場所からのインタラクティブな 360 度ビューを提供します。v3 API ではストリートビュー画像の表示に Flash® プラグインが必要だった v2 とは異なり、ブラウザ内でストリートビューをネイティブにサポートしています。
ストリートビュー画像は、v3 の StreetViewPanorama
オブジェクトまたは v2 の GStreetviewPanorama
オブジェクトを使用することでサポートされます。これらのクラスには異なるインターフェースがありますが、どちらも同じ役割を果たします。div
コンテナをストリートビュー画像に接続し、ストリートビュー パノラマの位置と POV(視点)を指定できます。
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
ストリートビュー データへの直接アクセスは、v3 の StreetViewService
オブジェクトか、v2 の同様の GStreetviewClient
オブジェクトを通じて行うことができます。どちらもストリートビュー データの取得や確認に使用できる同様のインターフェースを備えており、場所 ID またはパノラマ ID による検索が可能です。
V3 では、ストリートビューはデフォルトで有効になっています。地図はストリートビュー ペグマン コントロールとともに表示され、API は地図 div を再利用してストリートビュー パノラマを表示します。次のコードは、ストリートビュー パノラマを別の div に分割して、v2 の動作をエミュレートする方法を示したものです。
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}