Google Maps Rakım Ölçer
Google Maps Rakım Ölçer, Google Maps API’sini kullanarak belirli bir konumun deniz seviyesine göre yüksekliğini ölçen bir araçtır. Bu araç, JavaScript kodu kullanarak Google Maps API’si aracılığıyla bir harita ve bir işaretçi oluşturur. Kullanıcı işaretçiyi belirli bir konuma sürükleyebilir ve yükseklik verileri Google Elevation API’ye gönderilerek alınır.
Bu örneği oluşturmak için öncelikle bir Google Maps API anahtarı gerekiyor. Bu anahtar, Google Haritalar Platformu’ndan edinilebilir. Daha sonra, aşağıdaki adımları izleyebilirsiniz:
- İlk olarak, bir HTML dosyası oluşturun ve Google Maps API’yi yüklemek için aşağıdaki kodu ekleyin:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>Not: Yukarıdaki API_KEY değeri, Google Haritalar Platformu’ndan elde ettiğiniz API anahtarı olacak.
HTML dosyanıza aşağıdaki JavaScript kodunu ekleyerek harita ve işaretçi oluşturalım
var map;
var marker;
var elevationService;
var infowindow;
function initMap() {
// Harita oluştur
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.9334, lng: 32.8597}, // Ankara koordinatları
zoom: 8
});
// Pin oluştur
marker = new google.maps.Marker({
position: {lat: 39.9334, lng: 32.8597}, // Ankara koordinatları
map: map,
draggable: true
});
// Elevation Service oluştur
elevationService = new google.maps.ElevationService();
// InfoWindow oluştur
infowindow = new google.maps.InfoWindow();
// Pin konum değişikliği dinle
marker.addListener('dragend', function() {
// Pin konumu
var position = marker.getPosition();
// Elevation Service kullanarak yükseklik verisini al
elevationService.getElevationForLocations({
locations: [position]
}, function(results, status) {
if (status === 'OK' && results[0]) {
// Yükseklik verisi başarılı şekilde alındı
var elevation = results[0].elevation.toFixed(2) + " metre";
infowindow.setContent("Deniz seviyesinden yükseklik: " + elevation);
infowindow.open(map, marker);
} else {
// Yükseklik verisi alınamadı
infowindow.setContent("Deniz seviyesinden yükseklik: Bilinmiyor");
infowindow.open(map, marker);
}
});
});
}Son olarak, HTML dosyanıza aşağıdaki kodu ekleyerek sayfayı bitirelim.
<body onload="initMap()">
<div id="map" style="height: 400px; width: 100%;"></div>
</body>Aşağıdaki hazır dosyayı sitenize ekleyip google maps api key ile sizde kullanabilirsiniz.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Google Maps API Örneği</title>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script>
var map;
var marker;
var elevationService;
var infowindow;
function initMap() {
// Harita oluştur
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.9334, lng: 32.8597}, // Ankara koordinatları
zoom: 8
});
// Pin oluştur
marker = new google.maps.Marker({
position: {lat: 39.9334, lng: 32.8597}, // Ankara koordinatları
map: map,
draggable: true
});
// Elevation Service oluştur
elevationService = new google.maps.ElevationService();
// InfoWindow oluştur
infowindow = new google.maps.InfoWindow();
// Pin konum değişikliği dinle
marker.addListener('dragend', function() {
// Pin konumu
var position = marker.getPosition();
// Elevation Service kullanarak yükseklik verisini al
elevationService.getElevationForLocations({
locations: [position]
}, function(results, status) {
if (status === 'OK' && results[0]) {
// Yükseklik verisi başarılı şekilde alındı
var elevation = results[0].elevation.toFixed(2) + " metre";
infowindow.setContent("Deniz seviyesinden yükseklik: " + elevation);
infowindow.open(map, marker);
} else {
// Yükseklik verisi alınamadı
infowindow.setContent("Deniz seviyesinden yükseklik: Bilinmiyor");
infowindow.open(map, marker);
}
});
});
}
</script>
</head>
<body onload="initMap()">
<div id="map" style="height: 400px; width: 100%;"></div>
</body>
</html>Google Maps rakım ölçer ilginizi çektiyse burdan buyrun -> Konum ve Adres Bulucu
Related Posts
About The Author
