Googleマップの中心の緯度経度を表示する
ちょっと、古めの内容ですが、Googleマップの中心の緯度経度を表示してみました。
こんな感じで、ドラッグしても、センターの場所を教えてくれます。
ソースコードはこちらっ
<html xmlns="http//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY&sensor=false" type="text/javascript"></script> <script type="text/javascript"> function initialize() { if (GBrowserIsCompatible()) { //マップの初期化 var map = new GMap2( document.getElementById("map") ); var point = new GLatLng( 35 , 139 ); console.log( point ); map.setCenter( point , 18); map.addControl( new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5,30)) ); map.addControl(new GMapTypeControl()); map.addControl(new GScaleControl()); //十字アイコン作成 var icon = new GIcon(); icon.image = "/image/top/gmap_cursor.gif"; icon.iconSize = new GSize(100, 100); icon.iconAnchor = new GPoint(50, 50); var marker = new GMarker( point , icon ); map.addOverlay(marker); //マップ移動イベント GEvent.addListener( map , "move" , function(){ //現在の緯度経度を表示する showLatLon(); }); //十字アイコンが示す座標を表示 showLatLon= function (){ //マップの中央を取得 var point = map.getCenter(); //マーカーをセンターに配置する marker.setPoint( point ); document.getElementById("latlon").innerHTML ="緯度:" + point.lng() + "<br />経度:" + point.lat(); }; showLatLon(); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <div id="latlon" style="padding:10px;"> 緯度:読み込み中・・・<br> 経度:読み込み中・・・ </div> <div id="map" style="width:480px;height:480px;"></div> </body> </html>