以前公開していた「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