פקדים

סקירה כללית של אמצעי הבקרה

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

במפה הבאה מוצגת קבוצת ברירת המחדל של אמצעי הבקרה שמוצגים על ידי Maps JavaScript API:

בכיוון השעון, מהפינה הימנית העליונה: סוג המפה, מסך מלא, מצלמה, Street View, מקשי קיצור.

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

• הפקד Map Type זמין בתפריט נפתח או בסרגל לחצנים אופקי, ומאפשר למשתמש לבחור סוג מפה (ROADMAP,‏ SATELLITE,‏ HYBRID או TERRAIN). הפקד הזה מופיע כברירת מחדל בפינה השמאלית העליונה של המפה.
• פקד המסך המלא מאפשר לפתוח את המפה במצב מסך מלא. אמצעי הבקרה הזה מופעל כברירת מחדל במחשבים ובמכשירים ניידים. הערה: iOS לא תומכת בתכונה של מסך מלא. לכן, פקד המסך המלא לא מוצג במכשירי iOS.
• אמצעי הבקרה של המצלמה כוללים פקדים לשינוי מרחק התצוגה ולהזזה.
• הפקד של Street View מכיל סמל של אטב-איש שאפשר לגרור למפה כדי להפעיל את Street View. כברירת מחדל, הפקד הזה מופיע ליד הפינה השמאלית התחתונה של המפה.
• פקד הסיבוב מספק שילוב של אפשרויות הטיה וסיבוב למפות שמכילות תמונות תלת-ממדיות. הפקד הזה מופיע כברירת מחדל ליד הפינה השמאלית התחתונה של המפה. מידע נוסף זמין במאמר סקירה כללית של תלת-ממד.
• פקד קנה המידה מציג רכיב של קנה מידה במפה. אמצעי הבקרה הזה מושבת כברירת מחדל.
• פקד מקשי הקיצור מציג רשימה של מקשי קיצור לאינטראקציה עם המפה.

אין לכם גישה ישירה לפקדי המפה האלה, ואתם לא יכולים לשנות אותם ישירות. במקום זאת, משנים את השדות MapOptions של המפה, שמשפיעים על החשיפה וההצגה של אמצעי הבקרה. אפשר לשנות את אופן הצגת הפקדים כשיוצרים את המפה (באמצעות MapOptions המתאים) או לשנות מפה באופן דינמי על ידי קריאה ל-setOptions() כדי לשנות את האפשרויות של המפה.

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

ממשק המשתמש שמוגדר כברירת מחדל

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

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

בנוסף, הטיפול במקלדת מופעל כברירת מחדל בכל המכשירים.

השבתת ממשק המשתמש שמוגדר כברירת מחדל

יכול להיות שתרצו להשבית לגמרי את לחצני ממשק המשתמש שמוגדרים כברירת מחדל ב-API. כדי לעשות את זה, מגדירים את המאפיין disableDefaultUI של המפה (בתוך האובייקט MapOptions) לערך true. המאפיין הזה משבית את כל לחצני הבקרה של רכיב אינטראקטיבי מ-Maps JavaScript API. עם זאת, היא לא משפיעה על תנועות העכבר או על מקשי הקיצור במפה הבסיסית, שנשלטים על ידי המאפיינים gestureHandling ו-keyboardShortcuts בהתאמה.

הקוד הבא משבית את הכפתורים בממשק המשתמש:

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.ts

innerMap.setOptions({
    // Disable the default UI.
    disableDefaultUI: true,
});
index.js

הוספת פקדים למפה

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

חלק מהפקדים מופיעים במפה כברירת מחדל, ואחרים יופיעו רק אם תבקשו אותם באופן ספציפי. הוספה או הסרה של פקדים מהמפה מצוינת בשדות הבאים של האובייקט MapOptions. מגדירים אותם כ-true כדי להציג אותם או כ-false כדי להסתיר אותם:

{
  cameraControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

כברירת מחדל, כל הפקדים נעלמים אם המפה קטנה מ-200x200 פיקסלים. אפשר לשנות את ההתנהגות הזו על ידי הגדרה מפורשת של הפקד כך שיהיה גלוי. לדוגמה, בטבלה הבאה מוצג אם אמצעי הבקרה של המצלמה גלוי או לא, על סמך גודל המפה וההגדרה של השדה cameraControl:

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

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.ts

innerMap.setOptions({
    cameraControl: false,
    scaleControl: true,
});
index.js

אפשרויות בקרה

אפשר להגדיר כמה פקדים, לשנות את ההתנהגות שלהם או לשנות את המראה שלהם. לדוגמה, הפקד Map Type יכול להופיע כסרגל אופקי או כתפריט נפתח.

כדי לשנות את אמצעי הבקרה האלה, משנים את שדות האפשרויות המתאימים של אמצעי הבקרה באובייקט MapOptions כשיוצרים את המפה.

לדוגמה, אפשרויות לשינוי הפקד Map Type (סוג המפה) מצוינות בשדה mapTypeControlOptions. הפקד "סוג מפה" יכול להופיע באחת מהאפשרויות הבאות של style:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR מציג את מערך הפקדים כלחצנים בסרגל אופקי, כמו שמוצג במפות Google.
• google.maps.MapTypeControlStyle.DROPDOWN_MENU מציג לחצן בקרה יחיד שמאפשר לבחור את סוג המפה באמצעות תפריט נפתח.
• ‫google.maps.MapTypeControlStyle.DEFAULT מציג את התנהגות ברירת המחדל, שתלויה בגודל המסך ועשויה להשתנות בגרסאות עתידיות של ה-API.

שימו לב: אם אתם משנים את אפשרויות הבקרה, אתם צריכים גם להפעיל את הבקרה באופן מפורש על ידי הגדרת הערך המתאים של MapOptions ל-true. לדוגמה, כדי להגדיר פקד מסוג מפה שיציג את הסגנון DROPDOWN_MENU, משתמשים בקוד הבא בתוך האובייקט MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

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

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.ts

innerMap.setOptions({
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [MapTypeId.ROADMAP, MapTypeId.TERRAIN],
        position: ControlPosition.TOP_CENTER,
    },
});
index.js

בדרך כלל מגדירים את אמצעי הבקרה כשיוצרים את המפה. עם זאת, אפשר לשנות את הצגת הפקדים באופן דינמי על ידי קריאה ל-method‏ setOptions() של Map והעברת אפשרויות פקדים חדשות.

שינוי אמצעי הבקרה

כדי לציין את אופן ההצגה של פקד, צריך להגדיר את השדות באובייקט MapOptions של המפה כשיוצרים אותה. השדות האלה מפורטים בהמשך:

• cameraControl מפעיל/משבית את אמצעי הבקרה של המצלמה שמאפשרים למשתמש לשנות את מרחק התצוגה ולהזיז את המפה. כברירת מחדל, פקד זה מוצג בכל המפות. השדה cameraControlOptions מציין גם את ה-CameraControlOptions שצריך להשתמש בו לאמצעי הבקרה הזה.
• ‫mapTypeControl מפעיל או משבית את הפקד "סוג המפה", שמאפשר למשתמש לעבור בין סוגי מפות (כמו "מפה" ו"לוויין"). כברירת מחדל, הפקד הזה גלוי ומופיע בפינה השמאלית העליונה של המפה. השדה mapTypeControlOptions מציין גם את MapTypeControlOptions שצריך להשתמש בו לאמצעי הבקרה הזה.
• ‫streetViewControl מפעיל או משבית את הפקד של האיש הצהוב, שמאפשר למשתמש להפעיל פנורמה ב-Street View. כברירת מחדל, הפקד הזה גלוי ומופיע ליד הפינה השמאלית התחתונה של המפה. השדה streetViewControlOptions מציין גם את StreetViewControlOptions שצריך להשתמש בו לאמצעי הבקרה הזה.
• rotateControl מפעיל/משבית את ההצגה של פקד סיבוב לשליטה בכיוון של תמונות תלת-ממדיות. כברירת מחדל, הפקד מוצג אם יש תמונות תלת-ממדיות לסוג המפה הנתון ברמת הזום ובמיקום הנוכחיים. אפשר לשנות את ההתנהגות של הפקד על ידי הגדרת rotateControlOptions של המפה כדי לציין את RotateControlOptions שבו רוצים להשתמש. הפקד יופיע רק במפות בסיסיות בתלת-ממד.
• ‫scaleControl מפעיל/משבית את פקד קנה המידה שמספק קנה מידה למפה. כברירת מחדל, אמצעי הבקרה הזה לא מוצג. כשהתכונה מופעלת, היא תמיד תופיע בפינה השמאלית התחתונה של המפה. ‫scaleControlOptions מציין גם את ScaleControlOptions שצריך להשתמש בו לבקרה הזו.
• ‫fullscreenControl מפעיל או משבית את הפקד שפותח את המפה במצב מסך מלא. כברירת מחדל, אמצעי הבקרה הזה מופעל במחשבים ובמכשירי Android. כשהאפשרות מופעלת, אמצעי הבקרה מופיע ליד הפינה השמאלית העליונה של המפה. ‫fullscreenControlOptions מציין גם את FullscreenControlOptions שצריך להשתמש בו לבקרה הזו.

שימו לב שאפשר לציין אפשרויות לאמצעי בקרה שאתם משביתים בהתחלה.

מיקום הפקדים

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

יש שני סוגים של מיקומי פקדים: מיקום מדור קודם ומיקום לוגי. מומלץ להשתמש בערכים לוגיים כדי לתמוך באופן אוטומטי בהקשרים של פריסה משמאל לימין (LTR) ומימין לשמאל (RTL). לעיון במדריך העזר

בטבלאות הבאות מוצגים מיקומי הפקדים הנתמכים בהקשרים של LTR ו-RTL.

לוחצים על התוויות כדי להחליף את מצב המפה בין משמאל לימין (LTR) ומימין לשמאל (RTL).

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

בדוגמה הבאה מוצגת מפה בסיסית שבה כל הפקדים מופעלים, במיקומים שונים.

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.ts

const mapElement = document.querySelector('gmp-map');
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ MapTypeControlStyle }, { ControlPosition }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('core'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set the map's controls options.
    innerMap.setOptions({
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: MapTypeControlStyle.HORIZONTAL_BAR,
            position: ControlPosition.BLOCK_START_INLINE_CENTER,
        },
        zoomControl: true,
        zoomControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_CENTER,
        },
        scaleControl: true,
        streetViewControl: true,
        streetViewControlOptions: {
            position: ControlPosition.INLINE_START_BLOCK_START,
        },
        fullscreenControl: true,
    });
}

void init();
index.js

פקדים בהתאמה אישית

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

כדי ליצור אמצעי בקרה מותאם אישית, צריך להגדיר כמה כללים. עם זאת, ההנחיות הבאות יכולות לשמש כשיטות מומלצות:

• מגדירים CSS מתאים לרכיבי הבקרה שרוצים להציג.
• מטפלים באינטראקציה עם המשתמש או עם המפה באמצעות גורמים מטפלים באירועים, לשינויים במאפייני המפה או לאירועי משתמש (לדוגמה, אירועי 'click').
• יוצרים רכיב <div> שיכיל את אמצעי הבקרה ומוסיפים את הרכיב הזה למאפיין controls של Map.

כל אחד מהנושאים האלה מפורט בהמשך.

ציור פקדים בהתאמה אישית

אתם יכולים לבחור איך לצייר את הפקד. באופן כללי, מומלץ למקם את כל רכיבי התצוגה של הפקד בתוך רכיב <div> אחד, כדי שתוכלו לשנות את הפקד כיחידה אחת. נשתמש בתבנית העיצוב הזו בדוגמאות שבהמשך.

כדי לעצב פקדים אטרקטיביים, צריך ידע מסוים במבנה CSS ו-DOM. בדוגמאות הקוד הבאות אפשר לראות איך מוסיפים פקד בהתאמה אישית באמצעות HTML הצהרתי וגם באמצעות שיטות פרוגרמטיות.

CSS הצהרתי

סגנונות ה-CSS הבאים מספקים מראה שתואם לפקדים שמוגדרים כברירת מחדל. אפשר להשתמש בסגנונות האלה בשתי הדוגמאות הבאות:

.streetview-toggle-button {
  align-items: center;
  background: white;
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  color: rgb(86, 86, 86);
  cursor: pointer;
  display: flex;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  height: 40px;
  justify-content: center;
  margin: 10px 0;
  padding: 0 17px;
}

.streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

HTML הצהרתי

בקטעי הקוד הבאים אפשר לראות איך יוצרים פקד בהתאמה אישית באופן הצהרתי. בקוד ה-HTML, נעשה שימוש ב-DIV עם המזהה container כדי למקם את הפקד. ה-DIV הזה מוטמע בתוך הרכיב gmp-map והכפתור מתווסף ל-DIV. המאפיין slot מוגדר כ-control-inline-start-block-start כדי למקם את הפקד בפינה השמאלית העליונה של המפה.

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID">
  <div id="container" slot="control-inline-start-block-start">
    <input type="button"
    id="streetview-toggle-button"
    class="button"
    value="Click this button" />
  </div>
</gmp-map>

בקוד ה-JavaScript, הפונקציה getElementById() משמשת לאיתור ה-DIV והכפתור, רכיב event listener נוסף לכפתור, והכפתור מצורף ל-DIV.

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Get the control button from the HTML page.
const controlButton = document.getElementById("streetview-toggle-button");

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

‫JavaScript פרוגרמטי

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

// Create a DIV to attach the control UI to the Map.
const container = document.getElementById("container");

// Position the control in the top left corner of the map.
container.slot = "control-block-start-inline-start";

// Create the control.
const controlButton = document.createElement("button");
controlButton.classList.add("streetview-toggle-button");
controlButton.textContent = "Click this button";
controlButton.type = "button";

// Add a click event listener.
controlButton.addEventListener("click", () => {
  window.alert("You clicked the button!");
});

// Add the control to the DIV.
container.append(controlButton);

טיפול באירועים מפקדים מותאמים אישית

כדי שפקד יהיה שימושי, הוא צריך לבצע פעולה כלשהי. אתם מחליטים מה הפקד עושה. הפקד יכול להגיב לקלט של המשתמש או לשינויים במצב של Map.

כדי להגיב לקלט של משתמשים, משתמשים ב-addEventListener(), שמטפל באירועי DOM נתמכים. קטע הקוד הבא מוסיף פונקציית listener לאירוע 'click' של הדפדפן. חשוב לזכור שהאירוע הזה מתקבל מה-DOM, ולא מהמפה.

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

הנגשת פקדים מותאמים אישית

כדי לוודא שהפקדים מקבלים אירועי מקלדת ומופיעים בצורה נכונה בקוראי מסך:

• תמיד צריך להשתמש ברכיבי HTML מקוריים בשביל כפתורים, רכיבי טפסים ותוויות. השתמשו ברכיב DIV רק כמאגר שמכיל פקדים מקוריים. אל תשתמשו ברכיב DIV כרכיב אינטראקטיבי בממשק המשתמש.
• כדי לספק מידע על רכיב בממשק המשתמש, צריך להשתמש ברכיב label, במאפיין title או במאפיין aria-label, לפי הצורך.

מיקום אמצעי הבקרה בהתאמה אישית

כדי למקם פקדים בהתאמה אישית, משתמשים במאפיין slot ומציינים את מיקום הפקד הרצוי. למידע נוסף על המיקומים האלה, ראו מיקום הפקדים למעלה.

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

הקוד הבא יוצר פקד חדש בהתאמה אישית (ה-constructor שלו לא מוצג) ומוסיף אותו למפה במיקום BLOCK_START_INLINE_END (בפינה הימנית העליונה בהקשר של LTR).

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Push the control to the BLOCK_START_INLINE_END position.
innerMap.controls[google.maps.ControlPosition.BLOCK_START_INLINE_END].push(centerControlDiv);

כדי להגדיר מיקום לפקד מותאם אישית באופן הצהרתי, מגדירים את המאפיין slot ב-HTML:

<gmp-map center="30.72851568848909, -81.54675994068873" zoom="12">
  <div slot="control-block-start-inline-end">
    <!-- Control HTML -->
  </div>
</gmp-map>

דוגמה לפקד בהתאמה אישית

הפקד הבא הוא פשוט (אבל לא שימושי במיוחד) ומשלב את התבניות שמוצגות למעלה. הפקד הזה מגיב לאירועי DOM של 'click' על ידי הצבת המפה במרכז במיקום ברירת מחדל מסוים:

const chicago = { lat: 41.85, lng: -87.65 };

// Get the gmp-map element
const mapElement = document.querySelector('gmp-map')!;

async function init() {
    (await google.maps.importLibrary('maps')) as typeof google.maps;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the button element from the HTML
    const centerButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLButtonElement;
    // Move the event listener here
    centerButton.addEventListener('click', () => {
        innerMap.setCenter(chicago);
    });
}

void init();
index.ts

const chicago = { lat: 41.85, lng: -87.65 };
// Get the gmp-map element
const mapElement = document.querySelector('gmp-map');
async function init() {
    (await google.maps.importLibrary('maps'));
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    // Get the button element from the HTML
    const centerButton = document.getElementById('btnCenterMap');
    // Move the event listener here
    centerButton.addEventListener('click', () => {
        innerMap.setCenter(chicago);
    });
}
void init();
index.js

הוספת מצב לפקדים

יכול להיות שגם הפקדים ישמרו את המצב. הדוגמה הבאה דומה לזו שמוצגת למעלה, אבל הפקד מכיל לחצן נוסף, Set Home, שמגדיר את הפקד כך שיציג מיקום בית חדש. כדי לעשות את זה, אנחנו יוצרים מאפיין home_ בתוך הפקד כדי לאחסן את המצב הזה, ומספקים פונקציות getter ו-setter למצב הזה.

let innerMap: google.maps.Map;
const mapElement = document.querySelector('gmp-map')!;

let center: google.maps.LatLngLiteral | google.maps.LatLng = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById(
        'btnCenterMap'
    ) as HTMLInputElement;
    const setCenterButton = document.getElementById(
        'btnSetCenter'
    ) as HTMLInputElement;

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.ts

let innerMap;
const mapElement = document.querySelector('gmp-map');

let center = {
    lat: 41.85,
    lng: -87.65,
};

async function init() {
    await google.maps.importLibrary('maps');

    innerMap = mapElement.innerMap;

    // Get the button UI elements.
    const centerMapButton = document.getElementById('btnCenterMap');
    const setCenterButton = document.getElementById('btnSetCenter');

    // Set up the click event listener for the 'Center Map' button. Set the map
    // to the currently stored center.
    centerMapButton.addEventListener('click', () => {
        const currentCenter = center;
        innerMap.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterButton.addEventListener('click', () => {
        const newCenter = innerMap.getCenter();

        if (newCenter) {
            center = newCenter;
        }
    });
}

void init();
index.js