差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- gmap3_latlng [2018/05/26 22:28]
管理者
+++ gmap3_latlng [2018/05/26 22:28] (現在)
管理者 [備考]
@@ ライン 1: / ライン 1: @@
+[[start]]＞[[programming_start]]
+~~NOCACHE~~
+====== GoogleMaps APIv3 中心の座標を表示 ======
+マップ中央の緯度・経度とマップの倍率を表示します
+===== サンプルデモ =====
+マップ下部に緯度・経度とマップの倍率を表示します。地図を移動すると変化します。編集で使える用inputフォームと通常のhtml用の2種類出力しています。
+<html>
+<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>
+</html>
+===== ソースコード =====
+<code javascript>
+<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>
+</code>
+===== 説明 =====
+.HTMLに座標を出力する部分です。inputフォームとspanに出力します。
+<code html>
+<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>
+</code>
+使わない項目を削除したい場合はAPI(JavaScript)の出力部分も削除しないとエラーになります。（削除する部分がわからない場合は表示したくない項目にをdivやspanで囲ってCSSの「display: none;」で隠しても良いです。）
+<code html>
+<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>
+</code>
+.「bounds_changed」はマップに変化があったら発生するイベントで、移動したら緯度・経度・表示倍率を取得し、上記の表示場所に値を挿入しています。
+<code javascript>
+    //地図の表示内容が変更されたら
+    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;
+    });
+</code>
+===== 備考 =====
+センターマーカーについては次のページをご覧下さい・・・[[gmap3_cross]]

あちあち情報局

ユーザ用ツール

サイト用ツール

差分

ページ用ツール