30 Nisan 2025 - 13:39
Geolocation API Örnek Görseli
HTML5 & CSS3

Geolocation API Örnek

Yorumlar

HTML5 ile gelen özelliklerden Geolocation API kullanımına ait örnek kodu sizlere sunuyorum. Örnekle ziyaretçilere o anda bulunduğu konum bilgisini haritada gösterebilirsiniz.

Güle güle kullanın.

GENEL
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Bulunduğum Yer</title>
<style>
#haritam { height: 800px; width: 1500px; }
</style>
<script src='https://maps.google.com/maps/api/js?sensor=false&key=APIKODUNUZ'></script>
<script>
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showCurrentLocation);
} else {
  alert('Geolocation API DESTEKLENMIYOR');
}

function showCurrentLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var coords = new google.maps.LatLng(latitude, longitude);
  var mapOptions = {
    zoom: 20,
    center: coords,
    mapTypeControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('haritam'), mapOptions);
  var marker = new google.maps.Marker({
    position: coords,
    map: map,
    title: 'BULUNDUĞUM YER'
  });
}
</script>
</head>
<body>
<div id='haritam'></div>
</body>
</html>

Benzer Yazılar

Yorumlar ()

Henüz yorum yok. İlk yorum yapan sen ol!

Yorum Yap