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