<a href="http://flickr.com/photos/50306760@N00/899689726/"><img src="http://farm2.static.flickr.com/1209/899689726_530ed5ff92_m.jpg" alt="Google Maps API にドラッグズームコントロール機能" /></a>

<p>Google Maps API にドラッグズームコントロール機能が追加されたそうです。<br />
早速試してみました。</p>

<!--more-->
<h4 class="tips">ドラッグズームコントロールを実装したGoogle Maps</h4>
<iframe src="http://www.zako.org/maps/DragZoom.html" frameborder="0" scrolling="no" width="100%" height="400px"></iframe>
<p>なかなか使い勝手がいいみたいです。</p>

<h4 class="tips">ドラッグズームコントロールの使い方動画</h4>
<p><object width="100%" height="400"><param name="movie" value="http://www.youtube.com/v/t4UFwO5p1t4"></param><embed src="http://www.youtube.com/v/t4UFwO5p1t4" type="application/x-shockwave-flash" width="100%" height="400"></embed></object></p>
<p>+-ボタンで操作するよりも、かなりユーザビリティがアップします。<br />
マウスホイールで拡大縮小できるのもいいですが、狙ったポイントを拡大できるのがいいですね。</p>

<h4 class="tips">ドラッグズームコントロールの簡単セットアップ</h4>
<ol>
<li><a href="http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.1/src/dragzoom.js">draggzoom.js</a>をダウンロードし、下記コードをヘッダーに記述を追加</li>
<pre><code>&lt;script src="dragzoom.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
<li>下記サンプルコードをコピペし、”YOUR_KEY_HERE”にあなたのKEYを挿入</li>
<p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br />
&lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" &gt;<br />
&lt;head&gt;<br />
&lt;style type="text/css"&gt;v\:* {behavior:url(#default#VML);}&lt;/style&gt;<br />
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;<br />
&lt;title&gt;Google Maps JavaScript API Example&lt;/title&gt;<br />
<br />
&lt;script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY_HERE"<br />
type="text/javascript"&gt;&lt;/script&gt;<br />
&lt;script src="../src/dragzoom.js" type="text/javascript"&gt;&lt;/script&gt;<br />
&lt;script type="text/javascript"&gt;<br />
<br />
//&lt;![CDATA[<br />
<br />
function load() {<br />
if (GBrowserIsCompatible()) {<br />
var map = new GMap2(document.getElementById("map"));<br />
map.setCenter(new GLatLng(37.4419, -122.1419), 13);<br />
map.addControl(new DragZoomControl());<br />
}<br />
}<br />
<br />
//]]&gt;<br />
&lt;/script&gt;<br />
&lt;/head&gt;<br />
&lt;body onload="load()" onunload="GUnload()"&gt;<br />
&lt;div id="map" style="width: 900px; height: 600px"&gt;&lt;/div&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br /></code></p>
<li>draggzoom.jsと共に適当なディレクトリにアップロードすれば完了</li>
</ol>

<p>他のサンプルやオプション機能は<a class="tool-link" href="http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/1.1/docs/examples.html" target="_blank">DragZoomControl Documentation: Examples</a>へどうぞ</p>

<p>via:<a href="http://googlemapsapi.blogspot.com/2007/08/you-can-always-go-back-to-where-you.html" target="_blank">Official Google Maps API Blog</a></p>
<!--- ignore ---><div style="margin-bottom:0px;"><div style="float:left;"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4839921652%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4839921652%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank"><img src="http://g-ecx.images-amazon.com/images/G/09/nav2/dp/no-image-avail-img-map._V23175435_AA120_.gif" alt="Google Maps API逆引きクイックリファレンス―WEB2.0対応" style="border:0;"></a></div><div style="float:left;margin-left:15px;line-height:120%"><div style="margin-bottom:10px;line-height:120%"><form style="margin-bottom:0px;" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="snowboadteamz-22"><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2"><input type="hidden" name="ASIN.1" value="4839921652"><input type="hidden" name="Quantity.1" value="1"><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></div><div>Google Maps API逆引きクイックリファレンス―WEB2.0対応<br /></div><div style="margin-top:0px; margin-bottom:10px"><div style="margin-bottom:5px">価格：<span style="color:#f33;font-weight:bold;">￥ 2,940</span><br />平均評価：4.5<br />納期：通常24時間以内に発送<br /></div></div><div style="margin-top: 5px"><a href="http://www.amazon.co.jp/gp/redirect.html%3FASIN=4839921652%26tag=snowboadteamz-22%26lcode=xm2%26cID=2025%26ccmID=165953%26location=/o/ASIN/4839921652%253FSubscriptionId=028QVM5GAF1MWA4NBMR2" target="_blank">Amazon で詳細を見る</a> by <a href="http://astore.amazon.co.jp/snowboadteamz-22" title="WEB担当者の本屋" target="_blank">WEB担当者の本屋</a></div></div><div style="clear: left"></div></div>