2007年8月12日
Google Maps API にドラッグズームコントロール機能が追加されたそうです。
早速試してみました。
ドラッグズームコントロールを実装したGoogle Maps
なかなか使い勝手がいいみたいです。
ドラッグズームコントロールの使い方動画
+-ボタンで操作するよりも、かなりユーザビリティがアップします。
マウスホイールで拡大縮小できるのもいいですが、狙ったポイントを拡大できるのがいいですね。
ドラッグズームコントロールの簡単セットアップ
- draggzoom.jsをダウンロードし、下記コードをヘッダーに記述を追加
- 下記サンプルコードをコピペし、”YOUR_KEY_HERE”にあなたのKEYを挿入
- draggzoom.jsと共に適当なディレクトリにアップロードすれば完了
<script src="dragzoom.js" type="text/javascript"></script><!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" >
<head>
<style type="text/css">v\:* {behavior:url(#default#VML);}</style>
<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&v=2&key=YOUR_KEY_HERE"
type="text/javascript"></script>
<script src="../src/dragzoom.js" 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);
map.addControl(new DragZoomControl());
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 900px; height: 600px"></div>
</body>
</html>
他のサンプルやオプション機能はDragZoomControl Documentation: Examplesへどうぞ
via:Official Google Maps API Blog
