סקירה כללית
הפלטפורמה של מפות Google זמינה לאינטרנט (JS, TS), ל-Android ול-iOS, וגם מציעה ממשקי API לשירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבו לפלטפורמה אחת, אבל יש קישורים למסמכי תיעוד להטמעה בפלטפורמות אחרות.
כשהמשתמשים רואים את המוצרים שלכם באינטרנט, הם רוצים למצוא את הדרך הטובה והנוחה ביותר לקבל את ההזמנה. מדריך ההטמעה של מאתר המוצרים והטיפים להתאמה אישית הם ההמלצה של Google לשילוב האופטימלי של ממשקי ה-API של פלטפורמת מפות Google, כדי ליצור חוויית משתמש מעולה במאתר המוצרים.
בעזרת מדריך ההטמעה הזה, תוכלו לעזור ללקוחות לראות את המידע המפורט שנחוץ להם כדי למצוא את המוצרים שלכם, ולספק להם מסלול הגעה לחנות שבה נמצא הפריט שהם מחפשים, בין אם הם נוסעים ברכב, באופניים, ברגל או בתחבורה ציבורית.
הפעלת ממשקי API
כדי להטמיע את הכלי למציאת מוצרים, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud. הקישורים הבאים יפנו אתכם למסוף Google Cloud כדי להפעיל כל ממשק API בפרויקט שבחרתם:
- Maps JavaScript API
- Places API
- Geocoding API
- Distance Matrix API (ממשק API מדור קודם)
- Directions API (ממשק מדור קודם)
מידע נוסף על ההגדרה זמין במאמר תחילת העבודה עם הפלטפורמה של מפות Google.
הקטעים במדריך ההטמעה
בהמשך מפורטות ההטמעות וההתאמות האישיות הבאות:
- סמל סימן הווי הוא שלב מרכזי בהטמעה.
- סמל הכוכב הוא התאמה אישית אופציונלית, אבל מומלצת, לשיפור הפתרון.
| שיוך מיקומי חנויות למקומות בפלטפורמה של מפות Google | התאמת מיקום של חנות למקום בפלטפורמת מפות Google. | |
| זיהוי המיקום של המשתמש | מוסיפים פונקציונליות של הקלדה תוך כדי תנועה כדי לשפר את חוויית המשתמש בכל הפלטפורמות ולשפר את הדיוק של הכתובות באמצעות מספר מועט של הקשות. | |
| זיהוי החנויות הקרובות ביותר | חישוב המרחק והזמן של נסיעה בין מספר נקודות מוצא ויעד, עם אפשרות לציין אמצעי תחבורה שונים כמו הליכה, נהיגה, תחבורה ציבורית או רכיבה על אופניים. | |
| הצגת פרטי החנות | להציג מידע עשיר על החנויות שלכם כדי למשוך משתמשים אלהן בקלות רבה יותר. | |
| איך נותנים מסלול ניווט | קבלת נתוני מסלולים מנקודת מוצא ליעד באמצעות אמצעי תחבורה שונים, כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית. | |
| שליחת מסלול לנייד | בנוסף להצגת מסלולים בדף האינטרנט, אפשר גם לשלוח מסלולים לטלפון של המשתמש כדי לנווט באמצעות מפות Google בדרכים. | |
| הצגת המיקומים שלכם במפה אינטראקטיבית | אתם יכולים ליצור סמנים מותאמים אישית למפה כדי לעזור למיקומים שלכם להתבלט, ולעצב את המפה כך שתתאים לצבעים של המותג שלכם. להציג (או להסתיר) נקודות עניין ספציפיות (POI) במפה כדי לעזור למשתמשים להתמצא טוב יותר, ולשלוט בצפיפות של נקודות העניין כדי למנוע עומס במפה. | |
| שילוב של נתוני מיקום מותאמים אישית עם פרטי המקום | כדאי לשלב פרטי מיקום מותאמים אישית עם פרטי המקום כדי לספק למשתמשים קבוצה עשירה של נתונים לקבלת החלטות. |
שיוך מיקומי חנויות למקומות בפלטפורמה של מפות Google
אחזור של מזהי מקומות
| בדוגמה הזו נעשה שימוש ב-: Places API | אפשרויות נוספות: JavaScript |
יכול להיות שיש לכם מסד נתונים של החנויות שלכם עם מידע בסיסי כמו שם המיקום, הכתובת ומספר הטלפון שלו, ואתם רוצים לשייך אותו למקום בפלטפורמת מפות Google כקבוצה של יעדים סופיים שבהם המשתמשים יכולים לאסוף מוצרים. כדי לאחזר את המידע שזמין בפלטפורמה של מפות Google לגבי המקום הזה, כולל קואורדינטות גיאוגרפיות ומידע שהמשתמשים סיפקו, צריך למצוא את מזהה המקום שתואם לכל אחת מהחנויות במסד הנתונים.
אפשר לבצע קריאה ל
נקודת הקצה Find Place בחיפוש מקומות ב-Places API ולבקש רק את השדה place_id.
בדוגמה הבאה מוצגת בקשה למזהה המקום של המשרד של Google בלונדון:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
אתם יכולים לשמור את מזהה המקום הזה במסד הנתונים יחד עם שאר נתוני החנות, ולהשתמש בו כדרך יעילה לבקש מידע על החנות. בהמשך מפורטות הוראות לשימוש במזהה המקום כדי לבצע גיאוקוד, לאחזר את פרטי המקום ולבקש מסלול הגעה למקום.
המרת כתובות לקואורדינטות (geocoding) של המיקומים
| בדוגמה הזו נעשה שימוש ב-: Geocoding API | אפשרויות נוספות: JavaScript |
אם במסד הנתונים של החנויות יש כתובות רחוב אבל אין קואורדינטות גיאוגרפיות, תוכלו להשתמש ב-Geocoding API כדי לקבל את קו הרוחב ואת קו האורך של הכתובת הזו לצורך חישוב החנויות הקרובות ביותר ללקוח. אתם יכולים להמיר את המיקום של החנות לקואורדינטות גיאוגרפיות בצד השרת, לשמור את קווי הרוחב והאורך במסד הנתונים ולחדש אותם לפחות כל 30 יום.
דוגמה לשימוש ב-Geocoding API כדי לקבל את קו הרוחב ואת קו האורך של מזהה המקום שהוחזר למשרד של Google בלונדון:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
זיהוי המיקום של המשתמש
| בדוגמה הזו נעשה שימוש ב: ספריית Places Autocomplete בממשק API של JavaScript במפות Google | התכונה זמינה גם: Android | iOS |
אחד מהרכיבים העיקריים של מאתר המוצרים הוא זיהוי המיקום ההתחלתי של המשתמש. אתם יכולים להציע למשתמשים שתי אפשרויות לציון המיקום ההתחלתי: הקלדה של מקור החיפוש או מתן הרשאות למיקום הגיאוגרפי של דפדפן האינטרנט או לשירותי המיקום בנייד.
טיפול בערכים שהוזנו באמצעות השלמה אוטומטית
המשתמשים של היום רגילים לפונקציונליות של ההשלמה האוטומטית במהלך ההקלדה בגרסה של מפות Google לצרכן. אפשר לשלב את הפונקציונליות הזו בכל אפליקציה באמצעות ספריות המקומות של פלטפורמת מפות Google במכשירים ניידים ובאינטרנט. כשמשתמש מקליד כתובת, המערכת ממלאת את שאר הפרטים באמצעות ווידג'טים. אפשר גם לספק פונקציונליות משלכם להשלמה אוטומטית באמצעות ספריות Places ישירות.
בדוגמה הבאה, מוסיפים את הספרייה של השלמה אוטומטית של מקומות לאתר על ידי הוספת הפרמטר libraries=places לכתובת ה-URL של הסקריפט של Maps JavaScript API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>בשלב הבא מוסיפים לדף תיבת טקסט לקלט של משתמשים:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input>לבסוף, צריך לאתחל את שירות המילוי האוטומטי ולקשר אותו לתיבת הטקסט בעלת השם. הגבלת התחזיות של השלמה אוטומטית של מקומות לסוגים של כתובות גיאוקוד מאפשרת לשדה הקלט לקבל כתובות רחוב, שכונות, ערים ומיקודים, כך שהמשתמשים יוכלו להזין כל רמת ספציפיות כדי לתאר את המקור שלהם. חשוב לבקש את השדה geometry כדי שהתגובה תכיל את קו הרוחב ואת קו האורך של המקור של המשתמש. קואורדינטות המפה האלה ישמשו לציון היחס בין המיקומים שלכם למקור.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", searchFromOrigin); }
בדוגמה הזו, אחרי שהמשתמש בוחר את הכתובת, הפונקציה searchFromOrigin() מתחילה לפעול. המערכת מקבלת את הגיאומטריה של התוצאה התואמת שמהווה את מיקום המשתמש, ואז מחפשת את המיקומים הקרובים ביותר על סמך הקואורדינטות האלה כמקור, כפי שמתואר בקטע זיהוי החנויות הקרובות ביותר.
אפשר להרחיב את הקטע הזה כדי לראות סרטוני הדרכה להוספת השלמה אוטומטית של מקומות לאפליקציה:
אתר
אפליקציות ל-Android
אפליקציות ל-iOS
שימוש במיקום הגיאוגרפי של הדפדפן
כדי לבקש מיקום גיאוגרפי בדפדפן HTML5 ולטפל בו, עיינו במאמר בנושא הפעלת חלון שימוש במיקום שלי:
זיהוי החנויות הקרובות ביותר
| בדוגמה הזו נעשה שימוש ב: שירות מטריצת מרחקים, Maps JavaScript API (קודם) | זמינים גם: Distance Matrix API (קודם) |
אחרי שתקבלו את המיקום של המשתמש, תוכלו להשוות אותו למיקומי החנויות שלכם. כך תוכלו להציע למשתמשים לבחור את המיקום שנוח להם ביותר לפי זמן הנסיעה או המרחק היבשתי.
הדרך הרגילה לארגן רשימת מיקומים היא למיין אותם לפי מרחק. לרוב המרחק הזה מחושב פשוט על ידי קו ישר מהמשתמש למיקום, אבל הנתון הזה יכול להיות מטעה. יכול להיות שהקו הישר עובר מעל נהר שאי אפשר לחצות או דרך כבישים עמוסים בזמן שמישהו אחר יכול להגיע ליעד בדרך נוחה יותר. זה חשוב אם יש לכם כמה מיקומים במרחק כמה קילומטרים זה מזה.
שירות מטריצת המרחקים, Maps JavaScript API (קודם) פועל על ידי קבלת רשימה של מיקומי המוצא והיעד והחזרת המרחק בין המיקומים וגם את משך הנסיעה. במקרה של משתמש, המקור יהיה המיקום שבו הוא נמצא כרגע או נקודת ההתחלה הרצויה שלו, והיעדים יהיו המיקומים של המקומות. אפשר לציין את המקור והיעד כזוגות קואורדינטות או ככתובות. כשקוראים לשירות, הוא מתאים את הכתובות. אפשר להשתמש בשירות מטריצת המרחקים, ב-Maps JavaScript API (ממשק API מדור קודם) עם פרמטרים נוספים כדי להציג תוצאות על סמך זמני נסיעה נוכחיים או עתידיים.
בדוגמה הבאה מתבצעת קריאה לשירות מטריצת המרחקים, Maps JavaScript API (ממשק קודם), עם ציון המיקום המוצא של המשתמש ו-25 מיקומי חנויות בכל פעם.
function getDistances(place) { let distanceMatrixService = new google.maps.DistanceMatrixService(); const origins = [place]; return new Promise((resolve, reject) => { const callback = (response, status) => { if (status === google.maps.DistanceMatrixStatus.OK && response) { resolve(response); } else { reject(status); } }; distanceMatrixService.getDistanceMatrix( { origins, destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERIAL, }, callback ); }); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then((response) => { for (let i = 0; i < response.rows[0].elements.length; i++) { stores[i].address = response.destinationAddresses[i]; stores[i].travelDistance = response.rows[0].elements[i].distance.value; stores[i].travelDistanceText = response.rows[0].elements[i].distance.text; stores[i].travelDuration = response.rows[0].elements[i].duration.value; stores[i].travelDurationText = response.rows[0].elements[i].duration.text; } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
לכל מיקום בקרבת מקום, תוכלו להציג את סטטוס המלאי של המוצר על סמך מסד הנתונים של המלאי.
הצגת פרטי החנות
| בדוגמה הזו נעשה שימוש ב: ספריית מקומות, Maps JavaScript API | אפשרויות נוספות: Places SDK ל-Android | Places SDK ל-iOS | Places API |
אתם יכולים לשתף פרטים מלאים על המקום, כמו פרטים ליצירת קשר, שעות פעילות וסטטוס הפתיחה הנוכחי, כדי לעזור ללקוחות לבחור את המיקום המועדף עליהם או לסיים את ההזמנה.
אחרי שמבצעים קריאה ל-ממשק ה-API של JavaScript במפות Google כדי לקבל פרטים על מקומות, אפשר לסנן ולייצר את התגובה.
כדי לבקש פרטי מקום, תצטרכו את מזהה המקום של כל אחד מהמיקומים שלכם. במאמר איך מקבלים מזהי מקומות מוסבר איך לאחזר את מזהה המקום של המיקום שלכם.
הבקשה הבאה לקבלת פרטי מקום מחזירה את הכתובת, הקואורדינטות, האתר, מספר הטלפון, הדירוג ושעות הפעילות של מזהה המקום Google London:
var request = { placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website'] };service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);
function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }
שיפור הכלי למציאת מוצרים
בהתאם לצרכים של העסק או של המשתמשים, תוכלו לשפר עוד יותר את חוויית המשתמש.
לספק מסלול ניווט
| בדוגמה הזו נעשה שימוש ב: שירות המסלולים של Maps JavaScript API | זמין גם: שירות אינטרנט של Directions API (ממשק API מדור קודם) לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק דרך שרת proxy |
כשמציגים למשתמשים מסלול הגעה מתוך האתר או האפליקציות, הם לא צריכים לצאת מהאתר ולהסיח את דעתם מדפים אחרים או לראות מתחרים במפה. אפשר גם להציג את פליטות הפחמן של כלי התחבורה הספציפי ולהציג את ההשפעה של כל נסיעה ספציפית באמצעות קבוצת נתוני פחמן שבבעלותכם.
בשירות המסלול יש גם פונקציות שמאפשרות לעבד את התוצאות ולהציג אותן בקלות במפה.
בהמשך מופיעה דוגמה להצגת חלונית מסלול הגעה. מידע נוסף על הדוגמה זמין במאמר הצגת מסלול הגעה בטקסט.
שליחת מסלול לנייד
כדי שלמשתמשים יהיה קל יותר להגיע למיקום, תוכלו לשלוח להם קישור למסלול הגעה בהודעת טקסט או באימייל. כשלוחצים עליו, אפליקציית מפות Google מופעלת בטלפון אם היא מותקנת, או שהדף maps.google.com נטען בדפדפן האינטרנט של המכשיר. בשתי הגרסאות האלה, המשתמש יכול להשתמש בניווט מפורט, כולל הנחיות קוליות, כדי להגיע ליעד.
משתמשים ב
כתובות URL של מפות Google כדי ליצור כתובת URL של מסלול הגעה כמו זו שבהמשך, כאשר שם המקום בקידוד כתובת URL הוא הפרמטר destination ומזהה המקום הוא הפרמטר destination_place_id. אין עלות ליצירה של כתובות URL של מפות Google או לשימוש בהן, ולכן אין צורך לכלול מפתח API בכתובת ה-URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
אם רוצים, אפשר לספק פרמטר שאילתה origin באותו פורמט כתובת כמו היעד. אם לא תוסיפו את הפרמטר הזה, מסלול ההגעה יתחיל מהמיקום הנוכחי של המשתמש, שעשוי להיות שונה מהמיקום שבו הוא השתמש באפליקציית מאתר המוצרים. כתובות URL של מפות Google כוללות אפשרויות נוספות של פרמטרים של שאילתות, כמו travelmode ו-dir_action=navigate, כדי להפעיל את מסלול ההגעה כשהניווט מופעל.
הקישור הזה שניתן ללחוץ עליו, שמרחיב את כתובת ה-URL לדוגמה שלמעלה, מגדיר את origin כאצטדיון כדורגל בלונדון ומשתמש ב-travelmode=transit כדי לספק מסלול הגעה ליעד בתחבורה הציבורית.
כדי לשלוח הודעת טקסט או אימייל שמכילים את כתובת ה-URL הזו, מומלץ כרגע להשתמש באפליקציה של צד שלישי כמו twilio. אם אתם משתמשים ב-App Engine, אתם יכולים להשתמש בחברות צד שלישי כדי לשלוח הודעות SMS או אימיילים. למידע נוסף, ראו שליחת הודעות באמצעות שירותי צד שלישי.
הצגת המיקומים שלכם במפה אינטראקטיבית
שימוש במפות דינמיות
| בדוגמה הזו נעשה שימוש ב: Maps JavaScript API | התכונה זמינה גם: Android | iOS |
מאתר הוא חלק חשוב מחוויית המשתמש. עם זאת, בחלק מהאתרים לא תמצאו אפילו מפה פשוטה, ולכן המשתמשים יצטרכו לצאת מהאתר או מהאפליקציה כדי למצוא מיקום סמוך. המשמעות היא חוויית משתמש לא אופטימלית למשתמשים שצריכים לנווט בין דפים כדי לקבל את המידע הנדרש להם. במקום זאת, תוכלו לשפר את החוויה הזו על ידי הטמעה של מפות בהתאמה אישית באפליקציות שלכם.
אפשר להוסיף לדף מפה דינמית – כלומר מפה שהמשתמשים יכולים להזיז, להתקרב אליה או להתרחק ממנה ולקבל פרטים על מיקומים שונים ונקודות עניין – באמצעות כמה שורות קוד.
קודם כול, צריך לכלול את Maps JavaScript API בדף. כדי לעשות זאת, צריך לקשר את הסקריפט הבא בדף ה-HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>כתובת ה-URL מפנה לפונקציית ה-JavaScript initMap שפועלת כשהדף נטען. בכתובת ה-URL אפשר גם להגדיר את השפה או האזור של המפה כדי לוודא שהפורמט שלה יהיה נכון למדינה הספציפית שאליה אתם מטרגטים. הגדרת אזור גם מבטיחה שההתנהגות של אפליקציות שמשמשות מחוץ לארה"ב תהיה מוטה לאזור שהגדרתם. בפרטי הכיסוי של הפלטפורמה של מפות Google תוכלו למצוא רשימה מלאה של השפות והאזורים הנתמכים, ולקבל מידע נוסף על שימוש בפרמטר region.
בשלב הבא, צריך קוד HTML div כדי להציב את המפה בדף.
זהו המקום שבו המפה תוצג.
<div id="map"></div>בשלב הבא מגדירים את הפונקציונליות הבסיסית של המפה. הפעולה הזו מתבצעת בפונקציית הסקריפט initMap שצוינה בכתובת ה-URL של הסקריפט. בסקריפט הזה, שמוצג בדוגמה הבאה, אפשר להגדיר את המיקום הראשוני, סוג המפה ואת אמצעי הבקרה שיהיו זמינים למשתמשים במפה. שימו לב ש-getElementById() מפנה למזהה div של המפה שלמעלה.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
בדרך כלל, בשירותי איתור תרצו להגדיר את המיקום הראשוני, את נקודת המרכז או את הגבולות ואת רמת הזום (המידה שבה המפה מוגדלת למיקום הזה). רוב הרכיבים האחרים, כמו שינוי ההגדרות של אמצעי הבקרה, הם אופציונליים, כי אתם קובעים את רמת האינטראקציה עם המפה.
התאמה אישית של מפה
יש כמה דרכים לשנות את המראה והפרטים של המפה. לדוגמה:
- אתם יכולים ליצור סמנים מותאמים אישית כדי להחליף את הסיכות שמוגדרות כברירת מחדל במפה.
- לשנות את הצבעים של תכונות המפה כך שישקפו את המותג שלכם.
- אתם יכולים לקבוע אילו נקודות עניין יוצגו (אטרקציות, מסעדות, מקומות לינה וכו') ובאיזו צפיפות, כדי למקד את תשומת הלב של המשתמשים במיקומים שלכם ולהדגיש את הסמלים שיעזרו למשתמשים להגיע למיקום הקרוב ביותר.
יצירת סמנים מותאמים אישית במפה
אתם יכולים להתאים אישית את הסמנים על ידי שינוי צבע ברירת המחדל (כדי להציג אם המיקום פתוח כרגע) או החלפת הסמן בתמונה מותאמת אישית, כמו הלוגו של המותג שלכם. חלונות מידע או חלונות קופצים יכולים לספק למשתמשים מידע נוסף, כמו שעות פתיחה, מספר טלפון או אפילו תמונות. אפשר גם ליצור סמנים מותאמים אישית מסוג רסטר, וקטור, שניתן לגרור אותם ואפילו סמנים מונפשים.
בהמשך מופיעה מפה לדוגמה עם סמנים מותאמים אישית. (קוד המקור מופיע ב נושא 'סמנים מותאמים אישית של ממשק API של JavaScript במפות Google').
למידע מפורט, אפשר לעיין במסמכי העזרה בנושא סמנים ל-JavaScript (אינטרנט), ל-Android ול-iOS.
עיצוב המפה
פלטפורמת מפות Google מאפשרת לכם לעצב את המפה כך שתסייע למשתמשים למצוא את המיקום הקרוב ביותר, להגיע אליו במהירות האפשרית ולחזק את המותג שלכם. לדוגמה, אתם יכולים לשנות את צבעי המפה כך שיתואמו למיתוג שלכם, ולשלוט בנקודות העניין שגלומות במפה כדי לצמצם את הסחות הדעת. ב-Google Maps Platform יש גם כמה תבניות למפות, חלקן מותאמות לתחומים שונים כמו נסיעות, לוגיסטיקה, נדל"ן וקמעונאות.
אפשר ליצור או לשנות סגנונות מפה בדף Map Styles בפרויקט במסוף Google Cloud.
אפשר להרחיב את התמונה כדי לראות אנימציות של יצירת סגנון מפה ושינוי הסגנון במסוף Cloud:
סגנונות מפה של תחומים
האנימציה הזו מציגה סגנונות מפות מוגדרים מראש שמותאמים לתחומים ספציפיים, שבהם אפשר להשתמש. הסגנונות האלה מספקים נקודת התחלה אופטימלית לכל סוג של ענף. לדוגמה, בסגנון המפה 'קמעונאות', מספר נקודות העניין במפה מצטמצם, כדי לאפשר למשתמשים להתמקד במיקומים שלכם ובציוני הדרך שיעזרו להם להגיע למיקום הקרוב ביותר במהירות ובביטחון.
בקרה על נקודות עניין
אנימציה שמגדירה את צבע הסמן של נקודות העניין ומגדילה את הצפיפות של נקודות העניין בסגנון המפה. ככל שהצפיפות גבוהה יותר, כך יופיעו יותר סמנים של נקודות עניין במפה.
לכל סגנון מפה יש מזהה משלו. אחרי שמפרסמים סגנון במסוף Cloud, מפנים למזהה המפה הזה בקוד. כלומר, אפשר לעדכן את סגנון המפה בזמן אמת בלי לבצע רפאקציה לאפליקציה. המראה החדש יופיע באופן אוטומטי באפליקציה הקיימת ויהיה בשימוש בפלטפורמות שונות. בדוגמאות הבאות מוסבר איך מוסיפים מזהה מפה לדף אינטרנט באמצעות Maps JavaScript API.
אם תכללו map_ids אחד או יותר בכתובת ה-URL של הסקריפט, ממשק ה-API של JavaScript במפות Google יהפוך את הסגנונות האלה לזמינים באופן אוטומטי כדי לאפשר עיבוד מהיר יותר של המפה כשאתם קוראים לסגנונות האלה בקוד.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>הקוד הבא מציג מפה עם עיצוב בדף האינטרנט. (לא מוצג רכיב HTML <div id="map"></div> שבו המפה תופיע בדף).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
מידע נוסף על שילוב של עיצוב מפות מבוסס-ענן ב- JavaScript (אינטרנט), ב-Android וב-iOS
שילוב של נתוני מיקום בהתאמה אישית עם פרטי מקום
בקטע הקודם, הצגת המיקומים במפה אינטראקטיבית, התייחסנו לשימוש בפרטי המקום כדי לספק למשתמשים מידע עשיר על המיקומים שלכם, כמו שעות פתיחה, תמונות וביקורות.
כדאי להבין את העלות של שדות נתונים שונים בפרטים של המקום, שמסווגים כנתונים בסיסיים, פרטים ליצירת קשר ואווירה. כדי לנהל את העלויות, אחת מהאסטרטגיות היא לשלב את המידע שכבר יש לכם על המיקומים שלכם עם המידע העדכני (בדרך כלל פרטים בסיסיים ופרטים ליצירת קשר) ממפות Google, כמו סגירה זמנית, שעות פעילות בחגים ודירוגים, תמונות וביקורות של משתמשים. אם כבר יש לכם את פרטי הקשר של החנויות, לא תצטרכו לבקש את השדות האלה מ'פרטי המקום', ותוכלו להגביל את הבקשה לאחזור רק של שדות נתונים בסיסיים או של שדות נתונים של אווירה, בהתאם למה שאתם רוצים להציג.
יכול להיות שיש לכם נתוני מקומות משלכם שאפשר להוסיף לפרטים של המקומות או להשתמש בהם במקום בהם. בcodelab של הכלי לאיתור מיקום ב-full-stack מופיעה דוגמה לשימוש ב-GeoJSON עם מסד נתונים כדי לאחסן ולשלוף את פרטי המיקום שלכם.