html5 지오로케이션 적용하기

html5 geolocation 적용 

<script src="https://maps.googleapis.com/maps/api/js?key=발급받은 키값"></script>

<article>

  <p> <span id="status"></span></p>

</article>

    function success(position) {

        var s = document.querySelector('#status');

        if (s.className == 'success') {

             return;

        }

        s.innerHTML = "";

        s.className = 'success';

        var mapcanvas = document.createElement('div');

        mapcanvas.id = 'mapcanvas';

        mapcanvas.style.height = '700px';

        mapcanvas.style.width = '960px';

        mapcanvas.style.float = 'left';

        document.querySelector('article').appendChild(mapcanvas);

 

        var lattt = position.coords.latitude;

        var longg = position.coords.longitude;

  

        var latitude  = $("#lat").val();   // 위도

        var longitude = $("#long").val();  // 경도

        var get_lating =  new google.maps.LatLng(latitude, longitude);

 

        var myOptions = {

            zoom: 15,

            center: get_lating,

            mapTypeControl: false,

            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

            mapTypeId: google.maps.MapTypeId.ROADMAP

        };

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

        console.log("===="+position.coords.accuracy);

        var marker = new google.maps.Marker({

            position: get_lating,

            map: map,

            title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"

        });

    }

    function error(msg) {

        var s = document.querySelector('#status');

        s.innerHTML = typeof msg == 'string' ? msg : "failed";

        s.className = 'fail'; 

    }

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(success, error);

    } else {

        error('not supported');

    }

 // 그리고 검색해서 나온 사람들의 위치를 가져올때. // 검색은 서버 프로그래핑으로 구현 하고 // 출력된 결과물에서