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

Google Maps API にドラッグズームコントロール機能

2007-08-12 | Sigeo | 0 | カテゴリ Google マップ

Google Maps API にドラッグズームコントロール機能

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

スポンサードリンク

ドラッグズームコントロールを実装したGoogle Maps

なかなか使い勝手がいいみたいです。

ドラッグズームコントロールの使い方動画

+-ボタンで操作するよりも、かなりユーザビリティがアップします。
マウスホイールで拡大縮小できるのもいいですが、狙ったポイントを拡大できるのがいいですね。

ドラッグズームコントロールの簡単セットアップ

  1. draggzoom.jsをダウンロードし、下記コードをヘッダーに記述を追加
  2. <script src="dragzoom.js" type="text/javascript"></script>
  3. 下記サンプルコードをコピペし、”YOUR_KEY_HERE”にあなたのKEYを挿入
  4. <!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>

  5. draggzoom.jsと共に適当なディレクトリにアップロードすれば完了

他のサンプルやオプション機能はDragZoomControl Documentation: Examplesへどうぞ

via:Official Google Maps API Blog

Google Maps API逆引きクイックリファレンス―WEB2.0対応
Google Maps API逆引きクイックリファレンス―WEB2.0対応
価格:¥ 2,940
平均評価:4.5
納期:通常24時間以内に発送
スポンサードリンク

この記事を読んだ方は以下の記事もご覧いただいています

  • このエントリーをはてなブックマークに追加

コメントする