iPhone GPS機能と連携
○Geolocation API を利用する
取得した位置情報を連続的に地図に表示する。
マーカーあり。
「navigator」オブジェクトの「geolocation」を利用し、
「watchPosition」メソッドによって連続的に位置情報を取得
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone 位置情報取得</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> //経度緯度用変数を初期化 var latitude = ""; var longitude = ""; //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ //前回の緯度経度情報と比較して、変わっていたら地図を更新 if( (e.coords.latitude != latitude) || (e.coords.longitude != longitude) ){ //緯度を取得 latitude = e.coords.latitude; //経度を取得 longitude = e.coords.longitude; //緯度経度を設定 var myLatLng = new google.maps.LatLng(latitude,longitude); //オプションを設定 var myOptions = { zoom: 16, //縮尺レベル center: myLatLng, //地図の中心位置 mapTypeId: google.maps.MapTypeId.ROADMAP } //地図を生成し、指定したHTMLエレメントに表示 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //「google.maps.Map」で地図を生成し「map_canvas」に表示 } // マーカーの表示 var marker = new google.maps.Marker({ position: myLatLng, map: map, draggable: true, // ドラッグ可能にする title: "" }); } //エラーが起きた場合に呼ばれる関数 function errorFunc(e) { switch (e.code) { case 1: alert("エラー:GPSの利用が許可されていません。GPSを使えるように設定してください。"); break; case 2: alert("エラー:位置情報が取得できませんでした。"); break; case 3: alert("エラー:タイムアウトしました。"); break; default: alert("エラー:位置情報を表示できませんでした。"); break; } } //↓「位置情報」を利用するには、JavaScript内でイベントハンドラを登録する必要あり。 navigator.geolocation.watchPosition(successFunc, errorFunc); //「watchPosition」経度緯度情報を連続的に送ってくる </script> </head> <body style="margin:0px; padding:0px;"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>