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