Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM

追加情報11-2 DragZoomControlの拡張（2007年８月11日追加）

追加情報11で紹介した、DragZoomControlのバージョンが1.1になり、もとの大きさの地図に戻れるようになりました。複数回ズームした場合、複数回元に戻ることもできます。

下の地図で、「領域拡大」のボタンを押してから、拡大したいところをドラッグして指定します。そうすると指定した部分が拡大されて表示されます。さらに拡大したい場合は同じ操作を繰り返します。「戻る」をクリックすると一段階ずつ戻っていきます。

 

コードは下のようになっています。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
...
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
...

<script  type="text/javascript" src="lib/dragzoom.js"></script> 
...
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(38.65749, 139.74693), 5, G_NORMAL_MAP);
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new DragZoomControl({}, {backButtonEnabled: true}, {}),
                 new GControlPosition(G_ANCHOR_TOP_LEFT, // 位置の指定。左上を基準として 
                                      new GSize(10,290))); // 右に10ピクセル、下に290ピクセルの所に表示
下の地図では、ボタンのラベルを日本語に変えています。これは、DragZoomControlのインスタンスを生成する際に、引数で指定することにより実現しています。なお、 http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.1/examples/dragzoomoptions.htmlにあるフォームを使うと、対話的に初期値の設定を行うことができます。

このコードは次のようになっています。 

  var map2 = new GMap2(document.getElementById("map2"));
  map2.setCenter(new GLatLng(38.65749, 139.74693), 5, G_NORMAL_MAP);
  map2.addControl(new GLargeMapControl());
  map2.addControl(new GMapTypeControl());
  var styleOpts = {};
  var otherOpts = {};
  otherOpts.backButtonEnabled = true;
  otherOpts.buttonHTML = '領域拡大';
  otherOpts.backButtonHTML = '戻る';
  otherOpts.buttonZoomingHTML = '領域指定';
  otherOpts.buttonStartingStyle = {width: '58px', border: '1px solid black', padding: '2px'};
  otherOpts.backButtonEnabled;
  var zcontrol = new DragZoomControl(styleOpts, otherOpts, {});
  map2.addControl(zcontrol, new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,290)));

クラスDragZoomControlの詳細はリファレンスページをご覧ください。