Coğrafi Konum: Haritalar'da Kullanıcının veya Cihazın Konumunu Görüntüleme

Genel bakış

Bu eğitim, tarayıcınızın HTML5 Coğrafi Konum özelliğini Maps JavaScript API ile birlikte kullanarak bir cihazın coğrafi konumunu Google haritasında nasıl görüntüleyeceğinizi gösterir. Coğrafi konum yalnızca kullanıcı, konum paylaşımına izin verdiyse görüntülenir.

Kullanıcı coğrafi konum isteğini tetiklediğinde tarayıcıdan, cihazın konum verilerine erişme izni vermesi için bir istem alır. İstek başarısız olursa bunun nedeni konum izinlerinin reddedilmiş olması veya cihazın konumunu belirleyememesi olabilir. Bu özellik, destekleyen tarayıcıların bazılarında veya tümünde yalnızca güvenli bağlamlarda (HTTPS) kullanılabilir.

Aşağıda, kullanıcının cihazının mevcut konumunu belirleyebilen bir harita verilmiştir.

Aşağıdaki örnekte, bu haritayı oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);

  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position: GeolocationPosition) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter()!);
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter()!);
    }
  });
}

function handleLocationError(
  browserHasGeolocation: boolean,
  infoWindow: google.maps.InfoWindow,
  pos: google.maps.LatLng
) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation."
  );
  infoWindow.open(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 6,
  });
  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");

  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        },
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(
    browserHasGeolocation
      ? "Error: The Geolocation service failed."
      : "Error: Your browser doesn't support geolocation.",
  );
  infoWindow.open(map);
}

window.initMap = initMap;
index.js

Coğrafi Konum nedir?

Coğrafi konum, çeşitli veri toplama mekanizmaları kullanılarak bir bilgi işlem cihazının coğrafi konumunun belirlenmesini ifade eder. Genellikle coğrafi konum hizmetleri, bu konumu belirlemek için ağ yönlendirme adreslerini veya dahili GPS çiplerini kullanır. Coğrafi konum, cihaza özel bir API'dir. Yani tarayıcı veya cihazların, coğrafi konumu web uygulamaları üzerinden kullanabilmek için desteklemesi gerekir.

W3C Coğrafi konum standardı

Coğrafi konum bilgisi uygulamak isteyen uygulamalar W3C Coğrafi Konum standardını desteklemelidir. Yukarıdaki örnek kodun, cihazın konumunu W3C navigator.geolocation API aracılığıyla belirlediğine dikkat edin.

Bazen web siteleri bir cihazın konumunu algılamak için IP adreslerini kullanır. Ancak bu, söz konusu konumla ilgili yalnızca kaba bir tahmin sağlayabilir. W3C standardı API'ler, en tam olarak desteklenen ve en doğrudur. Bu nedenle, diğer coğrafi konum yöntemlerine göre öncelikli olmalıdır.