密かな目標アプリ

日常

こんなネットで「密かな」とか言っちゃってる時点でもうね。


俺用に「現在位置から近くの牛丼屋とラーメン屋で表示できるWebベースアプリ」を細々準備している。
どうせ巷に転がってるようなものなので、別に新しいものを作ろうとかではないが、
HTML5とAjaxとGoogleMapsAPIの勉強がてら、少しづつ地味にやっていこう。
まぁ、そもそもスマホ持ってないから、作っても使い物にならないわけだが。


で、とりあえず現在位置をGoogleMapで表示してみた（つもりになっている）のがこれ。
例外処理は適当。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
    $(function() {
        var watchID;
        if (navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(
                function (position) {
                    // 現在地座標の生成
                    var latLng = new google.maps.LatLng(
                        position.coords.latitude, position.coords.longitude);

                    // 地図の生成
                    var options = {
                        zoom : 15,
                        center : latLng,
                        mapTypeId : google.maps.MapTypeId.ROADMAP
                    }
                    var map = new google.maps.Map(document.getElementById("map"), options);

                    // マーカーの生成
                    var marker = new google.maps.Marker({
                        position : latLng,
                        map : map,
                        title : "現在地"
                    });
                },
                function (error) {
                    $("#map").html(error.message);
                },
                { enableHighAccuracy : true }
            );
        } else {
            $("#map").text("このブラウザでは表示できません");
        }

        $(window).unload(function() {
            navigator.geolocation.clearWatch(watchID);
            GUnload();
        });
    });
// -->
</script>
</head>
<body>
<div id="map" style="width:500px; height:300px;"></div>
</body>
</html>

GeolocationAPIで現在位置を取って、GoogleMapsのセンターとマーカーに設定しているだけ。
一応、watchPositionで位置情報の変更をウォッチしている（つもり）。


http://code.google.com/intl/ja/apis/maps/articles/phpsqlajax_v3.html
あとは↑この辺を応用してやってみようと思うが、
店のデータは手打ちで、それをジオコーディングする感じになるのかなぁ。