סקירה כללית
הפלטפורמה של מפות Google זמינה לאינטרנט (JS, TS), ל-Android ול-iOS, וכוללת גם ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבו לפלטפורמה אחת, אבל יש קישורי תיעוד להטמעה בפלטפורמות אחרות.
כשהמשתמשים רואים את המוצרים באינטרנט, הם רוצים למצוא את הדרך הטובה והנוחה ביותר לקבל את ההזמנה. אנחנו ממליצים להשתמש במדריך ההטמעה של מזהה המוצרים ובטיפים להתאמה אישית בנושא הזה כשילוב האופטימלי של ממשקי ה-API של הפלטפורמה של מפות Google ליצירת חוויית משתמש מעולה לאיתור מוצרים.
בעזרת מדריך הטמעה זה תלמדו איך להציג ללקוחות את המידע המפורט שהם צריכים כדי למצוא את המוצרים שלכם, ולתת להם מסלול הגעה לחנות שבה הפריט נמצא, למשל בנהיגה, ברכיבה על אופניים, בהליכה או בתחבורה ציבורית.
הפעלת ממשקי API
כדי להטמיע את הכלי לאיתור מוצרים, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud. ההיפר-קישורים הבאים מעבירים אתכם למסוף Google Cloud כדי להפעיל כל API בפרויקט שבחרתם:
מידע נוסף על ההגדרה זמין במאמר תחילת השימוש בפלטפורמה של מפות Google.
הקטעים של מדריך ההטמעה
בהמשך נעסוק בנושא הזה ביישומים ובהתאמות האישיות.
- סמל סימן הווי הוא שלב מרכזי בהטמעה.
- סמל הכוכב הוא התאמה אישית אופציונלית אבל מומלצת כדי לשפר את הפתרון.
| שיוך מיקומי חנויות למקומות בפלטפורמה של מפות Google | מתאימים בין מיקום של חנות לבין מיקום בפלטפורמה של מפות Google. | |
| זיהוי המיקום של המשתמש | אפשר להוסיף פונקציונליות של הקלדה לפי שימוש כדי לשפר את חוויית המשתמש בכל הפלטפורמות ולשפר את דיוק הכתובת בעזרת הקשות מינימליות. | |
| זיהוי החנויות הכי קרובות | חשבו את מרחק הנסיעה ואת זמן הנסיעה לכמה נקודות מוצא ויעדים, ואפשר גם לציין אמצעי תחבורה שונים כמו הליכה, נהיגה, תחבורה ציבורית או רכיבה על אופניים. | |
| הצגת פרטי החנות | אפשר להציג מידע עשיר בנתונים על החנויות כדי שמשתמשים יוכלו לנווט אליהן בקלות רבה יותר. | |
| הצגת מסלול ניווט | אפשר לקבל נתוני מסלול מהמוצא ליעד באמצעות אמצעי תחבורה שונים כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית. | |
| שליחת מסלול לנייד | בנוסף להצגת המסלול בדף האינטרנט, אפשר גם לשלוח מסלול לטלפון של משתמש לצורך ניווט באמצעות מפות Google תוך כדי תנועה. | |
| הצגת המיקומים שלכם במפה אינטראקטיבית | אפשר ליצור סמני מפה בהתאמה אישית כדי להבליט את המיקומים שלך, ולעצב את המפה כך שיתאימו לצבעי המותג שלך. הצגה (או הסתרה) של נקודות עניין ספציפיות (POI) במפה כדי לעזור למשתמשים להתמצא בצורה טובה יותר, ולשלוט בצפיפות של נקודות העניין כדי למנוע עומס של המפה. | |
| שילוב נתוני מיקום מותאמים אישית עם פרטי מקום | ניתן לשלב פרטי מיקום מותאמים אישית עם פרטי מקום כדי לספק למשתמשים מערך עשיר של נתונים לקבלת החלטות. |
שיוך מיקומי חנויות למקומות של הפלטפורמה של מפות Google
מזהי המקומות מתקבלים
| בדוגמה זו נעשה שימוש: ב-Places API | זמין גם: JavaScript |
יכול להיות שיש לכם מסד נתונים של החנויות שלכם, שמכיל מידע בסיסי כמו שם המיקום, הכתובת ומספר הטלפון שלו, ואתם רוצים לשייך אותו למקום בפלטפורמה של מפות Google כקבוצה של יעדים סופיים שבהם המשתמשים יכולים לאסוף מוצרים. כדי לאחזר את המידע שיש לפלטפורמה של מפות Google על המקום, כולל הקואורדינטות הגיאוגרפיות ומידע שהמשתמשים תרמו, מאתרים את מזהה המקום שתואם לכל אחת מהחנויות במסד הנתונים שלכם.
תוכלו לבצע קריאה ל
נקודת קצה של מקום ב'חיפוש מקום' ב-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 API | זמין גם: JavaScript |
אם במסד הנתונים של החנויות יש כתובות של רחובות, אבל לא קואורדינטות גיאוגרפיות, תוכלו להשתמש ב-Geocoding API כדי לקבל את קווי האורך והרוחב של הכתובת הזו כדי לחשב אילו חנויות הכי קרובות ללקוח. אתם יכולים לקודד את החנות לקואורדינטות בצד השרת, לאחסן את קווי האורך והרוחב במסד הנתונים ולרענן את החנות לפחות כל 30 יום.
הנה דוגמה לשימוש ב-Geocoding API כדי לקבל את קווי האורך והרוחב של מזהה המקום שהוחזר עבור המשרד של Google בלונדון:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
זיהוי המיקום של המשתמש
| בדוגמה הזו, השתמשנו ב: ספריית ההשלמה האוטומטית של מקומות ב-API JavaScript של מפות Google | זמין גם: Android | iOS |
רכיב מרכזי ב'איתור מוצרים' הוא זיהוי מיקום ההתחלה של המשתמש. תוכל להציע למשתמש שתי אפשרויות לציון המיקום ההתחלתי: הקלדת מקור החיפוש, או מתן הרשאות למיקום גיאוגרפי בדפדפן אינטרנט או לשירותי מיקום בנייד.
טיפול ברשומות שהוקלדו באמצעות השלמה אוטומטית
המשתמשים כיום רגילים לפונקציונליות של ההשלמה האוטומטית מראש בגרסה לצרכן של מפות Google. ניתן לשלב את הפונקציונליות הזו בכל אפליקציה באמצעות הספריות של 'מקומות' בפלטפורמה של מפות Google במכשירים ניידים ובאינטרנט. כשמשתמש מקליד כתובת, ההשלמה האוטומטית משלימה את השאר באמצעות ווידג'טים. אתם יכולים גם לספק פונקציונליות של השלמה אוטומטית באמצעות הספריות של 'מקומות' באופן ישיר.
בדוגמה הבאה, מוסיפים לאתר את הספרייה 'השלמה אוטומטית של מקומות' על ידי הוספת הפרמטר libraries=places לכתובת ה-URL של הסקריפט ב-JavaScript API של מפות Google.
<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 | זמין גם: גיאוגרפי Matrix API |
אחרי שמאתרים את המשתמש, אפשר להשוות אותו למיקומי החנויות שלכם. באמצעות השירות 'מטריצת מרחק', ה-API של מפות Google עוזר למשתמשים לבחור את המיקום שנוח להם להגיע אליו, בהתאם לזמן הנסיעה או למרחק הנסיעה.
הדרך הרגילה לארגן רשימה של מיקומים היא למיין אותם לפי מרחק. לעיתים קרובות המרחק הזה מחושב על ידי שימוש בקו ישר מהמשתמש למיקום, אבל האומדן הזה עלול להיות מטעה. הקו הישר עשוי להיות מעל נהר שאי אפשר להגיע אליו או דרך כבישים עמוסים במועד שבו מיקום אחר יכול להיות נוח יותר. זה חשוב כשיש כמה מיקומים במרחק של קילומטרים ספורים זה מזה.
ה-API של JavaScript במפות, בשירות מטריצת המרחק, לוקח רשימה של מיקומי המוצא והיעד, ומחזיר את הנתונים לא רק את מרחק הנסיעה, אלא גם את משך הזמן ביניהם. במקרה של משתמש, המקור יהיה המקום שבו הוא נמצא כרגע או נקודת ההתחלה הרצויה, והיעדים יהיו אלה של המיקומים. אפשר לציין מקורות ויעדים כצמדי קואורדינטות או ככתובות. כשקוראים לשירות, השירות תואם לכתובות. תוכלו להשתמש בשירות 'מטריצת מרחק' או ב-Maps JavaScript 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 for Android | Places SDK ל-iOS | Places API |
אפשר לשתף פרטים על מקום, כמו פרטים ליצירת קשר, שעות פעילות וסטטוס פתיחה נוכחי, כדי לעזור ללקוחות לבחור את המיקום המועדף עליהם או לסיים את ההזמנה.
אחרי שמפעילים את ה-Maps JavaScript API כדי לקבל פרטי מקום, אפשר לסנן ולעבד את התגובה.
כדי לבקש פרטי מקום, יש צורך במזהה המקום של כל אחד מהמיקומים. ראו קבלת מזהי מקומות על מנת לאחזר את מזהה המקום של המיקום שלכם.
הבקשה הבאה של פרטי מקום מחזירה את הכתובת, הקואורדינטות, האתר, מספר הטלפון, הדירוג ושעות הפעילות של מזהה המקום ב-Google לונדון:
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 Service | זמין גם: שירות האינטרנט של Directions API לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק באמצעות שרת proxy |
כשאתם מציגים למשתמשים מסלול מתוך האתר או האפליקציה, הם לא צריכים לעזוב את האתר ולהסיח את דעתם של משתמשים אחרים או לראות את המתחרים במפה. תוכלו אפילו להציג את פליטות הפחמן שנגרמות על ידי אמצעי תחבורה ספציפי, ולהראות את ההשפעה של כל נסיעה באמצעות קבוצת נתוני פחמן שנמצאת בבעלותכם.
בשירות המסלול יש גם פונקציות שמאפשרות לעבד את התוצאות ולהציג אותן בקלות במפה.
בהמשך מוצגת דוגמה להצגת חלונית של מסלול ההגעה. למידע נוסף על הדוגמה, ראו הצגת הוראות טקסט.
שליחת מסלול לנייד
כדי להקל על המשתמשים להגיע למיקום מסוים, תוכלו לשלוח להם קישור לקבלת מסלול בהודעת טקסט או באימייל. כשהם לוחצים על האפליקציה, אפליקציית מפות Google תופעל בטלפון שלהם אם היא מותקנת, או שהמפות ייטענו בדפדפן האינטרנט של המכשיר שלהם. שתי האפשרויות האלה מאפשרות למשתמש לנווט באמצעות מסלול מפורט, כולל הנחייה קולית, כדי להגיע ליעד.
צריך להשתמש ב
כתובות 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 של מפות 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 מפנה לפונקציה initMap של JavaScript שרצה כשהדף נטען. בכתובת ה-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
});
}
עבור כלי המיקום, מומלץ בדרך כלל להגדיר את המיקום הראשוני, את נקודת המרכז או את הגבולות ואת רמת המרחק מהתצוגה (עד כמה המפה מוגדלת למיקום הזה). רוב הרכיבים האחרים, כמו כוונון של פקדים, הם אופציונליים, מאחר שאתם קובעים את רמת האינטראקציה עם המפה.
התאמה אישית של המפה
יש כמה דרכים לשנות את המראה והפרטים של המפה. לדוגמה, אפשר:
- יוצרים סמנים בהתאמה אישית שמחליפים את הנעצים במפה שמוגדרים כברירת מחדל.
- לשנות את הצבעים של תכונות המפה כך שישקפו את המותג שלכם.
- אפשר לקבוע אילו נקודות עניין יוצגו (אטרקציות, אוכל, לינה וכו') ובאיזו צפיפות. כך תהיה לך אפשרות למקד את תשומת הלב של המשתמשים במיקומים שלך ולהדגיש את ציוני הדרך שעוזרים למשתמשים להגיע למיקום הקרוב ביותר.
יצירת סמני מפה בהתאמה אישית
ניתן להתאים אישית את הסמנים על ידי שינוי צבע ברירת המחדל (שעשוי להראות אם המיקום פתוח כרגע) או החלפת הסמן בתמונה מותאמת אישית, כמו הלוגו של המותג שלך. חלונות מידע או חלונות קופצים יכולים לספק למשתמשים מידע נוסף, כמו שעות פתיחה, מספר טלפון ואפילו תמונות. ניתן גם ליצור סמנים מותאמים אישית שהם רסטר, וקטורים, סמנים ואפילו אנימציה.
בהמשך מוצגת מפה לדוגמה שמשתמשת בסמנים מותאמים אישית. (ראו את קוד המקור במאמר נושא סמנים מותאמים אישית בנושא Maps JavaScript API).
למידע מפורט, ניתן לעיין במסמכי התיעוד של הסמנים עבור JavaScript (אתר), Android ו-iOS.
עיצוב המפה
הפלטפורמה של מפות Google מאפשרת לעצב את המפה באופן שעוזר למשתמשים למצוא את המיקום הקרוב ביותר, להגיע לשם במהירות האפשרית ולחזק את המותג. לדוגמה, אפשר לשנות את צבעי המפה כך שיתאימו למיתוג שלך, ואפשר לצמצם את הסחות הדעת במפה על ידי שליטה בנקודות העניין הגלויות למשתמשים. הפלטפורמה של מפות Google מספקת גם כמה תבניות למתחילים של מפות, שחלקן מותאמות לתחומים שונים כמו נסיעות, לוגיסטיקה, נדל"ן וקמעונאות.
ניתן לך ליצור או לשנות סגנונות מפה בדף סגנונות מפה במסוף 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 עם מסד נתונים כדי לאחסן ולאחזר את פרטי המיקום שלכם.