You are here : / / JS Konum Almak ve Harita da Göstermek

JS Konum Almak ve Harita da Göstermek

Konum alma , haritada gösterme işlemi


<!-- Buttona basınca konumu alma -->
<button onclick="getLocation()">Check-in</button>

<!-- harita -->
<div id="mapholder"></div>

<!--js kutuphane -->
<script src="https://maps.googleapis.com/maps/api/js?key=buraya google map key kopyalayın"></script>

 <script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Konum almak, bu tarayıcı tarafından desteklenmiyor.";
    }
}

function showPosition(position) {
    //enlem 
    var lat = position.coords.latitude;
     //boylam
    var lon = position.coords.longitude;

     var latlon = new google.maps.LatLng(lat, lon)
    var mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '100%';

     var myOptions = {
    center:latlon,zoom:14,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    mapTypeControl:false,
    navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    }
   
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
//eğer konum alınmasa error mesaj
function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "Kullanıcı, konum talebi reddedildi."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Konum bilgileri kullanılamıyor."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Kullanıcı konumunu elde etme isteği zaman aşımına uğradı."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "Bilinmeyen bir hata oluştu."
            break;
    }
}
</script>

Related Posts

JS Konum Almak ve Harita da Göstermek
4/ 5
Oleh
Pada