• 小
  • 中
  • 大

ズームレベルの指定


地図のズームレベルはMapクラスのオブジェクトを作成し地図を表示する場合、必須の設定となります。MapOptionsオブジェクトの「zoom」プロパティでズームレベルを指定します。


var opts = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
};
var map = new google.maps.Map
(document.getElementById("map_canvas"),opts);

MapOptionsオブジェクトを使って指定する以外にもズームレベルを設定することが可能です。Mapクラスで用意されている「setZoom」methodを使います。
setZoom(zoom:number)

引数にはズームレベルを数値で指定します。数字が小さいほど広域な地図となり、数字が大きいほど詳細な地図となります。

ズームレベルを6に設定する場合は次のように記述します。
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
map.setZoom(6);

指定可能な値の最小値は0です。

現在のズームレベルを取得


現在設定されているズームレベルを取得するにはMapクラスで用意されている「getZoom」methodを使います。


getZoom()
戻り値:number

methodを実行すると現在設定されているズームレベルを表す数値を取得します。

Mapクラスに段階的にズームレベルを上げ下げするためのmethodが用意されていませんが、「getZoom」methodと組み合わせることでズームレベルを上げ下げできます。

サンプルコード

サンプル.js


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

document.getElementById("zoomlevel").innerHTML
= "LEVEL:" + map.getZoom();
}

function zoomIn() {
var level = map.getZoom();
level ++;
map.setZoom(level);
document.getElementById("zoomlevel").innerHTML
= "LEVEL:" + level;
}

function zoomOut() {
var level = map.getZoom();
if (level != 0){
level --;
}
map.setZoom(level);
document.getElementById("zoomlevel").innerHTML
= "LEVEL:" + level;
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<p id="zoomlevel" style="margin:0;padding:0;"></p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<form><p>
<input type="button" id="in" value="+" onclick="zoomIn()" />
<input type="button" id="out" value="−" onclick="zoomOut()" />
</p></form>
</body>
</html>


表示例 ズームレベルの指定


Google Maps サンプル > ズームレベルを指定する