Hack #64 DragZoomControlの利用

DragZoomControlというGoogle Maps API Utility Library open source projectに加わった機能を利用すると、表示されている地図の任意の矩形部分を即座に拡大表示することができます。下の地図で、「領域拡大」のボタンを押してから、拡大したいところをドラッグして指定します。そうすると指定した部分が拡大されて表示されます。

 

コードは下のようになっています。
<!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(), new GControlPosition(G_ANCHOR_TOP_LEFT, // 位置の指定。左上を基準として new GSize(10,290))); // 右に10ピクセル、下に290ピクセルの所に表示

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

追加情報

DragZoomControlのバージョンが上がり、1.1がリリースされました。 追加情報11-2 DragZoomControlの拡張もご覧ください。