以前公開していた「GoogleMapsの地図上で、東経北緯(緯度経度)を取得したいの。」ってののGoogle Maps API Version3版ですな。
今回はせっかくだからソースも公開しましょーね。APIキーが不要になったのはホント便利! (だけどIE6はサポート外という……)
<script type="text/javascript" src="http://www.google.com/jsapi?key=APIKey"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width:450px;height:400px;border:1px solid #999;"></div>これでGoogle AJAX APIとGoogle Maps APIを叩きつつ、枠を用意した上で、
<script type="text/javascript">
//<![CDATA[
function initialize() {
//初期表示位置を取得
//取得できなかったら「天神中央公園」を初期値にします
var lat = 33.590407160025975;
var lon = 130.4028868675232;
var gCli = google.loader.ClientLocation;
if (gCli !== null)
{
// IPアドレスから中心位置を設定
lat = gCli.latitude;
lon = gCli.longitude;
}
var myLatlng = new google.maps.LatLng(lat, lon);
var myOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
//ドラッカブルマーカーのイベントリスナ作成と表示
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragstart');
google.maps.event.addListener(marker, 'dragend', function() {
displayLatLng(marker.getPosition());
map.panTo(marker.getPosition());
});
//初期表示位置をテキストボックスへ
displayLatLng(marker.getPosition());
}
function displayLatLng(latlng) {
var str = new String(latlng);
// "(" と ")" " "を消す
str = str.replace(" ","");
str = str.replace("(","");
str = str.replace(")","");
jQuery('#latlng').val(str);
}
jQuery(document).ready(function() {
initialize();
});
//]]>
</script>
こげな感じ。
Google Maps APIプログラミング入門
posted with amazlet at 11.05.12
勝又 雅史
アスキー・メディアワークス
売り上げランキング: 13434
アスキー・メディアワークス
売り上げランキング: 13434

コメント
“GoogleMapsの地図上で、東経北緯(緯度経度)を取得したいのV3。” への1件のフィードバック
[…] 追記:Google Maps API V3版(ソース付き)公開しました。 […]