פקדים

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

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

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

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

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

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

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

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

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

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

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

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

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

יכול להיות שתרצו להשבית לגמרי את לחצני ברירת המחדל של ממשק המשתמש של ה-API. כדי לעשות את זה, מגדירים את המאפיין disableDefaultUI של המפה (באובייקט MapOptions) לערך true. המאפיין הזה משבית את כל לחצני הבקרה של ממשק המשתמש מ-JavaScript API של מפות Google. עם זאת, ההגדרה לא משפיעה על מחוות העכבר או על קיצורי המקשים במפת הבסיס, שמוגדרים על ידי המאפיינים 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
}

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

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

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

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

אפשרויות שליטה

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

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

לדוגמה, האפשרויות לשינוי אמצעי הבקרה של סוג המפה מצוינות בשדה mapTypeControlOptions. אמצעי הבקרה Map Type יכול להופיע באחת מהאפשרויות הבאות של 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: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: [
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
        ],
        position: google.maps.ControlPosition.TOP_CENTER,
    },
});
index.ts

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

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

שינוי הפקדים

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

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

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

מיקום פקדים

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

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

בטבלאות הבאות מוצגים מיקומי אמצעי הבקרה הנתמכים בהקשרים של כתיבה מימין לשמאל (RTL) ומשמאל לימין (LTR).

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

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

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

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

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;
index.js

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

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

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

• מגדירים CSS מתאים לאלמנטים של אמצעי הבקרה שרוצים להציג.
• טיפול באינטראקציה עם המשתמש או עם המפה באמצעות פונקציות לטיפול באירועים (event handlers) לשינויים במאפייני המפה או לאירועים שקשורים למשתמש (לדוגמה, אירועי '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 משמש למיקום הפקד. הוא מוטמע ברכיב 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 מעדכן את אמצעי הבקרה בהתאם.

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

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

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

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

let map: google.maps.Map;

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

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

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

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

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

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js

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

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

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

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

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

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

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

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;
index.js