מבוא
הסמל
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 גם כדי להפעיל גלילה. חשוב לשים לב שאם לא תפעילו גלילה והתוכן יחרוג מנפח השטח הזמין
בחלון המידע, ייתכן שהתוכן יישפך מחלון המידע.
פתיחת חלון מידע
כשיוצרים חלון מידע, הוא לא מוצג באופן אוטומטי במפה.
כדי שחלון המידע יוצג, צריך להפעיל את השיטה 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. function initMap(): void { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, 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.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example displays a marker at the center of Australia. // When the user clicks the marker, an info window opens. function initMap() { const uluru = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); const contentString = '<div id="content">' + '<div id="siteNotice">' + "</div>" + '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + '<div id="bodyContent">' + "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, 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.</p>" + '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + "https://en.wikipedia.org/w/index.php?title=Uluru</a> " + "(last visited June 22, 2009).</p>" + "</div>" + "</div>"; const infowindow = new google.maps.InfoWindow({ content: contentString, ariaLabel: "Uluru", }); const marker = new google.maps.Marker({ position: uluru, map, title: "Uluru (Ayers Rock)", }); marker.addListener("click", () => { infowindow.open({ anchor: marker, map, }); }); } window.initMap = initMap;
לדגום
בדוגמה הבאה מגדירים maxWidth
של חלון מידע:
לצפייה בדוגמה.
התמקדות בחלון מידע
כדי להתמקד בחלון מידע, צריך להפעיל את השיטה focus()
. כדאי להשתמש בשיטה הזו בשילוב עם אירוע visible
לפני הגדרת המיקוד. קריאה לשיטה זו בחלון מידע שאינו גלוי לא תשפיע. התקשרות אל open()
כדי להפוך את חלון המידע לגלוי.
סגירת חלון מידע
כברירת מחדל, חלון מידע נשאר פתוח עד שהמשתמש לוחץ על לחצן הסגירה (צלב בפינה השמאלית העליונה של חלון המידע) או לוחץ על מקש Esc.
אפשר לסגור את חלון המידע באופן מפורש גם על ידי קריאה לשיטה close()
.
לאחר שחלון המידע סגור, המיקוד חוזר לפריט שהיה במוקד לפני פתיחת חלון המידע. אם הרכיב הזה לא יהיה זמין,
המיקוד יחזור למפה. כדי לשנות את ההתנהגות הזו, אפשר להאזין לאירוע closeclick
ולנהל את המיקוד באופן ידני, לפי הדוגמה הבאה:
infoWindow.addListener('closeclick', ()=>{ // Handle focus manually. });
העברה של חלון מידע
יש כמה דרכים לשנות את המיקום של חלון מידע:
- יש להתקשר אל
setPosition()
בחלון המידע, או - יש לצרף את חלון המידע לסמן חדש באמצעות השיטה
InfoWindow.open()
. הערה: אם מתקשרים ל-open()
בלי להעביר סמן, הInfoWindow
ישתמש במיקום שצוין במהלך היצירה באמצעות ליטרל האובייקט שלInfoWindowOptions
.
התאמה אישית
הכיתה InfoWindow
לא מציעה התאמה אישית. במקום זאת, אפשר לעיין בדוגמה בנושא חלון קופץ מותאם אישית כדי לראות איך ליצור חלון קופץ מותאם אישית.