חלונות מידע

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

מבוא

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

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

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

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

כדאי לדעת: בדף פתרונות לאיתור חנויות יש דוגמאות נוספות לשימוש בחלונות מידע.

הוספת חלון מידע

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

הליטרל של האובייקט InfoWindowOptions מכיל את השדות הבאים:

• ‫content מכיל מחרוזת טקסט או צומת DOM להצגה בחלון המידע.
• השדה pixelOffset מכיל היסט מקצה חלון המידע למיקום שבו חלון המידע מעוגן. בפועל, לא צריך לציין את השדה הזה. אפשר להשאיר את ערך ברירת המחדל.
• השדה position מכיל את LatLng שאליו מוצמד חלון המידע הזה. הערה: אפשר לצרף InfoWindow לאובייקט Marker (במקרה כזה המיקום שלו מבוסס על המיקום של הסמן) או למפה עצמה במיקום LatLng שצוין. אחת הדרכים לאחזר LatLng היא באמצעות שירות הגיאו-קידוד. כשפותחים חלון מידע על סמן, position מתעדכן אוטומטית.
• ‫maxWidth מציין את הרוחב המקסימלי של חלון המידע בפיקסלים. כברירת מחדל, חלון המידע מתרחב כדי להתאים לתוכן שלו, והטקסט מועבר לשורה חדשה באופן אוטומטי אם חלון המידע ממלא את המפה. אם מוסיפים maxWidth, חלון המידע יתאים את עצמו אוטומטית כדי לאכוף את הרוחב שצוין. אם הוא מגיע לרוחב המקסימלי ויש מקום אנכי במסך, יכול להיות שחלון המידע יתרחב אנכית.

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

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

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

פתיחת חלון מידע

כשיוצרים חלון מידע, הוא לא מוצג במפה באופן אוטומטי. כדי להציג את חלון המידע, צריך להפעיל את השיטה open() באובייקט InfoWindow, ולהעביר אליה ליטרל של אובייקט InfoWindowOpenOptions עם האפשרויות הבאות:

• ‫map מציין את המפה או את תמונת הפנורמה ב-Street View שייפתחו.
• ‫anchor מכיל נקודת עוגן (לדוגמה, Marker). אם האפשרות anchor היא null או לא מוגדרת, חלון המידע ייפתח במאפיין position שלו.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

async function initMap(): Promise<void> {
  // Import the needed libraries.
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  // Get the map element and the inner map from it.
  const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
  const innerMap = mapElement.innerMap;

  // Get the center of the map.
  const center = mapElement.center;

  // Create the info window content.
  const heading = document.createElement("h1");
  heading.textContent = "Uluru (Ayers Rock)";

  const content = document.createElement("div");

  const infoParagraph = document.createElement("p");
  infoParagraph.textContent =
  `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;

  content.appendChild(infoParagraph);

  const link = document.createElement("a");
  link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
  link.target = "_blank";
  content.appendChild(link);

  // Create the info window.
  const infowindow = new google.maps.InfoWindow({
    headerContent: heading,
    content: content,
    ariaLabel: "Uluru",
    maxWidth: 500, // Set max width (optional).
  });

  // Create the marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: center,
    map: innerMap,
    title: "Uluru (Ayers Rock)",
    gmpClickable: true,
  });

  // Open the info window when the map loads.
  infowindow.open({
    anchor: marker,
    map: innerMap,
  });

  // Open the info window when the marker is clicked.
  marker.addEventListener("gmp-click", () => {
    infowindow.open({
      anchor: marker,
      map: innerMap,
    });
  });
}

initMap();
index.ts

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

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    // Get the map element and the inner map from it.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    // Get the center of the map.
    const center = mapElement.center;
    // Create the info window content.
    const heading = document.createElement("h1");
    heading.textContent = "Uluru (Ayers Rock)";
    const content = document.createElement("div");
    const infoParagraph = document.createElement("p");
    infoParagraph.textContent =
        `Uluru, also referred to as Ayers Rock, is a large sandstone rock formation 
  in the southern part of the Northern Territory, central Australia. It lies
  335 km (208 mi) south west of the nearest large town, Alice Springs; 450 km 
  (280 mi) by road. Kata Tjuta and Uluru are the two major features of the 
  Uluru - Kata Tjuta National Park. Uluru is sacred to the Pitjantjatjara and 
  Yankunytjatjara, the Aboriginal people of the area. It has many springs, 
  waterholes, rock caves and ancient paintings. Uluru is listed as a World 
  Heritage Site.`;
    content.appendChild(infoParagraph);
    const link = document.createElement("a");
    link.href = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.textContent = "https://en.wikipedia.org/w/index.php?title=Uluru";
    link.target = "_blank";
    content.appendChild(link);
    // Create the info window.
    const infowindow = new google.maps.InfoWindow({
        headerContent: heading,
        content: content,
        ariaLabel: "Uluru",
        maxWidth: 500, // Set max width (optional).
    });
    // Create the marker.
    const marker = new google.maps.marker.AdvancedMarkerElement({
        position: center,
        map: innerMap,
        title: "Uluru (Ayers Rock)",
        gmpClickable: true,
    });
    // Open the info window when the map loads.
    infowindow.open({
        anchor: marker,
        map: innerMap,
    });
    // Open the info window when the marker is clicked.
    marker.addEventListener("gmp-click", () => {
        infowindow.open({
            anchor: marker,
            map: innerMap,
        });
    });
}
initMap();
index.js

להצגת דוגמה

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

JSFiddle.net

בדוגמה הבאה מוגדר maxWidth של חלון מידע: לדוגמה.

העברת המיקוד לחלון מידע

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

סגירת חלון מידע

כברירת מחדל, חלון המידע נשאר פתוח עד שהמשתמש לוחץ על לחצן הסגירה (X בפינה השמאלית העליונה של חלון המידע) או לוחץ על מקש ESC. אפשר גם לסגור את חלון המידע באופן מפורש על ידי הפעלת השיטה close() שלו.

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

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

העברת חלון מידע

יש כמה דרכים לשנות את המיקום של חלון המידע:

• מתקשרים למספר setPosition() בחלון המידע, או
• מצרפים את חלון המידע לסמן חדש באמצעות השיטה InfoWindow.open(). הערה: אם קוראים ל-open() בלי להעביר סמן, הפונקציה InfoWindow תשתמש במיקום שצוין במהלך הבנייה באמצעות הליטרל של האובייקט InfoWindowOptions.

התאמה אישית

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