PHPで位置情報を取得してGoogleMapAPIで使用する方法

2015/02/18 2015/04/22

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映させたかった。調べてみるとHTML5のGeolocation APIというものが使えそう。

■対応ブラウザ

IE9～ / FireFox3.5～ / GoogleChrome 5～ / Safari 5～

■取得のみのコード

var ret = new Array();
if( navigator.geolocation ){
	navigator.geolocation.getCurrentPosition(
		function( pos ){ //位置取得成功
			ret['long'] = pos.coords.longitude; //経度
			ret['lat'] = pos.coords.latitude; //緯度
			result( ret );
		},
		function( error ){ //失敗
			switch( error.code ){
				case 1: ret['msg'] = "位置情報の利用が許可されていません"; break;
				case 2: ret['msg'] = "デバイスの位置が判定できません"; break;
				case 3: ret['msg'] = "タイムアウトしました"; break;
			}
			result( ret );
		}
	);
} else { //使用不可のブラウザ
	ret['msg'] = 'このブラウザでは位置取得が出来ません。';
	result( ret );
}
function result( ret ){
	console.log( ret );
}

var ret = new Array();

if( navigator.geolocation ){

navigator.geolocation.getCurrentPosition(

function( pos ){ //位置取得成功

ret['long'] = pos.coords.longitude; //経度

ret['lat'] = pos.coords.latitude; //緯度

result( ret );

function( error ){ //失敗

switch( error.code ){

case 1: ret['msg'] = "位置情報の利用が許可されていません"; break;

case 2: ret['msg'] = "デバイスの位置が判定できません"; break;

case 3: ret['msg'] = "タイムアウトしました"; break;

}

result( ret );

}

);

} else { //使用不可のブラウザ

ret['msg'] = 'このブラウザでは位置取得が出来ません。';

result( ret );

}

function result( ret ){

console.log( ret );

}

非同期通信を行う為、ソースが上から順番に読まれるわけではなく、処理順が変わってくるため注意。位置情報取得処理後に違う処理をしたい場合は、考えないといけないのが面倒。

以下にGoogleMapAPIに反映させるサンプルとソース。

■サンプル

http://sample.taitan916.info/geolocation/

■ソース

	//サンプルで東京タワーを表示
	var currentWindow = null;
	var sample = { 'x':'35.65858', 'y':'139.745433', 'balloon':'東京タワー' };
	var latlng = new google.maps.LatLng(sample.x, sample.y);
	var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	makeMarker(sample);


	//現在位置の取得
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
		function (pos) { 
			var mapData = { 'x':pos.coords.latitude, 'y':pos.coords.longitude, 'balloon':'現在位置' };
			makeMarker( mapData );
		},
		function (error) {
			var msg;
			switch( error.code ){
				case 1: msg = "位置情報の利用が許可されていません"; break;
				case 2: msg = "位置が判定できません"; break;
				case 3: msg = "タイムアウトしました"; break;
			}
			alert(msg);
		});
	} else {
		alert("本ブラウザではGeolocationが使えません");
	}

	//マーカー作成
	function makeMarker( mapData ){
		var marker = new google.maps.Marker({
			position : new google.maps.LatLng(mapData.x,mapData.y), 
			map: map
		});

		var infoWindow = new google.maps.InfoWindow();
		google.maps.event.addListener(marker, 'click', function() {
			if (currentWindow) {
				currentWindow.close();
			}
			infoWindow.setContent(mapData.balloon);
			infoWindow.open(map,marker);
			currentWindow = infoWindow;
		});
	}

//サンプルで東京タワーを表示

var currentWindow = null;

var sample = { 'x':'35.65858', 'y':'139.745433', 'balloon':'東京タワー' };

var latlng = new google.maps.LatLng(sample.x, sample.y);

var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

makeMarker(sample);

//現在位置の取得

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(

function (pos) {

var mapData = { 'x':pos.coords.latitude, 'y':pos.coords.longitude, 'balloon':'現在位置' };

makeMarker( mapData );

function (error) {

var msg;

switch( error.code ){

case 1: msg = "位置情報の利用が許可されていません"; break;

case 2: msg = "位置が判定できません"; break;

case 3: msg = "タイムアウトしました"; break;

}

alert(msg);

});

} else {

alert("本ブラウザではGeolocationが使えません");

}

//マーカー作成

function makeMarker( mapData ){

var marker = new google.maps.Marker({

position : new google.maps.LatLng(mapData.x,mapData.y),

map: map

});

var infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker, 'click', function() {

if (currentWindow) {

currentWindow.close();

}

infoWindow.setContent(mapData.balloon);

infoWindow.open(map,marker);

currentWindow = infoWindow;

});

}

■その他

ブラウザによってリロードのたびに許可を求められるものと求められないものがあった。一度取得したものは10分ぐらいキャッシュさせとくのが良いかも。

- JavaScript GoogleMap

: ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの要望があって色々あった ...

: Android2.3でJavaScriptのエラー

Android2.3で関数が動かないといったエラーが発生していた。担当外だった ...

: javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

: JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。だいぶ書き換えて ...

: JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

: youtubeの埋め込みをポップアップ表示させる方法

youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...

: javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックをループでまわ ...

: jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な処理を行えそうな点があったので ...

: 時間差をつけて処理する

setTimeout( 処理, タイムアウト時間 ); で、時間差をつけて処理が ...

: GoogleMapで都道府県の中心地と県庁所在地

GoogleMapで都道府県の中心地もしくは県庁所在地にマーカーを立てたかった。 ...

PREV: PHPでファイルを添付してメール送信
NEXT: GoogleMapAPIでヒートマップを表示する方法

PHPで位置情報を取得してGoogleMapAPIで使用する方法

関連記事