• 小
  • 中
  • 大

中心座標の指定


地図の中心座標を指定するにはMapクラスで用意されている「setCenter」methodを使います。


setCenter(latlng:LatLng)

引数に指定したLatLngクラスのオブジェクトで表される座標に地図の中心座標を設定します。
LatLngクラスは座標位置を表すためのクラスです。LatLngクラスのオブジェクトは次のように作成します。
var obj = new google.maps.LatLng(緯度,経度);

1番目の引数に緯度を、2番目の引数に経度を指定します。緯度は「-90」から「+90」の間、経度は「-180」から「+180」の間で指定します。例えば緯度が"35.658517"、経度が"139.745493"を表す座標は次のように作成できます。
var latlng = new google.maps.LatLng(35.658517, 139.745493);

作成したLatLngクラスのオブジェクトを1番目の引数に指定し「cetCenter」methodを呼び出します。
var map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
var latlng = new google.maps.LatLng(35.658517, 139.745493);
map.setCenter(latlng);

地図の中心座標が新しく指定した位置に設定されます。

サンプルコード

サンプル.js


var map;
var tokyo = new google.maps.LatLng
(35.697456,139.702148);
var osaka = new google.maps.LatLng
(34.694203,135.502625);

function initialize() {
var opts = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map
(document.getElementById("map_canvas"), opts);
}

function setTokyo() {
map.setCenter(tokyo);
}

function setOsaka() {
map.setCenter(osaka);
}

サンプル.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 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>
<div id="map_canvas" style="width:500px;height:300px"></div>
<form>
<p>
<input type="button" id="tokyo" value="東京" onclick="setTokyo()" />
<input type="button" id="osaka" value="大阪" onclick="setOsaka()" />
</p>
</form>
</body>
</html>


表示例 中心座標の移動


Google Maps サンプル > 中心座標の指定し移動