אמצעי בקרה

בחירת פלטפורמה: Android iOS JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

הקוד הבא משבית את לחצני ממשק המשתמש:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;
index.js

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell

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

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

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

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

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

גודל מפה	zoomControl	גלוי?
ללא הגבלה	false	לא
ללא הגבלה	true	כן
>= 200x200px	undefined	כן
< 200x200px	undefined	לא

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;
index.js

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell

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

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

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

לדוגמה, אפשרויות לשינוי הפקד 'סוג המפה' מפורטות בשדה 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
  }
  ...

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

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;
index.js

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell

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

שינוי פקדים

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

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

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

מיצוב הבקרה

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

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

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

• TOP_CENTER מציין שצריך למקם את הפקד בחלק המרכזי העליון של המפה.
• TOP_LEFT מציין שצריך למקם את הפקד לאורך החלק השמאלי העליון של המפה, כשרכיבי המשנה של הפקד "זורמים" לכיוון המרכז העליון.
• TOP_RIGHT מציין שצריך למקם את הפקד לאורך הפינה הימנית העליונה של המפה, כשרכיבי המשנה של הפקד "זורמים" לכיוון המרכז העליון.
• LEFT_TOP מציין שצריך למקם את הפקד לאורך החלק הימני העליון של המפה, אבל מתחת לרכיבי TOP_LEFT.
• RIGHT_TOP מציין שצריך למקם את הפקד לאורך הפינה השמאלית העליונה של המפה, אבל מתחת לרכיבי TOP_RIGHT.
• LEFT_CENTER מציין שצריך למקם את הפקד לאורך הצד השמאלי של המפה, כשהוא ממורכז בין המיקום TOP_LEFT למיקום BOTTOM_LEFT.
• RIGHT_CENTER מציין שצריך למקם את הפקד לאורך הצד הימני של המפה, כשהוא ממורכז בין המיקום TOP_RIGHT והנקודה BOTTOM_RIGHT.
• LEFT_BOTTOM מציין שצריך למקם את הפקד לאורך הפינה השמאלית התחתונה של המפה, אבל מעל לרכיבי BOTTOM_LEFT.
• RIGHT_BOTTOM מציין שצריך למקם את הפקד לאורך הפינה השמאלית התחתונה של המפה, אבל מעל לרכיבי BOTTOM_RIGHT.
• BOTTOM_CENTER מציין שצריך למקם את הפקד בחלק המרכזי התחתון של המפה.
• BOTTOM_LEFT מציין שצריך למקם את הפקד לאורך החלק השמאלי התחתון של המפה, כשרכיבי המשנה של הפקד "זורמים" לכיוון המרכז התחתון.
• BOTTOM_RIGHT מציין שצריך למקם את הפקד לאורך הפינה הימנית התחתונה של המפה, כשרכיבי המשנה של הפקד "זורמים" לכיוון המרכז התחתון.

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

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

TypeScript

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

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

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell

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

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

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

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

כל אחד מהחששות האלה מתואר בהמשך.

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

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

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

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;
}

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

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

כדי להגיב לקלט של משתמשים, צריך להשתמש ב-addEventListener(), שמטפל באירועי DOM נתמכים. קטע הקוד הבא מוסיף האזנה לאירוע '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 במקרים הרלוונטיים, כדי לספק מידע על רכיב בממשק המשתמש.

מיקום פקדים מותאמים אישית

הפקדים המותאמים אישית ממוקמים במפה על ידי הצבתם במיקומים המתאימים בתוך המאפיין controls של האובייקט Map. הנכס הזה מכיל מערך של google.maps.ControlPositions. כדי להוסיף פקד מותאם אישית למפה, אפשר להוסיף את Node (בדרך כלל זהו <div>) לערך ControlPosition מתאים. (למידע על מיקומים אלה, ראו מיקום הבקרה למעלה).

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

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

הקוד הבא יוצר פקד חדש בהתאמה אישית (המבנה שלו לא מוצג) ומוסיף אותו למפה במיקום TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

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

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

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

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

TypeScript

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

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

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell

הוספת מצב לאמצעי הבקרה

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

TypeScript

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

הערה: מומלץ לקרוא את המדריך לגבי השימוש ב-TypeScript ובמפות Google.

JavaScript

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

הערה: קוד ה-JavaScript נוצר מקטע הקוד של TypeScript.

להצגת דוגמה

רוצה לנסות דוגמה?

JSFiddle.net Google Cloud Shell