SQLの窓

2016年06月20日


ブラウザの geolocation で Google MAP に現在地を表示。ライブラリでさらに詳細情報。API の geocoder で名称・住所から Google MAP を表示して、ライブラリでさらに詳細情報を取得。

緯度・経度関連で、4つの機能を実装したデモページです


※ この デモは https でアクセスしますが、http でもアクセスできるので注意して下さい
※ http でアクセスした場合、Google Chrome では現在地を取得できません

1) navigator.geolocation.getCurrentPosition でブラウザの現在位置を取得
2) ライブラリ(DmGeocorder) を使用して緯度・経度から場所情報を取得
3) Google の API の geocoder.geocode で 住所・名前から緯度・経度を取得

4) Google Maps JavaScript API で MAP 表示

制限事項

Google Chrome ては、PC でも スマホでも、現在地取得には https を使うか localhost でないと動作しません。( 他のブラウザでは今のところ動作しているようですが、将来的には同じになる可能性があります )
事実、現在 Yahoo の雨雲ズームレーダでは、Chrome では現在位置が取れません。
通常のサイトで使用して、PC の開発者ツールで表示すると、以下のようにメッセージが出ます


getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
DmGeocorder は、自分でサーバに準備して使うものです。ですが、とりあえずデモ内で使用しているものに関して外部からの使用制限は設けていません。 Google Maps JavaScript API は、API コンソールで登録した APIKEY を使用し、使用するドメインを登録しているので他所では使用できません。 もし、他所で使用しようとすると以下のようになります デモのソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>
body,input {
	font-family: "ヒラギノ角ゴPro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
	font-size: 16px;
}

a {
	color: navy;
}

#target_area {
	width: 600px; 
	height: 480px; 
}
#address {
	margin-bottom: 10px;
	width: 450px;
}


@media screen and (max-width:774px) {

	#target_area {
		width: 100%; 
	}

	#address {
		width: 250px;
	}

}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// *************************************
// 初期位置
// *************************************
var lat = 34.7013233;
var lng = 135.4966954;

var geo = null;


$(function(){

	// *************************************
	// 現在位置を取得してマップに反映する
	// *************************************
	$("#getcur").on("click",function(){

		// *************************************
		// Chrome では、この実行には https か 
		// localhost である必要があります
		// *************************************
		navigator.geolocation.getCurrentPosition(function(target){
			geo = target;
			console.dir(target);

			var obj = {};

			for( value in target.coords ) {
				obj[value] = target.coords[value];
			}

			// ブラウザの geolocation で取得した内容
			$("#latlng").text( JSON.stringify(obj,null,"    ") );

			lat = geo.coords.latitude;
			lng = geo.coords.longitude;

			// Google MAP の再表示
			loadMap(document,"target_area",lat,lng,15);

			// サーバーのライブラリから場所情報を取得
			$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
				+geo.coords.latitude
				+"&lng="
				+geo.coords.longitude,
				function(data){
					console.dir(data);
					$("#latlng2").text( JSON.stringify(data,null,"  ") );
			
				}
			);
				
		});

	});

});

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQq2Yaz_ue8jVhf2LAQBlE73RJ17jd0tM"></script>
<script>
var geocoder = new google.maps.Geocoder();
var map;

$(function(){
	// *************************************
	// 住所・名前から位置情報を取得
	// *************************************
	$("#geo_action").on("click",function(){
		geocoder.geocode( {'address': $("#address").val()}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: map,
					position: results[0].geometry.location
				});
				// lat と lng
				console.log(results[0].geometry.location.lat(),results[0].geometry.location.lng());

				// *************************************
				// サーバーのライブラリから場所情報を取得
				// *************************************
				$.get("https://lightbox.sakura.ne.jp/toolbox/g_ken.php?lat="
					+results[0].geometry.location.lat()
					+"&lng="
					+results[0].geometry.location.lng(),
					function(data){
						console.dir(data);
						$("#latlng2").text( JSON.stringify(data,null,"  ") );
				
					}
				);

			}
			else {
				alert("Geocode が失敗しました : " + status);
			}
		});
	});
});

// *************************************
// Google MAP の表示
// *************************************
function loadMap(doc,obj_str,a,b,c) {
	var latlng = new google.maps.LatLng(a,b);
	var myOptions = {
		zoom: c,
		center: latlng,
		mapTypeControlOptions: {
			mapTypeIds: [
				google.maps.MapTypeId.HYBRID,
				google.maps.MapTypeId.ROADMAP,
				google.maps.MapTypeId.SATELLITE
			],
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		mapTypeId: google.maps.MapTypeId.HYBRID,
		scaleControl: true
	};
	map = new google.maps.Map(doc.getElementById(obj_str),myOptions);
}

// *************************************
// 最初の Google MAP の表示
// *************************************
google.maps.event.addDomListener(window, 'load', function () {
	loadMap(document,"target_area",lat,lng,15);
}); 
</script>
</head>
<body>

住所 <input type="text" id="address"> <input type="button" id="geo_action" value="実行">
<div id='target_area'></div>
<br><br>
<input type="button" id="getcur" value="現在位置を取得してマップに反映する">

<br>
▼ ブラウザの geolocation で取得した内容
<pre id="latlng"></pre>
▼ <a target="_blank" href="https://github.com/demouth/DmGeocoder">ライブラリ</a>より取得した場所情報
<pre id="latlng2"></pre>


</body>
</html>


以下のツールで、スマホで簡単に URL を送る事ができます。



【Googleの最新記事】
posted by lightbox at 2016-06-20 15:01 | Google | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり