MENU

GoogleMapsの地図上で、東経北緯(緯度経度)を取得したいのV3。

以前公開していた「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プログラミング入門
勝又 雅史
アスキー・メディアワークス
売り上げランキング: 13434