Google Maps API v3 - 緯度・経度・倍率を表示

地図中央の座標と地図の倍率を表示します。

デモ

　地図を動かすと下部の「緯度・経度・倍率」の数値が変化します。

説明

　地図が移動した場合に発生する「bounds_changed」イベントで、センター座標と表示倍率をgetCenter()とgetZoom()で取得、あらかじめHTML側に用意したidにを出力する。

　デモではspanに出力する方法とinputに出力する方法の両方を書いてある。不要な表示を消したい場合、HTMLタグ側だけ消すとエラーとなるのでJavascript側も一緒に消すか、cssの「visibility:hidden;」か「display:none;」で非表示にする事。

サンプル プログラム


<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Google Maps API v3 - 緯度・経度・倍率を表示</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>

      #mapdiv { height:400px; width:100%}

    </style>
  </head>
  <body>

    <div id="mapdiv"></div>

    <ul>
    <li>緯度<input type="text" id="lat_input" /> <span id="lat_span"></span></li>
    <li>経度<input type="text" id="lng_input" /> <span id="lng_span"></span></li>
    <li>倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span></li>
    </ul>

    <script type="text/javascript">
      var gmap;
      function initMap() {
        gmap = new google.maps.Map(document.getElementById('mapdiv'), {
          center: {lat: 34.649394, lng: 135.001478},
          zoom: 17
        });

        //ターゲットスコープ処理
        var tgt_image = {
          url: 'gmap_cross.gif',
          size: new google.maps.Size(32, 32),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(16, 16)
        };
        var tgt_marker = new google.maps.Marker({
          position: {lat: 34.649394, lng: 135.001478},
          map: gmap,
          icon: tgt_image,
          clickable: false, /* クリック不可 */
          zIndex: 0
        });
        tgt_marker.setMap(gmap);


        //地図の表示内容が変更されたら
        google.maps.event.addListener( gmap ,'bounds_changed',function(){
          //緯度と経度を取得
          var pos = gmap.getCenter();
          var latlng = new google.maps.LatLng( pos.lat(), pos.lng() );
          var lat = latlng.lat();
          var lng = latlng.lng();
          //spanに出力
          document.getElementById('lat_span').innerHTML = lat;
          document.getElementById('lng_span').innerHTML = lng;
          //inputに出力
          document.getElementById('lat_input').value = lat;
          document.getElementById('lng_input').value = lng;

          //現在の表示倍率を取得
          var zoom=gmap.getZoom();
          //spanに出力
          document.getElementById('zoom_span').innerHTML = zoom;
          //inputに出力
          document.getElementById('zoom_input').value = zoom;

          //ターゲットスコープ移動
          tgt_marker.setPosition(pos);
        });
      }

    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap">
    </script>
  </body>
</html>

http://www.achiachi.net/