WordPressにGoogle Maps API V3！

◆Google Maps JavaScript API V3　+　Geolocation　（現在位置の座標情報を取得する）

iPhone（アイフォン）で地図が見れるようになりましたので、出かけたときに自分の位置をGPS情報から収得したいでうすよね。さて、どうすればいい？ いつものように、Google Maps JavaScript API V3のトップページからスタート。Google Maps JavaScript API V3 – 基本ページに、ユーザーの現在地の検出（Geolocation）について説明があり、下記のような内容。

• iPhone（アイフォン）で位置情報を収得するのは、Google Maps API では無い。
• iPhone（アイフォン）のブラウザsafariがサポートしている”W3C Geolocation 規格”の”Geolocation” を用いる。
• ”W3C Geolocation 規格”で位置を収得できない場合、Google Gears Geolocationを使う方法がある。

このページにあるサンプルコードをみると

// Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); });

とあり、navigator.geolocation.getCurrentPositionの部分にポイントがあるのかな？ ちなみに、このページの”例を表示（map-geolocation.html）”をGoogle Chormeで試したらエラーでした。未サポートブラウザ？ Gears追加したはずだが・・・・。safariでは、概略位置を表示しました。 次に、試しにiPhone（アイフォン）で読み込んだら数百ｍの誤差で表示されました。えーーー。これじゃ精度悪すぎるじゃん。・・・と思って、何度か歩き回りながら読み込むと・・・今度はなかなかの座標精度。 なんで？？ navigator.geolocation.getCurrentPositionについて調べているうちにいろいろ理解できました。・・・・・・・・正確な座標の収得についての記事はコチラ

◆Google Map V3 + Geolocation サンプル（現在位置座標サンプル）

さて、本題のユーザ現在位置を地図に取り込むのですが、非常に難しいかと考えていたら、Google先生の基本ページのユーザーの現在地の検出についてページに十分なソースがありますので助かります。うんで・・・これをそのまま利用させて頂きます。 Google Gears Geolocation用のScriptを忘れないように。

<script type=”text/javascript” src=”http://code.google.com/apis/gears/gears_init.js“></script>

位置センサーをtureとするのを忘れずに

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true“></script>

下記サンプル地図は、過去に作成しておいたV3 Maps　Markerclusterer+xml(php)に挿入しただけ。iPhone（アイフォン）、Android（アンドロイド）用の場合、必ず記述しておきたいソースですね。 navigator.geolocation.getCurrentPosition（） と  navigator.geolocation.watchPosition() をそれぞれ使用した地図を作成し、ちょいといじって、初期表示のインフォウインドウにを相互のリンクを貼り付けて地図を切り替えられるようにしてあります。 Google Maps API V3の地図を既に作成している方なら至極簡単です。お試しあれ。 PC用の地図の場合、かならず初期表示を指定しますので、このソースのinfowindowを削除し、初期座標＝エラー座標にしておく手もありますな。

<!--ここからGoogle Maps API v3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--gears geolocation-->
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">
　//◆個別に指定する初期表示の設定
    var zoom = 12;

    var mapTypeId = google.maps.MapTypeId.ROADMAP //通常のデフォルト
    //var mapTypeId = google.maps.MapTypeId.SATELLITE //航空写真タイル
    //var mapTypeId = google.maps.MapTypeId.HYBRID //航空写真タイルと主要な機能（道路、地名）のタイル レイヤの組み合わせ
    //var mapTypeId = google.maps.MapTypeId.TERRAIN //起伏を示すタイル（高度や水系）
</script>
<script type="text/javascript">
//<![CDATA[
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();

function initialize()
{
	var myOptions =
	{

	disableDefaultUI: false,//◆API のデフォルトの UI 設定をオフ(無効)にしたい場合は”true”

	//◆ナビゲーションコントロール
	navigationControl: true,
	navigationControlOptions:
	{
	//◆通常 ズームコントロール
	style: google.maps.NavigationControlStyle.DEFAULT,
	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
	},

	zoom: zoom,
	mapTypeId: mapTypeId
	};

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

      //◆座標収得
　　if(navigator.geolocation)
　　{
　　browserSupportFlag = true;
　　　　navigator.geolocation.watchPosition(function(position)
　　　　{
　　　　initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
　　　　map.setCenter(initialLocation);
　　　　//var geocurrent1 = 'あなたの現在地' ;
　　　　//geowindow  .setContent(geocurrent1);
　　　　//geowindow  .setPosition(initialLocation);
　　　　//geowindow  .open(map);
　　　　},
　　　　function()
　　　　{
　　　　handleNoGeolocation(browserSupportFlag);
　　　　});
　　}
　　else if (google.gears)
　　{
　　browserSupportFlag = true;
　　var geo = google.gears.factory.create('beta.geolocation');
　　geo.watchPosition(function(position)
　　　　{
　　　　initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
  　　    map.setCenter(initialLocation);
  　　    //var geocurrent2 = 'あなたの現在地' ;
　　　　　//geowindow  .setContent(geocurrent2);
  　　    //geowindow  .setPosition(initialLocation);
  　　    //geowindow  .open(map);
　　　　},
　　　　function()
　　　　{
　　　　handleNoGeolocation(browserSupportFlag);
　　　　});
　　}
　　else
　　{
   　 // Browser doesn't support Geolocation
　　browserSupportFlag = false;
　　handleNoGeolocation(browserSupportFlag);
　　}
}

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);
}

window.onload=initialize;//◆
//]]>

</script>

2012/05　新しい記事「Google Map現在地アイコン／レーダのようにパルス発信するアニメーション」を追記しました。コチラも参考にされてください。なお、Wi-Fi接続で現在位置収得が出来ない？場合があったので、メッセージで対策。 

◆Google Maps API V3　+　GeoLoactionサンプルデモ

実践的なwatchPosition+clearWatchの記事はコチﾗ

• GeoLocation標準地図
• getCurrentPosition　- ユーザの現在座標位置を収得する地図サンプル
• getCurrentPosition　- iPhone（アイフォン）用
• watchPosition　- ユーザの現在座標位置を収得する地図サンプル
• watchPosition　- iPhone（アイフォン）用
• 現在地の追跡ボタン＋追跡停止（watchPosition+clearWatch）

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク