GoogleMaps APIv3 中心の座標を表示

マップ中央の緯度・経度とマップの倍率を表示します

マップ下部に緯度・経度とマップの倍率を表示します。地図を移動すると変化します。編集で使える用inputフォームと通常のhtml用の2種類出力しています。

• 緯度
• 経度
• 倍率

<style>
#mapdiv1 {width:400px;height:300px;}
</style>
<div id="mapdiv1"></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>
  var map1;
  function initMap1() {
 
    //地図表示
    map1 = new google.maps.Map(document.getElementById('mapdiv1'), {
      center: {lat: 35.6895326, lng: 139.6908937},
      zoom: 8
    });
 
    //センターマーカー表示
    var tgt_marker = new google.maps.Marker({
      position: {lat: 34.649394, lng: 135.001478},
      map: map1,
      clickable: false, /* クリック不可 */
      zIndex: 0
    });
    tgt_marker.setMap(map1);
 
    //地図の表示内容が変更されたら
    google.maps.event.addListener( map1 ,'bounds_changed',function(){
      //緯度と経度を取得
      var pos = map1.getCenter();
      var latlng = new google.maps.LatLng( pos.lat(), pos.lng() );
      var lat = latlng.lat();
      var lng = latlng.lng();
      //現在の表示倍率を取得
      var zoom=map1.getZoom();
 
      //spanに出力
      document.getElementById('lat_span').innerHTML = lat;
      document.getElementById('lng_span').innerHTML = lng;
      document.getElementById('zoom_span').innerHTML = zoom;
 
      //編集用にinputに出力
      document.getElementById('lat_input').value = lat;
      document.getElementById('lng_input').value = lng;
      document.getElementById('zoom_input').value = zoom;
 
      //ターゲットスコープ移動
      tgt_marker.setPosition(pos);
    });
  }
 
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap1" async defer></script>

1.HTMLに座標を出力する部分です。inputフォームとspanに出力します。

<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>

使わない項目を削除したい場合はAPI(JavaScript)の出力部分も削除しないとエラーになります。（削除する部分がわからない場合は表示したくない項目にをdivやspanで囲ってCSSの「display: none;」で隠しても良いです。）

<style>
  .hide{display: none;}
</style>
↓
<li>緯度<input type="text" id="lat_input" /> <span class="hide"><span id="lat_span"></span></span></li>
<li>経度<input type="text" id="lng_input" /> <span class="hide"><span id="lng_span"></span></span></li>
<li>倍率<span class="hide"><input type="text" id="zoom_input" /></span><span id="zoom_span"></span></li>

2.「bounds_changed」はマップに変化があったら発生するイベントで、移動したら緯度・経度・表示倍率を取得し、上記の表示場所に値を挿入しています。

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

センターマーカーについては次のページをご覧下さい・・・GoogleMaps APIv3 地図の中央に十字アイコン表示