Coğrafi Konum: Kullanıcı veya Cihaz Konumunu Haritalar'da Gösterme

Genel Bakış

Bu eğitimde, tarayıcınızın HTML5 Coğrafi Konum özelliğiyle birlikte Maps JavaScript API'yi kullanarak bir cihazın coğrafi konumunu Google haritasında nasıl görüntüleyeceğiniz gösterilmektedir. Coğrafi konum yalnızca kullanıcı konum paylaşımına izin verdiyse gösterilir.

Kullanıcı coğrafi konum isteğini tetiklediğinde tarayıcıdan cihazın konum verilerine erişme izni istenir. İstek başarısız olursa bunun nedeni konum izinlerinin reddedilmesinden veya cihazın konumunu belirleyememesinden kaynaklanabilir. Bu özellik, yalnızca destekleyen tarayıcıların bazılarında veya tümünde güvenli bağlamlarda (HTTPS) kullanılabilir.

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

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

TypeScript

// 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

JavaScript

// 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
Örneği görüntüleyin

Örneği Deneyin

Coğrafi konum nedir?

Coğrafi konum, çeşitli veri toplama mekanizmaları kullanılarak bir bilgisayar cihazının coğrafi konumunun belirlenmesini ifade eder. Genellikle çoğu coğrafi konumlandırma hizmeti, bu konumu belirlemek için ağ yönlendirme adreslerini veya dahili GPS çiplerini kullanır. Coğrafi Konum API'si, cihaza özgü bir API'dir. Bu, web uygulamaları üzerinden kullanılabilmesi için tarayıcıların veya cihazların coğrafi konumu desteklemesi gerektiği anlamına gelir.

W3C Coğrafi Konum standardı

Coğrafi konum belirleme yapmak isteyen uygulamalar W3C Coğrafi Konum Belirleme standardını desteklemelidir. Yukarıdaki örnek kodda, cihazın konumunun W3C navigator.geolocation API aracılığıyla belirlendiğine dikkat edin.

Web siteleri bazen bir cihazın konumunu tespit etmek için IP adreslerini kullanır ancak bu yöntem, konumla ilgili yalnızca kaba bir tahmin sağlayabilir. W3C standardı API'ler en iyi şekilde desteklenen ve en doğru API'ler olduğundan diğer coğrafi konumlandırma yöntemlerine göre önceliklendirilmelidir.