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

Genel bakış

Bu eğiticide, Maps JavaScript API ile birlikte tarayıcınızın HTML5 Coğrafi Konum özelliği kullanılarak bir cihazın coğrafi konumunun bir Google haritasında nasıl görüntüleneceği gösterilmektedir. 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şim izni vermesi için bir istem alır. İsteğin başarısız olması, konum izinlerinin reddedilmiş olması veya cihazın konumunu belirleyememesi olabilir. Bu özellik, yalnızca güvenli bağlamlarda (HTTPS), destekleyen tarayıcıların bazılarında veya tümünde kullanılabilir.

Aşağıda, kullanıcının cihazının mevcut konumunu tespit edebilen bir harita bulunmaktadır.

Aşağıdaki örnekte, bu haritayı oluşturmak için ihtiyaç duyduğunuz 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 bilgi işlem cihazının coğrafi konumunun belirlenmesini ifade eder. Genellikle coğrafi konum hizmetlerinin çoğu bu konumu belirlemek için ağ yönlendirme adreslerini veya dahili GPS çiplerini kullanır. Coğrafi Konum, cihaza özgü bir API'dir. Bu, tarayıcıların veya cihazların web uygulamaları aracılığıyla coğrafi konumu kullanabilmesi için coğrafi konumu desteklemesi gerektiği anlamına gelir.

W3C Coğrafi Konum standardı

Coğrafi konum belirlemek isteyen uygulamalar W3C Coğrafi Konum standardını desteklemelidir. Yukarıdaki örnek kodun, cihazın konumunu W3C navigator.geolocation API'si üzerinden belirlediğine dikkat edin.

Bazen web siteleri bir cihazın konumunu belirlemek için IP adreslerini kullanır. Ancak bu şekilde, söz konusu konum için yalnızca kaba bir tahmin elde edilebilir. W3C standardı API'ler en tam destekli ve en doğru API'lerdir. Bu nedenle, diğer coğrafi konum yöntemlerine göre öncelikli olmalıdırlar.