התכונות שמבוססות על WebGL בממשק API של JavaScript במפות Google מאפשרות לכם לשלוט בנטייה ובסיבוב, להוסיף אובייקטים תלת-ממדיים ישירות למפה ועוד. התכונות הבאות כלולות:
- תצוגת שכבת-על מבוססת-WebGL מאפשרת לכם להוסיף למפות גרפיקה בהתאמה אישית דו-ממדית ותלת-ממדית ותוכן מונפש.
- עכשיו אפשר לשנות את הנטייה והכיוון באופן פרוגרמטי, וגם באמצעות תנועות של העכבר והמקלדת.
- map.moveCamera() מאפשר לשנות כמה מאפייני מצלמה בו-זמנית.
- עכשיו אפשר להשתמש ב-Zoom בערכים עשרוניים.
שנתחיל?
כדי להשתמש בתכונות החדשות של WebGL, צריך מזהה מפה שמשתמש במפת וקטורים. צריך גם לעדכן את הבקשה ל-bootstrap של ה-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'
});
דוגמאות
הוספו דוגמאות להמחשת התכונות האלה: