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