KeyDragZoomを使って、Google Maps(グーグルマップ)にドラッグズームコントロールを追加する方法(その2)

ドラッグズームコントロールの使い方を紹介します。

なお、インストール方法など、初期的な点については「KeyDragZoomを使って、Google Maps(グーグルマップ)にドラッグズームコントロールを追加する方法」をご覧ください。

サンプル紹介

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)" >
   </script>
   <script type="text/javascript" src="/assets/keydragzoom/keydragzoom.js"></script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 8,
           center: myLatlng,
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         map.enableKeyDragZoom({
           visualEnabled: true,
           visualPosition: google.maps.ControlPosition.TOP_CENTER,
           visualPositionOffset: new google.maps.Size(35, 0),
           visualPositionIndex: 999,
           visualSprite: "https://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png",
           visualSize: new google.maps.Size(20, 20),
           key: "alt",
           boxStyle: {
             border: "4px dashed red",
             backgroundColor: "transparent",
             opacity: 1.0
           },
           veilStyle: {
             backgroundColor: "blue",
             opacity: 0.35,
             cursor: "crosshair"
           },
           visualTips: {
            off: "選択する",
            on: "選択をやめる"
           }
        });
     }
   </script>
</head>
<body onload="initMap()">
   <div id="map_canvas"></div>
</body>
</html>

デモ

KeyDragZoom

「enableKeyDragZoom」メソッド実行時、オプションを指定できます。

オプション一覧

オプション説明初期値
visualEnabledズームコントロール表示/非表示フラグfalse
visualPositionズームコントロール表示位置
定数「google.maps.ControlPosition」を使用
google.maps.ControlPosition.LEFT_TOP
visualPositionOffsetズームコントロールの位置オフセット
設定することで、コントールの位置の微調整が可能です
google.maps.Size(35, 0)
visualPositionIndexズームコントロールのzIndexnull
visualSpriteズームコントロールのスプライトアイコンURIhttp://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png
visualSizeズームコントロールのアイコンサイズgoogle.maps.Size(20, 20)
visualTipsズームコントロールのアイコンの代替テキスト
off:ドラッグズーム無効時
on:ドラッグズーム有効時
{
off: “Turn on drag zoom mode”
,on: “Turn off drag zoom mode”
}
noZoomズーム機能の有効/無効フラグ
trueにすると、選択後もズームしなくなります
false
keyドラッグズームモードへ移行するためのキーボードキー
shift
ctrl
alt
のいずれかを指定
shift
boxStyle選択ボックスエリアのCSSスタイル{border: “4px solid #736AFF”}
veilStyleドラッグズーム有効時のマップのCSSスタイル{
backgroundColor: “gray”
,opacity: 0.25
,cursor: “crosshair”
}

ご参考

関連ページ