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

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

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

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

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

• טעינה מוטבעת באמצעות התג <script>
• טעינה דינמית מקובץ JavaScript אחר

דוגמה עדכנית לשימוש ב-Google Loader

בדוגמה הבאה אפשר לראות איך 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> (מומלץ)

כשמשתמשים בגישה הזו, Maps JavaScript API נטען בו-זמנית עם טעינת הדף. כדי להטמיע טעינה מוטבעת, קודם מחליפים את התג <script> שטוען את www.google.com/jsapi ('לפני') בתג <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 אחר

טעינה דינמית מאפשרת לכם לשלוט במועד הטעינה של Maps JavaScript API. לדוגמה, אפשר להמתין עם טעינת 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);

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