העברה: המודול של מפות Google ב-google.load

ב-13 באוקטובר 2021, נשבית את השירות שמספק את המודול 'מפות' עבור google.load. המשמעות היא שאחרי 13 באוקטובר 2021, אם תנסו להשתמש במודול 'מפות' ב-google.load, תקבלו הודעת שגיאה (מודול 'מפות' לא נתמך), ולא תיטען מפה. כדי למנוע שיבושים אפשריים, כדאי לעבור לאחת מהחלופות.

מה עליי לעשות?

קודם כול, מסירים את התג <script> שטוען את טוען google.load, ואז מסירים את הקריאות ל-google.load. אם אתם משתמשים ב-Google Loader למטרות אחרות, זה בסדר להשאיר את התג <script> של הטעינה במקומו.

לאחר מכן, מטמיעים דרך חדשה לטעינת ה-API של JavaScript במפות (בחרו באחת מהאפשרויות הבאות):

• טעינה מוטבעת באמצעות התג <script>
• טעינה דינמית מקובץ 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);

לעיון במסמכי התיעוד