Googleマップ有料化でYahoo! APIを使ってみた (5/5)

2012年03月12日　13時16分更新

文●古籏一浩

ツイートする

地図の中心の緯度・経度を表示する

　表示されている地図の緯度・経度を知りたい場合もあります。地図をドラッグしたら中心の緯度・経度を表示するサンプルを見てみてましょう。Googleマップの場合がサンプル8、Yahoo!マップの場合がサンプル9です。

　ドラッグ時の処理は、GoogleマップとYahoo!マップで違いがあります。Googleマップではドラッグするとdragイベントが発生しますが、Yahoo!マップではドラッグ開始時（movestart）と終了時（moveend）しかイベントが発生しません。そこで、Googleマップの場合はdragイベント中に地図の中心の緯度・経度を表示し、Yahoo!マップの場合はドラッグ開始時と終了時に地図の中心の緯度・経度を表示します。

　地図の中心の緯度・経度は、GoogleマップもYahoo!マップもgetCenter()メソッドで求められます。getCenter()は緯度・経度を持つオブジェクトを返します。GoogleマップもYahoo!マップも同じlat()、lng()メソッドで緯度・経度を取得できます。

Googleマップでドラッグした場合。緯度経度がリアルタイムで表示される

Yahoo!マップでドラッグした場合。ドラッグ開始時と終了時に緯度経度が表示される

■サンプル8[HTML]


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="utf-8"> 
    <title>グーグルマップで地図の中心の緯度経度を表示する</title>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>グーグルマップで地図の中心の緯度経度を表示する</h1>
    <div id="myMap" style="width:600px;height:400px;"></div>
    <div id="mapPos"></div>
  </body>
</html>

■サンプル8[sample.js]


window.onload = function(){
  var lat = 35.692507;  // 新宿駅の緯度
  var lng = 139.700346; // 新宿駅の経度
  var map = new google.maps.Map(
    document.getElementById("myMap"),{
      zoom : 12, // ズームレベルは12
      center : new google.maps.LatLng(lat, lng),
      mapTypeId : google.maps.MapTypeId.ROADMAP // 通常の地図を表示
    }
  );
  // ドラッグしたら中心座標を表示する
  google.maps.event.addListener(map, "drag", function() {
    var pos = map.getCenter();
    var lat = pos.lat();
    var lng = pos.lng();
    document.getElementById("mapPos").innerHTML = ("緯度："+lat+"、経度："+lng);
  });
}

■サンプル9[HTML]


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="utf-8"> 
    <title>ヤフーマップで地図の中心の緯度経度を表示する</title>
    <script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=●●●"></script>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>ヤフーマップで地図の中心の緯度経度を表示する</h1>
    <div id="myMap" style="width:600px;height:400px;"></div>
    <div id="mapPos"></div>
  </body>
</html>

■サンプル9[sample.js]


window.onload = function(){
  var lat = 35.692507;  // 新宿駅の緯度
  var lng = 139.700346; // 新宿駅の経度
  var map = new Y.Map("myMap");
  map.drawMap(
    new Y.LatLng(lat, lng),
    12,  // ズームレベルは12
    Y.LayerSetId.NORMAL  // 通常の地図を表示
  );
  // 地図の種類を切り換えるコントローラーを表示
  map.addControl(new Y.LayerSetControl());
  // ズームコントローラーを表示
  map.addControl(new Y.SliderZoomControlVertical());
  // ドラッグしたら地図の中心の緯度経度を表示
  map.bind("movestart", function(){
    var pos = map.getCenter();
    var lat = pos.lat();
    var lng = pos.lng();
    document.getElementById("mapPos").innerHTML = ("緯度："+lat+"、経度："+lng);
  });
  map.bind("moveend", function(){
    var pos = map.getCenter();
    var lat = pos.lat();
    var lng = pos.lng();
    document.getElementById("mapPos").innerHTML = ("緯度："+lat+"、経度："+lng);
  });
}