מיקום גיאוגרפי: הצגת המיקום של המשתמש או המכשיר במפות Google

סקירה כללית

במדריך הזה מוסבר איך להציג את המיקום הגיאוגרפי של מכשיר במפה של Google, באמצעות התכונה HTML5 Geolocation בדפדפן בשילוב עם Maps JavaScript API. המיקום הגיאוגרפית יוצג רק אם המשתמש אישר שיתוף מיקום.

כשהמשתמש מפעיל את הבקשה למיקום גיאוגרפי, הוא מקבל מהדפדפן בקשה לאשר גישה לנתוני המיקום של המכשיר. אם הבקשה נכשלת, יכול להיות שהסיבה לכך היא שהרשאות המיקום נדחו או שהמכשיר לא הצליח לקבוע את המיקום שלו. התכונה הזו זמינה רק בהקשרים מאובטחים (HTTPS), בחלק מהדפדפנים התומכים או בכל הדפדפנים התומכים.

בהמשך מופיעה מפה שבה אפשר לזהות את המיקום הנוכחי של המכשיר של המשתמש.

בדוגמה הבאה מוצג הקוד המלא שדרוש כדי ליצור את המפה הזו.

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
להצגת דוגמה

ניסיון של דוגמה

מהו מיקום גיאוגרפי?

זיהוי מיקום גיאוגרפי מתייחס לזיהוי המיקום הגיאוגרפי של מכשיר מחשוב באמצעות מגוון מנגנונים לאיסוף נתונים. בדרך כלל, רוב שירותי המיקום הגיאוגרפי משתמשים בכתובות ניתוב של רשתות או בצ'יפים פנימיים של GPS כדי לקבוע את המיקום הזה. מיקום גיאוגרפי הוא ממשק API ספציפי למכשיר. המשמעות היא שדפדפנים או מכשירים חייבים לתמוך במיקום גיאוגרפי כדי שאפשר יהיה להשתמש בו דרך אפליקציות אינטרנט.

תקן W3C למיקום גיאוגרפי

אפליקציות שרוצות לבצע איתור גיאוגרפי חייבות לתמוך בתקן W3C לאיתור גיאוגרפי. שימו לב שקוד לדוגמה שלמעלה קובע את המיקום של המכשיר באמצעות ה-API navigator.geolocation של W3C.

לפעמים אתרים משתמשים בכתובות IP כדי לזהות את המיקום של מכשיר, אבל יכול להיות שהם יספק רק הערכה גסה של המיקום. ממשקי ה-API שמוגדרים בתקן W3C הם הכי מדויקים ומקבלים את התמיכה המלאה ביותר, ולכן צריך לתת להם עדיפות על פני שיטות אחרות למיקום גיאוגרפי.