סקירה כללית
Google Maps Platform זמינה לאינטרנט (JS, TS), ל-Android ול-iOS, והיא מציעה גם ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבו לפלטפורמה אחת, אבל יש קישורים לתיעוד להטמעה בפלטפורמות אחרות.
כשמשתמשים רואים את המוצרים שלכם באינטרנט, הם רוצים למצוא את הדרך הכי טובה ונוחה לקבל את ההזמנה שלהם. מדריך ההטמעה של איתור המוצרים וטיפים להתאמה אישית הם השילוב האופטימלי של ממשקי Google Maps Platform API שמומלץ על ידי Google כדי ליצור חוויית משתמש מעולה לאיתור מוצרים.
המדריך הזה יעזור לכם להטמיע את התכונה כך שהלקוחות יוכלו לראות את המידע המפורט שהם צריכים כדי למצוא את המוצרים שלכם, ולקבל הנחיות הגעה לחנות שבה המוצר זמין, בין אם הם נוהגים, רוכבים על אופניים, הולכים ברגל או נוסעים בתחבורה ציבורית.
הפעלת ממשקי ה-API
כדי להטמיע את הכלי לאיתור מוצרים, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud. הקישורים הבאים יעבירו אתכם למסוף Google Cloud כדי להפעיל כל API בפרויקט שבחרתם:
מידע נוסף על ההגדרה זמין במאמר תחילת העבודה עם Google Maps Platform.
הסעיפים במדריך ההטמעה
במאמר הזה נסביר על ההטמעות וההתאמות האישיות הבאות:
- סמל סימן הוי הוא שלב מרכזי בהטמעה.
- סמל הכוכב הוא התאמה אישית אופציונלית אך מומלצת לשיפור הפתרון.
| שיוך של מיקומי חנויות למקומות בפלטפורמה של מפות Google | התאמה בין מיקום של חנות לבין מקום ב-Google Maps Platform. | |
| זיהוי המיקום של המשתמש | מוסיפים פונקציונליות של הקלדה תוך כדי תנועה כדי לשפר את חוויית המשתמש בכל הפלטפורמות ולשפר את הדיוק של הכתובת עם מינימום הקשות. | |
| זיהוי החנויות הקרובות ביותר | חישוב מרחק הנסיעה וזמן הנסיעה למספר נקודות מוצא ויעדים, עם אפשרות לציין אמצעי תחבורה שונים כמו הליכה, נהיגה, תחבורה ציבורית או רכיבה על אופניים. | |
| הצגת פרטי החנות | להציג מידע עשיר בנתונים על החנויות שלכם, כדי שהמשתמשים יוכלו לנווט אליהן בקלות רבה יותר. | |
| לבקש ממנה שתיתן לכם מסלולים למקומות שאתם רוצים להגיע אליהם | קבלת נתוני מסלול מנקודת המוצא ליעד באמצעות אמצעי תחבורה שונים, כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית. | |
| שליחת מסלול לנייד | בנוסף להצגת הוראות הגעה בדף האינטרנט, אפשר גם לשלוח הוראות הגעה לטלפון של המשתמש כדי לנווט באמצעות מפות Google בדרכים. | |
| הצגת המיקומים שלכם במפה אינטראקטיבית | כדי שהמיקומים שלכם יבלטו, אתם יכולים ליצור סמני מיקום מותאמים אישית במפה בהתאמה אישית ולעצב את המפה כך שתתאים לצבעי המותג שלכם. הצגה (או הסתרה) של נקודות עניין ספציפיות במפה כדי לעזור למשתמשים להתמצא טוב יותר, ושליטה בצפיפות של נקודות העניין כדי למנוע עומס במפה. | |
| שילוב של נתוני מיקום מותאמים אישית עם Place Details | אתם יכולים לשלב את פרטי המיקום המותאמים אישית שלכם עם Place Details כדי לספק למשתמשים מערך עשיר של נתונים שיעזרו להם לקבל החלטות. |
שיוך של מיקומי חנויות למקומות ב-Google Maps Platform
קבלת מזהי מקומות
| בדוגמה הזו נעשה שימוש ב: Places API (חדש) | אפשרות נוספת: JavaScript |
יכול להיות שיש לכם מסד נתונים של החנויות עם מידע בסיסי כמו שם המיקום, הכתובת ומספר הטלפון, ואתם רוצים לשייך אותו למקום בפלטפורמה של מפות Google כקבוצה של יעדים סופיים שבהם המשתמשים יכולים לאסוף מוצרים. כדי לאחזר את המידע שיש ל-Google Maps Platform על המקום, כולל קואורדינטות גיאוגרפיות ומידע שנוסף על ידי משתמשים, צריך למצוא את מזהה המקום שמתאים לכל אחת מהחנויות במסד הנתונים.
אפשר לבצע קריאה ל
נקודת הקצה Text Search (New) ב-Places API (New) ולבקש רק את השדה places.id במסכת השדות (מה שמפעיל את Text Search Essentials IDs Only SKU).
בדוגמה הבאה מוצגת בקשה למזהה המקום של המשרד של Google בלונדון:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'אתם יכולים לאחסן את מזהה המקום הזה במסד הנתונים עם שאר נתוני החנות, ולהשתמש בו כדרך יעילה לבקשת מידע על החנות. בהמשך מפורטות הוראות לשימוש במזהה המקום כדי לבצע המרת כתובות לקואורדינטות (geocoding), לאחזר את Place Details ולבקש הוראות הגעה למקום.
המרת כתובות לקואורדינטות של המיקומים
| בדוגמה הזו נעשה שימוש ב: 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
```
זיהוי המיקום של המשתמש
| בדוגמה הזו נעשה שימוש ב: השלמה אוטומטית למקומות ב-Maps JavaScript API | זמינים גם: Android | iOS |
מרכיב מרכזי בכלי לאיתור מוצרים הוא זיהוי מיקום ההתחלה של המשתמש. אתם יכולים להציע למשתמש שתי אפשרויות לציון מיקום המוצא: הקלדת המיקום שממנו מתחיל החיפוש, או מתן הרשאות למיקום הגיאוגרפי של דפדפן האינטרנט או לשירותי המיקום בנייד.
טיפול בערכים שהוקלדו באמצעות השלמה אוטומטית
המשתמשים של היום רגילים לתכונת ההשלמה האוטומטית של הקלדה בגרסה לצרכן של מפות Google. אפשר לשלב את הפונקציונליות הזו בכל אפליקציה באמצעות ספריות המקומות בפלטפורמה של מפות Google במכשירים ניידים ובאינטרנט. כשמשתמש מקליד כתובת, ההשלמה האוטומטית ממלאת את השאר באמצעות ווידג'טים. אפשר גם לספק פונקציונליות משלכם של השלמה אוטומטית באמצעות Place Autocomplete Data API ישירות.
בדוגמה הבאה, מוסיפים את ספריות המקומות והסמנים לאתר על ידי הוספת הפרמטר libraries=places,marker לכתובת ה-URL של הסקריפט של Maps JavaScript API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>בשלב הבא, מוסיפים לדף רכיב container שאליו יצורף הווידג'ט PlaceAutocompleteElement:
<div id="autocomplete-container"></div>לבסוף, מאתחלים את הווידג'ט PlaceAutocompleteElement ומצרפים אותו למאגר. הגבלת התחזיות של השלמה אוטומטית של מקומות באמצעות includedPrimaryTypes: ["geocode"] מגדירה את הווידג'ט לקבלת כתובות רחוב, שכונות, ערים ומיקודים, כך שהמשתמשים יכולים להזין כל רמת פירוט כדי לתאר את המקור שלהם. כשמשתמש בוחר תחזית, מופעל האירוע gmp-select ואפשר לקרוא לפונקציה place.fetchFields() כדי לבקש את השדה location שמכיל את קווי הרוחב והאורך של המיקום שממנו המשתמש מגיע. תשתמשו בקואורדינטות האלה במפה כדי לציין את הקשר בין המיקומים שלכם לבין המיקום המקורי.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
בדוגמה הזו, אחרי שהמשתמש בוחר את הכתובת, מתחילה הפונקציה searchFromOrigin(). הפונקציה הזו מקבלת את המיקום של התוצאה התואמת, שהוא מיקום המשתמש, ואז מחפשת את המיקומים הקרובים ביותר על סמך הקואורדינטות האלה כנקודת המוצא, כפי שמוסבר בקטע זיהוי החנויות הקרובות ביותר.
כאן אפשר להרחיב את הקטע כדי לראות סרטוני הדרכה שמסבירים איך להוסיף השלמה אוטומטית של מקומות לאפליקציה:
אתר
אפליקציות ל-Android
אפליקציות ל-iOS
שימוש במיקום גיאוגרפי בדפדפן
כדי לבקש ולטפל במיקום גיאוגרפי בדפדפן HTML5, אפשר לקרוא איך מפעילים חלון שימוש במיקום שלי:
זיהוי החנויות הכי קרובות
| בדוגמה הזו נעשה שימוש ב: Routes Library, Maps JavaScript API | אפשר גם להשתמש ב: Routes API |
אחרי שתדעו את המיקום של המשתמש, תוכלו להשוות אותו למיקומי החנויות שלכם. אם משתמשים ב-RouteMatrix
class בספריית המסלולים, Maps JavaScript API (או בתכונה Compute Route
Matrix ב-Routes API), המשתמשים יכולים לבחור את המיקום שהכי נוח להם לפי זמן הנסיעה או המרחק בכביש.
הדרך הרגילה לארגן רשימה של מיקומים היא למיין אותם לפי מרחק. לעתים קרובות המרחק הזה מחושב פשוט באמצעות קו ישר מהמשתמש למיקום, אבל זה יכול להיות מטעה. יכול להיות שהקו הישר עובר מעל נהר שאי אפשר לחצות או דרך כבישים עמוסים בשעה שבה מיקום אחר יכול להיות נוח יותר. ההגדרה הזו חשובה אם יש לכם כמה מיקומים במרחק של כמה קילומטרים זה מזה.
השיטה RouteMatrix.computeRouteMatrix פועלת על ידי קבלת רשימה של מיקומי מוצא ויעד, והיא מחזירה לא רק את מרחק הנסיעה אלא גם את זמן הנסיעה ביניהם. במקרה של משתמש, נקודת המוצא תהיה המיקום הנוכחי שלו או נקודת ההתחלה הרצויה, והיעדים יהיו המיקומים. אפשר לציין את נקודות המוצא והיעד כזוגות של קואורדינטות, כמזהי מקומות או ככתובות. אפשר להשתמש ב-RouteMatrix.computeRouteMatrix עם העדפות ניתוב כמו TRAFFIC_AWARE כדי להציג תוצאות על סמך זמני נסיעה נוכחיים או עתידיים.
בדוגמה הבאה מוצגת קריאה ל-RouteMatrix.computeRouteMatrix ב-Routes Library, Maps JavaScript API, שבה מצוין המקור של המשתמש ועד 25 מיקומי חנויות בכל פעם.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } 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(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
לכל מיקום בקרבת מקום, אפשר להציג את סטטוס המלאי של המוצר על סמך מסד הנתונים של המלאי.
הצגת פרטי החנות
| בדוגמה הזו נעשה שימוש ב: ספריית מקומות, Maps JavaScript API | אפשר גם להשתמש ב: Places SDK ל-Android | Places SDK ל-iOS | Places API (חדש) |
אתם יכולים לשתף Place Details עשירים, כמו פרטים ליצירת קשר, שעות פעילות ומצב הפתיחה הנוכחי, כדי לעזור ללקוחות לבחור את המיקום המועדף עליהם או לסיים את ההזמנה.
אחרי שמבצעים קריאה ל-Maps JavaScript API כדי לקבל Place Details, אפשר לסנן את התגובה ולעבד אותה.
כדי לבקש Place Details, תצטרכו את מזהה המקום של כל אחד מהמיקומים שלכם. במאמר איך מקבלים מזהי מקומות מוסבר איך לאחזר את מזהה המקום של המיקום שלכם.
בדוגמה הבאה של בקשה לקבלת פרטי מקום נעשה שימוש בPlace class כדי להחזיר את השם, הקואורדינטות, האתר, מספר הטלפון, הדירוג ושעות הפעילות של המקום עם מזהה המקום Google London:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
שיפור הכלי לאיתור מוצרים
בהתאם לצרכים של העסק או של המשתמשים, אפשר לשפר עוד יותר את חוויית המשתמש.
לבקש ממנה שתיתן לכם מסלול ניווט
| בדוגמה הזו נעשה שימוש ב: Routes Library, Maps JavaScript API | אפשרות נוספת: Routes API שירות אינטרנט לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק דרך שרת proxy |
כשאתם מציגים למשתמשים הנחיות הגעה מתוך האתר או האפליקציות שלכם, הם לא צריכים לצאת מהאתר ולהיות מוסחים עם דפים אחרים או לראות מתחרים במפה. באמצעות Routes API, אפשר גם לבקש מסלולים ידידותיים לסביבה כדי להעריך את צריכת הדלק או האנרגיה ולהציג את ההשפעה הסביבתית של הנסיעה.
בנוסף, ל-Routeclass בספריית המסלולים, Maps JavaScript API יש שיטות כמו createPolylines() ו-createWaypointAdvancedMarkers() שמאפשרות לעבד את התוצאות ולהציג אותן במפה.
בדוגמה הבאה מוצגת בקשה להצגת מסלול במפה. מידע נוסף על הדוגמה זמין במאמר בנושא קבלת מסלול.
שליחת מסלול לנייד
כדי להקל עוד יותר על המשתמשים להגיע למיקום מסוים, אתם יכולים לשלוח להם בהודעת טקסט או באימייל קישור להוראות הגעה. כשהם ילחצו על הקישור, אפליקציית מפות Google תיפתח בטלפון שלהם אם היא מותקנת, או שכתובת האתר maps.google.com תיטען בדפדפן האינטרנט במכשיר שלהם. בשתי החוויות האלה, המשתמש יכול להשתמש בניווט מסלול מפורט, כולל הנחיה קולית, כדי להגיע ליעד.
משתמשים ב
כתובות URL של מפות כדי ליצור כתובת 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 של מפות מספקות אפשרויות נוספות של פרמטרים לשאילתות, כמו travelmode ו-dir_action=navigate, כדי להפעיל את ההוראות עם ניווט מופעל.
הקישור הזה שאפשר ללחוץ עליו, שהוא הרחבה של כתובת ה-URL מהדוגמה הקודמת, מגדיר את origin כאצטדיון כדורגל בלונדון ומשתמש ב-travelmode=transit כדי לספק מסלול לתחבורה ציבורית ליעד.
כדי לשלוח הודעת טקסט או אימייל עם כתובת ה-URL הזו, אנחנו ממליצים כרגע להשתמש באפליקציית צד שלישי כמו twilio. אם אתם משתמשים ב-App Engine, אתם יכולים להשתמש בחברות צד שלישי כדי לשלוח הודעות SMS או אימייל. מידע נוסף זמין במאמר בנושא שליחת הודעות באמצעות שירותים של צד שלישי.
הצגת המיקומים שלכם במפה אינטראקטיבית
שימוש במפות דינמיות
| בדוגמה הזו נעשה שימוש ב: Maps JavaScript API | זמינים גם: Android | iOS |
כלי האיתור הוא חלק חשוב בחוויית שימוש. עם זאת, יכול להיות שבאתרים מסוימים לא תהיה אפילו מפה פשוטה, ולכן המשתמשים יצטרכו לצאת מהאתר או מהאפליקציה כדי למצוא מיקום בקרבת מקום. המשמעות היא שחוויית המשתמש לא אופטימלית, כי המשתמשים צריכים לעבור בין דפים כדי לקבל את המידע שהם צריכים. במקום זאת, אפשר לשפר את חוויית המשתמש על ידי הטמעה של מפות באפליקציות והתאמה שלהן.
אפשר להוסיף לדף מפה דינמית – כלומר מפה שהמשתמשים יכולים להזיז, להגדיל ולהקטין אותה, ולקבל פרטים על מיקומים שונים ונקודות עניין – באמצעות כמה שורות קוד.
קודם צריך לכלול את Maps JavaScript API בדף.
כדי לעשות זאת, מקשרים את הסקריפט הבא לדף ה-HTML, כולל libraries=marker, כדי שתוכלו להוסיף סמנים מתקדמים למפה.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>כתובת ה-URL מפנה לפונקציית JavaScript initMap שמופעלת כשהדף נטען. בכתובת ה-URL אפשר גם להגדיר את השפה או האזור של המפה כדי לוודא שהיא מעוצבת בצורה הנכונה למדינה הספציפית שמטרגטים. הגדרת אזור גם מבטיחה שההתנהגות של אפליקציות שמשמשות מחוץ לארצות הברית תהיה מוטה לכיוון האזור שהגדרתם. צפו בפרטי הכיסוי של Google Maps Platform לקבלת רשימה מלאה של השפות והאזורים הנתמכים, וקראו מידע נוסף על השימוש בפרמטר 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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
בדרך כלל, כשמגדירים כלי לאיתור מיקום, רוצים להגדיר את המיקום הראשוני, את נקודת המרכז או את הגבולות ואת רמת הזום (עד כמה המפה מוגדלת במיקום הזה). רוב הרכיבים האחרים, כמו התאמה אישית של אמצעי הבקרה, הם אופציונליים, כי אתם קובעים את רמת האינטראקציה עם המפה.
התאמה אישית של מפה
יש כמה דרכים לשנות את המראה והפרטים של המפה. לדוגמה, אפשר:
- אתם יכולים ליצור סמנים מותאמים אישית משלכם כדי להחליף את סיכות המפה שמוגדרות כברירת מחדל.
- לשנות את הצבעים של התכונות במפה כדי לשקף את המותג שלכם.
- שליטה בנקודות העניין שמוצגות (אטרקציות, אוכל, לינה וכו') ובצפיפות שלהן, כדי למקד את תשומת הלב של המשתמשים במיקומים שלכם תוך הדגשת ציוני הדרך שעוזרים למשתמשים להגיע למיקום הקרוב ביותר.
יצירת סמני מפה בהתאמה אישית
אפשר להתאים אישית את הסמנים המתקדמים על ידי שינוי הרקע, הגבול או צבע הגליף של הסיכה שמוגדרים כברירת מחדל (לדוגמה, כדי לציין אם מיקום מסוים פתוח כרגע), החלפת הסמן בתמונה גרפית מותאמת אישית כמו הלוגו של המותג, או יצירת סמני HTML ו-CSS מותאמים אישית. חלונות מידע או חלונות קופצים יכולים לספק למשתמשים מידע נוסף, כמו שעות פתיחה, מספר טלפון או תמונות.
בהמשך מוצגת דוגמה למפה שבה נעשה שימוש בסמנים גרפיים בהתאמה אישית. (אפשר לראות את קוד המקור ב מאמר בנושא סמנים גרפיים בהתאמה אישית ב-Maps JavaScript API).
מידע מפורט זמין במסמכי התיעוד בנושא סמנים מתקדמים ל-JavaScript (אינטרנט), Android ו-iOS.
התאמה של סגנון המפה
בעזרת Google Maps Platform אפשר לעצב את המפה כך שהמשתמשים יוכלו למצוא את המיקום הקרוב ביותר, להגיע אליו הכי מהר שאפשר ולחזק את המותג שלכם. לדוגמה, אתם יכולים לשנות את צבעי המפה כך שיתאימו למיתוג שלכם, ולהפחית את ההסחות במפה על ידי שליטה בנקודות העניין שגלויות למשתמשים. Google Maps Platform מספקת גם מספר תבניות התחלתיות למפות, שחלקן מותאמות לתעשיות שונות, כמו תיירות, לוגיסטיקה, נדל"ן וקמעונאות.
אפשר ליצור או לשנות סגנונות מפות במסוף Google Cloud בדף Map Styles בפרויקט.
כדי לראות אנימציות של יצירת סגנון מפה ועיצוב שלה ב-מסוף Cloud, אפשר להרחיב את הקטע:
סגנונות מפה לפי ענף
אנימציה שמציגה סגנונות מפה מוגדרים מראש שספציפיים לתעשייה שאפשר להשתמש בהם. הסגנונות האלה מספקים נקודת התחלה אופטימלית לכל סוג של תעשייה. לדוגמה, סגנון המפה 'קמעונאות' מצמצם את מספר נקודות העניין במפה, כדי שהמשתמשים יוכלו להתמקד במיקומים שלכם ובנקודות הציון שיעזרו להם להגיע למיקום הקרוב ביותר במהירות ובביטחון.
אמצעי בקרה של נקודות עניין
באנימציה הזו מוגדר צבע הסמן לנקודות עניין, וצפיפות נקודות העניין בסגנון המפה גדלה. ככל שהצפיפות גבוהה יותר, כך יותר סמני נקודות עניין מופיעים במפה.
לכל סגנון מפה יש מזהה משלו. אחרי שמפרסמים סגנון ב-Cloud Console, מציינים את מזהה המפה בקוד – כלומר, אפשר לעדכן סגנון מפה בזמן אמת בלי לשנות את מבנה האפליקציה. המראה החדש יופיע אוטומטית באפליקציה הקיימת וישמש בכל הפלטפורמות. בדוגמאות הבאות אפשר לראות איך מוסיפים מזהה מפה לדף אינטרנט באמצעות Maps JavaScript API.
אם כוללים map_ids בכתובת ה-URL של הסקריפט, Maps JavaScript API הופך את הסגנונות האלה לזמינים באופן אוטומטי, כדי שהמפה תוצג מהר יותר כשקוראים לסגנונות האלה בקוד.
<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.
שילוב של נתוני מיקום בהתאמה אישית עם Place Details
בקטע הקודם הצגת המיקומים שלכם במפה אינטראקטיבית מתואר איך אפשר להשתמש ב-Place Details כדי לספק למשתמשים מידע מפורט על המיקומים שלכם, כמו שעות פתיחה, תמונות וביקורות.
כדאי להבין את רמות המחירים ומספרי המלאי (SKU) של שדות נתונים שונים ב-Places API (חדש). כדי לנהל את העלויות, אפשר לשלב את המידע שכבר יש לכם על המיקומים עם המידע העדכני ממפות Google, כמו סגירה זמנית, שעות פעילות בחגים, דירוגים, תמונות וביקורות של משתמשים. אם כבר יש לכם את הפרטים ליצירת קשר של החנויות, לא תצטרכו לבקש את השדות האלה מ-Place Details, ותוכלו להגביל את מסכת השדות כך שיוחזרו רק השדות שאתם רוצים להציג.
יכול להיות שיש לכם נתונים משלכם על מקומות, שתוכלו להשתמש בהם בנוסף ל-Place Details או במקום Place Details. ב-codelab של כלי לאיתור מיקום שפועל בכל השלבים של פיתוח התוכנה יש דוגמה לשימוש ב-GeoJSON עם מסד נתונים כדי לאחסן ולאחזר פרטים משלכם לגבי מיקום.