地図に対する操作

キーボードでのコントロール

Google Maps APIを使って作成した地図に対して、利用者は主にマウスを使って移動したりズームレベルを変更しますが、キーボードからも同じような操作を行うことができます

プロパティ	タイプ	説明
keyboardShortcuts	boolean	false の場合、地図をキーボードでコントロールすることはできません。デフォルトでは、キーボードショートカットは有効になっています。

キーボードによる地図の操作として次のようなものが定義されています。

上矢印キー   上へ移動
下矢印キー    下へ移動
左矢印キー   左へ移動
右矢印キー   右へ移動
PageDown   上へ3/4ページ移動
PageUp        下へ3/4ページ移動
Home           左へ3/4ページ移動
End              右へ3/4ページ移動
+     ズームイン
-      ズームアウト

無効に設定するにはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「keyboardShortcuts」プロパティに"false"を設定します。

  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    keyboardShortcuts: false
  };

これでキーボードによる操作が無効となります。デフォルトでは、キーボードショートカットは有効になっていますので有効にしたい場合特に意識する必要はありませが、明示的に設定する場合は"true"を設定します。

※マップサイズをピクセルで指定しないと機能しません。

サンプルコード

サンプル.js

var map;

function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    keyboardShortcuts: true
  };
  map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function toEnable() {
  var opts = {
    keyboardShortcuts: true
  };
  map.setOptions(opts);}

function toDisable() {
  var opts = {
    keyboardShortcuts: false
  };
  map.setOptions(opts);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API キーボードのコントロール</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
.button-form{width:100%;margin-top:20px}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>キーボード コントロールの切り替え</p>
<div id="map_canvas" style="width:500px;height:300px"></div>
<div class="button-form">
<form>
<input type="button" id="Effective" value="有効" 
onclick="toEnable()">
<input type="button" id="Invalidity" value="無効" 
onclick="toDisable()">
</form>
</div>
</body>
</html>

表示例　キーボードコントロールを無効/有効の切り替え

地図サンプルイメージ
キーボードコントロールを無効/有効の切り替え

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

Google Maps サンプル　>　キーボードのコントロール

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ドラッグ操作の有効/無効

Google Maps APIを使って作成した地図に対して、マウスを使い地図を掴んで移動させるようなドラッグによる操作を有効にしたり無効にしたりする設定について記述します。

無効に設定するにはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「draggable」プロパティに"false"を設定して下さい。

プロパティ	タイプ	説明
draggable	boolean	false の場合、地図をドラッグすることはできません。デフォルトでは、ドラッグは有効になっています。

  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: false
  };

サンプルコード

サンプル.js

var map;
function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true
  };
  map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function toEnable() {
  var opts = {
    draggable: true
  };
  map.setOptions(opts);}

function toDisable() {
  var opts = {
    draggable: false
  };
  map.setOptions(opts);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ドラッグ操作の切り替え</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
.button-form{width:100%;margin-top:20px}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ドラッグ操作の切り替え</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
<div class="button-form">
<form>
<input type="button" id="Effective" value="有効" 
onclick="toEnable()">
<input type="button" id="Invalidity" value="無効" 
onclick="toDisable()">
</form>
</div>
</body>
</html>

表示例　ドラッグ操作の有効/無効の切り替え

地図サンプルイメージ
ドラッグ操作の有効/無効の切り替

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

Google Maps サンプル　>　ドラッグ操作の切り替え

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

ダブルクリックでズーム操作

Google Maps APIを使って作成した地図では、地図上でダブルクリックすることで地図の中心がクリックした位置に移動し、そしてズームレベルが1つ上がり詳細な地図が表示されるようになっています。

このダブルクリックによる操作は有効にしたり無効にしたりすることができます。無効に設定するにはMapクラスのオブジェクトを作成する時に指定するMapOptionsオブジェクトの「disableDoubleClickZoom」プロパティに"true"を設定して下さい。

プロパティ	タイプ	説明
disableDoubleClickZoom	boolean	ダブルクリックによるズームと中央揃えを有効/無効にします。デフォルトで有効です。

  var opts = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDoubleClickZoom: true
  };

※ 無効にするかどうかを設定するので"true"を指定すると無効になります。

これでダブルクリックによる操作が無効となります。もし明示的に有効にしたい場合には"false"を設定して下さい。

サンプルコード

サンプル.js

var map;
function initialize() {
  var latlng = new google.maps.LatLng(35.658704,139.745408);
  var opts = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDoubleClickZoom: false
  };
  map = new google.maps.Map(document.getElementById
("map_canvas"), opts);
}

function toEnable() {
  var opts = {
    disableDoubleClickZoom: false
  };
  map.setOptions(opts);}

function toDisable() {
  var opts = {
    disableDoubleClickZoom: true
  };
  map.setOptions(opts);
}

サンプル.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps JavaScript API ダブルクリックでズーム操作</title>
<style>
p {line-height:180%}
.head-title {width:100%;background:#87ceeb;color:#fff;text-indent:8px;font-weight:700;line-height:180%}
.button-form{width:100%;margin-top:20px}
</style>
<script
 src="https://maps.google.com/maps/api/js?key=APIキー"></script>
<script src="サンプル.js"></script>
</head>
<body onload="initialize()">
<div class="head-title">Google Maps APIを使ったサンプル。</div>
<p>ダブルクリックでズーム操作の切り替え</p>
<div id="map_canvas" style="width:100%;height:300px"></div>
<div class="button-form">
<form>;
<input type="button" id="Effective" value="有効" 
onclick="toEnable()">
<input type="button" id="Invalidity" value="無効" 
onclick="toDisable()">
</form>
</div>
</body>
</html>

表示例　ダブルクリックでズーム操作の有効/無効切り替え

地図サンプルイメージ
ダブルクリックでズーム操作

サンプルイメージ地図は地理院タイル（標高タイル）を加工して作成

Google Maps サンプル　>　ダブルクリックでズーム操作

※リクエスト制限を設けてありますので1日の上限アクセス（割り当て）を超えた場合、サンプルが機能しないこともありますのでご了承ください。

地図に対する操作

キーボードでのコントロール

サンプルコード

ドラッグ操作の有効/無効

サンプルコード

ダブルクリックでズーム操作

サンプルコード

カテゴリー