Güncel
Loading...

Sadece HTML5 ve JavaScript ile Konum Bulma , Google Maps Javascript API

        Merhaba bu yazımda HTML 5 Geolocation API'den bahsedeceğim. Aslında bu konuya giriş sebebim browserde çalışabilecek konum tabanlı bir uygulama yazmaktı , yani her browserde çalışabilecek birşey, Android,iOS,WP bilmeden insanlara ulaşabilmek :)

Oldukça ilginizi çekeceğimi düşündüğüm bu konunun final kodunu buradan elde edebilirsiniz.

Evet senaryodan bahsedelim, kullanıcı sayfayı açar bu bizim için index3.html :) ve konumu haritada bir etiketle işratlenir ve alttada enlem boylam bilgileri vs. yazar.Kullanıcı hareket ettikçe haritada konumunu gösteren etikette canlı olarak kullanıcıyı  takip eder, Yani GPS tracking...

 Bu sayfada harita ihitiyacımız olduğu için Google Maps Javascript API 'yi de kullanacağız.Bunun için   Google Maps Developer Dökümanının inceleyip Google Developer Consoldan bir API key alabilirsiniz. Bu API key i aldıktan sonra servis çağrılarını yapabilirsiniz.



     Şimdi ilk olarak html dosyamızı oluşturmaya başlayalım ben javascript metodlarını  ve css leri  html ile içine yazacağım isterseniz siz ayrı oluşturup html sayfada de head tagı içinde çağırabilirsizniz.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>HTML5Geolocation Sample</title>
 
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsGjCZ7iNKM1ZdNMMZA9iUPUzB6-pi-LY&sensor=true">
</script>
 
  <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
  <script src="jquery-1.7.2.min.js"></script>
  <script src="jquery.mobile-1.2.0.min.js"></script>

</script>

    <style>
      #informationtable {
        border: 3px double black;
        padding: 10px;
        margin: 10px 0;
      }
     
      p {
        color: #222;
        font: 14px Arial;
      }
     
      span {
        color: #00C;
      }
    </style>

</head>

html  yukarıda görüldüğü gibi şimdilik head tagında  gerekli olan .js leri ve css leri referans aldık , harita kullanacağımız için maps.googleapis.com ile ilgili scripti de ekledik.

#informationtable style 'ında ise start position current position ve distance yazılarının stilllerini belirledik.

Şimdi Body tagını oluşturalım.


    <body>
       <div data-role="page" id="pageL" style="width:100%; height:100%; position:relative;">
          <div data-theme="b" data-role="header">
              <a data-role="button" href="index.html" class="ui-btn-left">
                  Back
              </a>
              <h3>
                  My location
              </h3>
          </div>
          <div data-role="content" style="width:100%; height:100%; padding:0; position:absolute;">
                <div id="map-canvas" style="width:100%; height:50%;"></div>
    <div id="informationtable">
      <p>
        Starting Location (lat, lon):<br/>
        <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
      </p>
      <p>
        Current Location (lat, lon):<br/>
        <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
      </p>
      <p>
        Distance from starting location:<br/>
        <span id="distance">0</span> km
      </p>
    </div>
          </div>
               
      </div>
             
             
    </body>
</html>


Body tagından de anlaşılacağı gibi harita map-canvas idli div de yer alacak, stilini oluşturduğumuz başlangıç konumu, mevcut  konum(current location-GPS in güncelleyeceği konum) ve uzaklık alanları var.

Şimdi işlevi gerçekleştirecek olan javascritp metodlarını yazalım.Öncelikle bu scriptlerin hepsi head tagında olmalı ve GPS 'den devamlı güncel datayı alabilmek için ana metodumuz belirli aralıklarla çağırılmalı merak etmeyin navigator.geolocation.watchPosition metodunun options kısmına bu süreyi set edebiliyoruz.


   <script type="text/javascript">
           jQuery(document).ready(function () {
               HelloWorld();
               alert('You are here.');
           });

   </script>




Eğer GPS tracking istemiyorsanız sadece geçerli konumu almak için aşagıdaki metodu kullanıyoruz.

<script type="text/javascript" >
    function HelloWorld() {
        var id, target, options;


        var startPos;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                startPos = position;
                document.getElementById("startLat").innerHTML = startPos.coords.latitude;
                document.getElementById("startLon").innerHTML = startPos.coords.longitude;
            }, function (error) {
                alert("Error occurred. Error code: " + error.code);
                // error.code can be:
                //   0: unknown error
                //   1: permission denied
                //   2: position unavailable (error response from locaton provider)
                //   3: timed out
            });

}


</script>

Biz bu datayı srat position için kullanacağız yani sayfa açılışında bir kez çaığırılıp başlanğıç pozisyonumuzu setleyecek. Şimdi ise gerçek zamanlı GPS tracking için watcher metodunun nasıl kullanılacağını görelim.



<script type="text/javascript" >
    function HelloWorld() {
        var id, target, options;


        var startPos;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                startPos = position;
                document.getElementById("startLat").innerHTML = startPos.coords.latitude;
                document.getElementById("startLon").innerHTML = startPos.coords.longitude;
            }, function (error) {
                alert("Error occurred. Error code: " + error.code);
                // error.code can be:
                //   0: unknown error
                //   1: permission denied
                //   2: position unavailable (error response from locaton provider)
                //   3: timed out
            });


            target = {
                latitude: 0,
                longitude: 0,
            }

            options = {
                enableHighAccuracy: false,
                timeout: 5000,
                maximumAge: 0
            };

            id = navigator.geolocation.watchPosition(success, error, options);
        }


       
    }



</script>

 GPS güncelleme zamanını 5 sn olarak seçtik bu süre içinde sayfanın refresh olduğunu da görebilirsiniz. watchPosition metodunun sucess ve error metodlarını yazalım. Success metodunda haritaya bir etiket koymasını ve current position labeline de yazmasını istiyoruz.  Error metodunu ise kısa tutup veya istediğiniz şekilde kişiselleştirebilirsiniz.Son olarak en alta da uzaklığı hesap edebilecek calculateDistance fonksiyonunu yazıyoruz.


<script type="text/javascript" >
    function HelloWorld() {
        var id, target, options;


        var startPos;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                startPos = position;
                document.getElementById("startLat").innerHTML = startPos.coords.latitude;
                document.getElementById("startLon").innerHTML = startPos.coords.longitude;
            }, function (error) {
                alert("Error occurred. Error code: " + error.code);
                // error.code can be:
                //   0: unknown error
                //   1: permission denied
                //   2: position unavailable (error response from locaton provider)
                //   3: timed out
            });

            function success(pos) {
                var crd = pos.coords;

                /* if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
                   console.log('Congratulations, you reached the target');
                   navigator.geolocation.clearWatch(id);
                 }*/
                var myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
                var mapOptions = {
                    zoom: 15,
                    center: myLatlng
                }
                var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    title: "Hello World!"
                });

                // To add the marker to the map, call setMap();
                marker.setMap(map);

                document.getElementById("currentLat").innerHTML = pos.coords.latitude;
                document.getElementById("currentLon").innerHTML = pos.coords.longitude;
                document.getElementById("distance").innerHTML =
                  calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
                                    pos.coords.latitude, pos.coords.longitude);

            };

            function error(err) {
                console.warn('ERROR(' + err.code + '): ' + err.message);
            };

            target = {
                latitude: 0,
                longitude: 0,
            }

            options = {
                enableHighAccuracy: false,
                timeout: 5000,
                maximumAge: 0
            };

            id = navigator.geolocation.watchPosition(success, error, options);
        }


    }


</script>





Google Maps Javascript ile haritaya label(etiket eklemek), çizgi çizmek servise istekler yapmak vb. daha bir çok işlevi google dökümanından ulaşabilirsiniz. Ceptelefonunuzdan  hazrıladığınız bu sayfayı test ettiğinizde bahsettiğimz senaryonun gerçekten yaşayabilirsiniz :) ve çok daha detaylı konum bilgisi elde edersiniz.PC 'den gelen konum verisi çok detaylı olmayabiliyor.

Final projeyi buradan indirebilirsiniz.

Lütfen projenin doğru çalışması için mevcut olan API Key'i kullanmayın buradan kendi adınıza bir tane API KEY alın. 




Share on Google Plus

About Sema KUDU

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

3 yorum :

  1. Merhaba sunucuda hata veriyor . Error "1"

    YanıtlaSil
  2. Merhaba, Bu yazımda paylaştığım örnek için Google Map'den ben API KEy aldım, sizinde kendi projeniz için bir API key almanız gerekiyor. Mutemelen aldığınız hata bu yüzdendir. Google Maps Javascript API Kodlarına buradan ulaşabilirsiniz : https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcode

    Kolay gelsin.

    YanıtlaSil

Türkiye yenilmez,Millet Eğilmez!