Google-maps-zoom
提供:Dev Guides
Googleマップ-ズーム
ズーム値を増やす/減らす
マップオプションの zoom 属性の値を変更することにより、マップのズーム値を増減できます。
構文
ズームオプションを使用して、マップのズーム値を増減できます。 以下は、現在のマップのズーム値を変更する構文です。
var mapOptions = {
zoom:required zoom value
};
例:ズーム6
次のコードは、Vishakhapatnam市のロードマップをズーム値6で表示します。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>
それは次の出力を生成します-
例:ズーム10
次のコードは、ズーム値10でVishakhapatnam市のロードマップを表示します。
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:10,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "sample" style = "width:587px; height:400px;"></div>
</body>
</html>
それは次の出力を生成します-