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

דף זה תורגם על ידי Cloud Translation API.

פקדים

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

להצגת דוגמה

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

JSFiddle.net Google Cloud Shell

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

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

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

{
  zoomControl: boolean,
  cameraControl: 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

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

להצגת דוגמה

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

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

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

להצגת דוגמה

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

JSFiddle.net Google Cloud Shell

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

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

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

zoomControl מפעיל/ה את כוונון מרחק התצוגה או משבית/ה אותו. כברירת מחדל, הלחצן הזה גלוי ומופיע ליד הפינה השמאלית התחתונה של המפה. השדה zoomControlOptions מציין גם את הערך של ZoomControlOptions שישמש לאמצעי הבקרה הזה.
cameraControl מפעיל/ה את אמצעי הבקרה של המצלמה. אמצעי הבקרה הזה גלוי כברירת מחדל במפות Google בערוץ הבטא. השדה cameraControlOptions מציין גם את הערך של CameraControlOptions שישמש לאמצעי הבקרה הזה.
mapTypeControl מפעיל או משבית את הלחצן לבחירת סוג המפה, שמאפשר למשתמש לעבור בין סוגי מפה (כמו מפה ולוויין). כברירת מחדל, הלחצן הזה גלוי ומופיע בפינה הימנית העליונה של המפה. השדה mapTypeControlOptions מציין גם את MapTypeControlOptions שישמש לאמצעי הבקרה הזה.
streetViewControl מפעיל/ה את אטב-האיש, שמאפשר למשתמש להפעיל תמונה פנורמית של Street View. כברירת מחדל, הלחצן הזה גלוי ומופיע ליד הפינה השמאלית התחתונה של המפה. השדה streetViewControlOptions מציין גם את StreetViewControlOptions שישמש לאמצעי הבקרה הזה.
rotateControl מאפשר/ה להשבית את הופעת הלחצן 'סיבוב', שמאפשר לשלוט בכיוון של תמונות בזווית של 45°. כברירת מחדל, נוכחות הלחצן נקבעת לפי נוכחות או היעדר תמונות מזווית של 45° לסוג המפה הנתון, במיקום ובמרחק התצוגה הנוכחיים. כדי לשנות את התנהגות הרכיב, אפשר להגדיר את הערך של rotateControlOptions במפה כך שיציין את הערך של RotateControlOptions שבו רוצים להשתמש. לא ניתן להציג את הלחצן אם אין תמונות זמינות בזווית של 45°.
scaleControl מפעיל/ה את הלחצן Scale (קנה מידה) שמציג את קנה המידה של המפה. כברירת מחדל, הלחצן הזה לא גלוי. כשהתכונה מופעלת, היא תמיד מופיעה בפינה השמאלית התחתונה של המפה. בנוסף, השדה 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

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

להצגת דוגמה

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

JSFiddle.net Google Cloud Shell

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

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

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

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

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

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

הקוד הבא יוצר רכיב בקרה מותאם אישית חדש (ה-constructor שלו לא מוצג) ומוסיף אותו למפה במיקום 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);

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

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

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

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

להצגת דוגמה

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

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

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

להצגת דוגמה

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

JSFiddle.net Google Cloud Shell