ウェブ学のすすめ

Study of Web Design & Programing

取得した位置情報を地図に表示

API

プレビュー


↓別ウィンドウを開いて見る
取得した位置情報を地図に表示 - js do it

↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格： 無料

ポイント

watchPositionメソッド

位置を定期的に取得する

navigator.geolocation.watchPosition( successCallback , errorCallback , option)
緯度・経度の取得
  • 緯度
coords.latitude
  • 経度
coords.longitude

コード

HTML
<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>
    </head>
    <body style="margin:0;padding:0;">
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </body>
</html>
JavaScript
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
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    }
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        draggable: true,
        title: ""
    });
}

function errorFunc(e){
    switch(e.code){
        case 1:
            gps.innerHTML = "エラー：GPSの利用が許可されていません。GPSを使えるように設定してください。";
            break;
        case 2:
            gps.innerHTML = "エラー：位置情報が取得できませんでした。";
            break;
        case 3:
            gps.innerHTML = "エラー：タイムアウトしました。";
            break;
        default:
            gps.innerHTML = "エラー：位置情報を表示できませんでした。";
            break;
    }
}
navigator.geolocation.watchPosition(successFunc,errorFunc);