התכונות שמבוססות על WebGL בממשק API של JavaScript במפות Google מאפשרות לכם לשלוט בנטייה ובסיבוב, להוסיף אובייקטים תלת-ממדיים ישירות למפה ועוד. התכונות הבאות כלולות:
- תצוגת שכבת-על של WebGL מאפשרת לכם להוסיף למפות שלכם גרפיקה דו-ממדית ותלת-ממדית ותוכן אנימציה מותאם אישית.
- עכשיו אפשר לשנות את הנטייה והכיוון באופן פרוגרמטי, וגם באמצעות תנועות של העכבר והמקלדת.
- map.moveCamera() מאפשרת לכם לשנות בו-זמנית כמה מאפיינים של מצלמה.
- ב-Zoom יש עכשיו תמיכה בערכים שברים.
שנתחיל?
כדי להשתמש בתכונות החדשות של WebGL, צריך מזהה מפה שמשתמש במפת וקטורים. בנוסף תצטרכו לעדכן את בקשת ה-אתחול של ה-API. בקטע הזה נסביר איך עושים את זה.
יצירת מזהה מפה חדש
כדי ליצור מזהה מפה חדש, בצעו את השלבים המפורטים במאמר שימוש בעיצוב מפה מבוסס-ענן – קבלת מזהה מפה. חשוב להגדיר את סוג המפה כ-JavaScript ולבחור באפשרות Vector. מסמנים את הטיה ו/או את Rotation כדי להפעיל הטיה וסיבוב במפה. כך תוכלו לשנות את הערכים האלו באופן פרוגרמטי, וגם תאפשר למשתמשים לשנות את ההטיה והכיוון ישירות במפה. אם השימוש בהטיה או בכותרת ישפיע לרעה על האפליקציה, משאירים את האפשרויות הטיה ו-Rotation לא מסומנות, כדי שהמשתמשים לא יוכלו להתאים את ההטיה והסיבוב.
עדכון קוד האתחול של המפה
כדי לעשות את זה צריך את מזהה המפה שיצרתם. תוכלו למצוא אותו בדף ניהול מפות Google. אתם צריכים לספק מזהה מפה כשיוצרים את המפה באמצעות המאפיין mapId, כפי שמוצג כאן:
map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' });
דוגמאות
הוספנו דוגמאות כדי להמחיש את התכונות האלה: