内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
GoogleMaps APIv3 中心の座標を表示
gmap3_latlng
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
[[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> ===== 説明 ===== 1.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> 2.「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]]
gmap3_latlng.txt
· 最終更新: 2018/05/26 22:28 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ