[[start]]>[[programming_start]] ~~NOCACHE~~ ====== GoogleMaps APIv3 中心の座標を表示 ====== マップ中央の緯度・経度とマップの倍率を表示します ===== サンプルデモ ===== マップ下部に緯度・経度とマップの倍率を表示します。地図を移動すると変化します。編集で使える用inputフォームと通常のhtml用の2種類出力しています。
- 緯度
- 経度
- 倍率
===== 説明 =====
1.HTMLに座標を出力する部分です。inputフォームとspanに出力します。
- 緯度
- 経度
- 倍率
使わない項目を削除したい場合はAPI(JavaScript)の出力部分も削除しないとエラーになります。(削除する部分がわからない場合は表示したくない項目にをdivやspanで囲ってCSSの「display: none;」で隠しても良いです。)
↓
緯度
経度
倍率
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;
});
===== 備考 =====
センターマーカーについては次のページをご覧下さい・・・[[gmap3_cross]]