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:

  1. İ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

Add a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir