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 | ズームコントロールのzIndex | null |
visualSprite | ズームコントロールのスプライトアイコンURI | http://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” } |
ご参考
関連ページ