ב-13 באוקטובר 2021, נשבית את השירות שמספק את המודול 'מפות' עבור google.load
.
המשמעות היא שאחרי 13 באוקטובר 2021, אם תנסו להשתמש במודול 'מפות' ב-google.load
, תקבלו הודעת שגיאה (מודול 'מפות' לא נתמך), ולא תיטען מפה. כדי למנוע שיבושים אפשריים, כדאי לעבור לאחת מהחלופות.
מה עליי לעשות?
קודם כול, מסירים את התג <script>
שטוען את טוען google.load
, ואז מסירים את הקריאות ל-google.load
. אם אתם משתמשים ב-Google Loader למטרות אחרות, זה בסדר להשאיר את התג <script>
של הטעינה במקומו.
לאחר מכן, מטמיעים דרך חדשה לטעינת ה-API של JavaScript במפות (בחרו באחת מהאפשרויות הבאות):
דוגמה נוכחית באמצעות טוען Google
הדוגמה הבאה ממחישה איך משתמשים ב-Google Loader כדי לטעון את Maps JavaScript API (יש שני בלוקים של <script>
):
לפני
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
"callback": initMap,
"key": "YOUR_KEY",
"libraries": "places,visualization"
});
function initMap() {
// Google Maps JS API is loaded and available
}
</script>
טעינה בתוך השורה באמצעות התג <script>
(מומלץ)
כשמשתמשים בגישה הזו, ה-API ל-JavaScript של מפות Google נטען באותו זמן שהדף נטען. כדי להטמיע טעינה מוטבעת, צריך קודם להחליף את התג <script>
שטוען את www.google.com/jsapi ("before") בתג <script>
שמוצג בדוגמה הבאה:
<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>
לאחר מכן בקוד ה-JavaScript, מסירים את הקריאה לפונקציה google.load
, כי אין בה יותר צורך. בדוגמה הבאה מוצגת פונקציה ריקה של initMap()
, שנקראת כאשר ספריית מפות Google נטענת בהצלחה:
<script type='text/javascript'>
function initMap() {
// Google Maps JS API is loaded and available
}
</script>
טעינה דינמית מקובץ JavaScript אחר
טעינה דינמית מאפשרת לקבוע מתי ממשק ה-API של JavaScript במפות Google ייטען. לדוגמה, אפשר להמתין עם טעינת ה-Maps JavaScript API עד שהמשתמש ילחץ על לחצן או יבצע פעולה אחרת. כדי להטמיע טעינה דינמית,
תחילה צריך להחליף את התג <script>
שטוען את www.google.com/jsapi ("before") בקוד כדי להוסיף את התג <script>
באופן פרוגרמטי, כמו בדוגמה הבאה:
var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;
לאחר מכן, מחברים את פונקציית הקריאה החוזרת לאובייקט החלון, באופן הבא:
window.initMap = function() {
// Google Maps JS API is loaded and available
};
לבסוף, מוסיפים את התג <script>
לכותרת של הדף באופן הבא:
document.head.appendChild(script);