スポンサードリンク

Wi-Fi接続で現在位置収得が出来ない？ ジオロケーション（Geolocation）でGoogle Mapが表示されない

Posted by 管理人 on 2012年5月27日 Leave a comment (0) Go to comments

あるとき気がついたのですが、自宅でiPhone（アイフォン）のWi-Fi接続中にJQtouchデモの地図（Chromeで見てください）が表示されない場合があることに気がついた。

どうも現在地の座標を収得できていない模様。

大抵は問題ないのですが、まれにいつまで待っても地図が表示されない。iPhone（アイフォン）の設定からWi-Fi接続をOFFにして、3GS接続にすると読み込んだりする。Wi-Fiにしても3GSにしてもアンテナは、立っているのですが・・・・・。

原因はiPhone（アイフォン）の通信状況の問題でしょうか？

W3Cジオロケーション（Geolocation）のマニュアルを見ても、特に注意書きのようなものも見つからず・・・・・どうしよう。

しかたないので、ジオロケーションで現在地座標を収得出来ていない場合は、注意メッセージを表示して、現在地を取り込めたら、メッセージを消す仕組みでとりあえず対応することに。

 

◆メッセージを表示する

＜div＞タグをbody内に追加

            <div id="detecting" align="center" style="color : white;">

＜script＞内に関数を追加

function showDetecting()
{
	document.getElementById("detecting").innerHTML = "GPS測定中。お待ち下さい。" ;
}

◆現在地座標を読み込んだらメッセージを消す

タイミングよくメッセージを消せなかったので、悩んだ結果、現在地マーカーの表示（変数ini）をトリガーにすることに。

 

			if ( !ini ) 
			{

			//◆現在地マーカー
			var image = new google.maps.MarkerImage(
			'http://waox.main.jp/png/source-bluedot.png',
			null, // size
			null, // origin
			new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
			new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
			);

				ini = new google.maps.Marker(
				{
				flat: true,//・・・・・・アイコンにtrueで影を付けない
				icon: image,
				map: map,
				optimized: false,
				position:initialLocation,  
				title: '現在地',  
				visible: true
				});

			 if (ini!= null) { divnone('detecting');//◆detecting非表示 }

	　　　　	}

 

 

◆コピペ用

 script

<script type="text/javascript">
//◆個別に指定する初期表示の設定
    var zoom = 16;
    var mapTypeId = google.maps.MapTypeId.ROADMAP;
    var center = new google.maps.LatLng(35.681143,139.766822);
</script>

<script type="text/javascript">
//<![CDATA[
var watchId=0;

var initialLocation;
var tokyo = new google.maps.LatLng(35.68971, 139.69168);
var browserSupportFlag =  new Boolean();
var map;
var infowindow = new google.maps.InfoWindow();
var geowindow = new google.maps.InfoWindow();
var position;
 
function initialize()
{
	var myOptions =
	{
	disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”
 
    
	//◆ナビゲーションコントロール
	navigationControl: true,
		navigationControlOptions:
		{
    
		//◆通常 ズームコントロール
		//style: google.maps.NavigationControlStyle.DEFAULT,
		style: google.maps.NavigationControlStyle.SMALL,
		position: google.maps.ControlPosition.LEFT_TOP
    
		//◆Android ズームコントロール
		//style:google.maps.NavigationControlStyle.ANDROID,
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},
    
		//◆マップタイプコントロール
		mapTypeControl: true,
		mapTypeControlOptions:
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		//style: google.maps.MapTypeControlStyle.DEFAULT,
		//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
    
		//◆スケールコントロール
		scaleControl: true,
		scaleControlOptions:
		{
		//◆指定無しの場合左下になる
		//position: google.maps.ControlPosition.RIGHT_TOP
		//position: google.maps.ControlPosition.TOP_CENTER
		//position: google.maps.ControlPosition.BOTTOM_CENTER
		},
                center: center,
		zoom: zoom,
		mapTypeId: mapTypeId
	};

	showDetecting();
	divblock('detecting');//◆detecting表示

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

	google.maps.event.addListener(map,"projection_changed",function()
	{
	startLocationTracking();

	});


}
var ini = 0;
function startLocationTracking()
{
	map.setCenter(initialLocation);
	divblock('inside');//◆watchPosition gif表示
	divblock('mylocation');//◆mylocation表示

      
	//◆座標収得
	if(navigator.geolocation)
	{
	browserSupportFlag = true;
		watchId = navigator.geolocation.watchPosition(function(position)
		{

		initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
	//	map.setCenter(initialLocation);
		showCurrentLocation(position);

			if ( !ini ) 
			{

			//◆現在地マーカー
			var image = new google.maps.MarkerImage(
			'http://waox.main.jp/png/source-bluedot.png',
			null, // size
			null, // origin
			new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
			new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
			);

				ini = new google.maps.Marker(
				{
				flat: true,//・・・・・・アイコンにtrueで影を付けない
				icon: image,
				map: map,
				optimized: false,
				position:initialLocation,  
				title: '現在地',  
				visible: true
				});

				if (ini!= null)
				{
				divnone('detecting');//◆detecting非表示
				}

	　　　　	}
			else
			{
			ini.setPosition( initialLocation );
			}
			map.setCenter( initialLocation );


		},
		function()
		{
		handleNoGeolocation(browserSupportFlag);
		});
	}
	else
	{
   　 
	// Browser doesn't support Geolocation
	browserSupportFlag = false;
	handleNoGeolocation(browserSupportFlag);
	}
 
	google.maps.event.addListener(map, 'dragend', function() //◆地図を移動（ドラッグ）するとclearWatch
	{
		if (watchId > 0)
		{
		navigator.geolocation.clearWatch(watchId);
		divnone('inside');//◆watchPosition gif非表示
		divnone('mylocation');//◆mylocation非表示
		}
	});
}
 
//◆現在地座標表示
function showCurrentLocation(position)
{
	document.getElementById("mylocation").innerHTML = "Lat:" + position.coords.latitude.toFixed(7) + " , Lng:" + position.coords.longitude.toFixed(7) ;
}
 
function showDetecting()
{
	document.getElementById("detecting").innerHTML = "GPS測定中。お待ち下さい。" ;
}

function handleNoGeolocation(errorFlag)
{
	if (errorFlag == true)
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	else
	{
	initialLocation = tokyo;
	contentString = "位置を特定できません。サポートされていないブラウザです。東京都庁を表示します。";
	}
	map.setCenter(initialLocation);
	geowindow  .setContent(contentString);
	geowindow  .setPosition(initialLocation);
	geowindow  .open(map);
}
 
//div表示の切換え
function divblock(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'block';
}  
 
//div非表示の切換え
function divnone(id)
{
	var ele = document.getElementById(id);
	ele.style.display = 'none';  
}

      google.maps.event.addDomListener(window, 'load', initialize);

//]]>
</script>

 

body

    <body>
    <div id="blue_dot">
    <div id="getlocation">
                <div class="toolbar">
                    <h1>現在地アイコン</h1>
                <a class="button flip" id="infoButton" href="#about">設定</a>
                <a class="button leftButton" target="_webapp" href="../main/index.html#home">Home</a>
                </div>
            <input type="button" value="現在位置を追跡" onclick="startLocationTracking()" style="width : 100%;" />
            <div id="mylocation" align="center" style="color : white;">
            </div>
            <div id="detecting" align="center" style="color : white;">
            </div>
            <div id="map_canvas" >
            </div>
            <div id="inside"><img src="http://waox.main.jp/maps/gif/Earth-06-june.gif" width="30" height="30" border="0"></div>
            </div>
 
        </div>
 
        <div id="about">
            <div class="toolbar">
                    <h1>地図の説明</h1>
            <a class="button flip" id="infoButton" href="#blue_dot">Back</a>
        </div>
            <div style="font-size: 1.0em; text-align: left; margin: 20px 20px 160px; font-family: Marker felt;">
            <p style="color : white;"><b style="margin-bottom : 10px;">Google Map Icons</b></p>
            <p style="color : white;">Webkitによるcss装飾</p>
            <a style="margin:30px 10px;color:rgba(0,0,0,.9)" href="#blue_dot" class="whiteButton goback">Back</a>
    </div>
    </div>
    </body>

 

◆Google Maps JavaScript API V3　デモサンプル

 

 

◆参照先

 

 

◆Google Maps JavaScript API V3

 

 

関連記事一覧

スポンサードリンク

関連記事一覧

  1. ユーザの現在座標位置を収得する方法とは？／Geolocation + iPhone（アイフォン）+Google Maps API v3
  2. iPhone（アイフォン）でのユーザの現在座標位置を地図に表示する地理位置座標サービス（Geolocation）のGoogle Mapでの使い方とは？／watchPosition+clearWatchの切り替え方法
  3. Apple iPhone（アイフォン）で正確な地理的座標位置を取得するメソッドの比較。／Googel Maps API v3 Geolocation　
  4. 地理位置情報サービス Geolocation API をサポートしているブラウザ一覧
  5. Google Map現在地アイコン／レーダのようにパルス発信するアニメーション
Related Posts
geolocation, Google Maps API v3, iPhone（アイフォン）用WordPress用プラグイン, , , , , ,

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">