地図の中心の高度(海抜)を求める

説明

地図の中心の高度(海抜)を求めるにはcenter_changedイベントを検知します。このイベントはマップの中心位置が変化した場合に発生します。イベントが発生したらイベントハンドラ内でgetElevationForLocations()メソッドを使って高度情報を求めます。getElevationForLocations()のオプションパラメータのlocationに地図の中心座標を配列形式で入れておきます。地図の中心座標はmap.getCenter()を使って求めることができます。
高度情報が取得できたらresults[0].elevationを参照し高度を読み出します。これにより地図をドラッグしたりした際にほぼリアルタイムに地図の中心の高度を表示することができます。
Google Maps APIプログラミング入門 Google Maps API プログラミング入門。Google Maps API Expertである勝又雅史氏が最新のAPI ver3やGoogle Maps for Flashなどについて解説しています。
アマゾンで購入する

サンプルコード [実行]

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google Maps API ver 3 Sample/グーグルマップAPIサンプル/Google Maps API样品</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="gmap"></div>
<div id="mapElev"></div>
<script type="text/javascript">
var shiojiriStation = new google.maps.LatLng(36.11453636986865, 137.94893994927406);
var map = new google.maps.Map(
document.getElementById("gmap"),{
zoom : 16,
center : shiojiriStation,
mapTypeId : google.maps.MapTypeId.TERRAIN
}
);
var elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, "center_changed", function() {
var pos = map.getCenter();
// 高度を求める
elevator.getElevationForLocations({
"locations": [ pos ]
}, function(results, status){
if (status == google.maps.ElevationStatus.OK){
document.getElementById("mapElev").innerHTML = results[0].elevation +"m";
}else{
alert("高度の取得に失敗しました");
}
});
});
</script>
</body>
</html>