סקירה
הפלטפורמה של מפות Google זמינה לאינטרנט (JS, TS), ל-Android ול-iOS, וכוללת גם ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבו לפלטפורמה אחת, אבל קישורים למסמכי תיעוד סופקו להטמעה בפלטפורמות אחרות.
כשהמשתמשים רואים את המוצרים שלכם באינטרנט, הם רוצים למצוא את הדרך הטובה והנוחה ביותר לקבל את ההזמנה. המדריך להטמעה של מאתר המוצרים והטיפים להתאמה אישית שאנחנו מספקים בנושא הזה הם השילוב האופטימלי של ממשקי ה-API של הפלטפורמה של מפות Google ליצירת חוויית משתמש מעולה של מאתר מוצרים.
בעזרת מדריך ההטמעה הזה תוכלו לעזור ללקוחות לראות איזה מידע מפורט הם צריכים כדי למצוא את המוצרים שלכם, ולתת להם הוראות הגעה לחנות שבה הפריט נמצא: נהיגה, רכיבה על אופניים, הליכה או תחבורה ציבורית.
הפעלת ממשקי API
כדי להטמיע את מאתר המוצרים, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud. ההיפר-קישורים הבאים שולחים אתכם למסוף Google Cloud כדי להפעיל כל API בפרויקט שבחרתם:
מידע נוסף על ההגדרה זמין במאמר תחילת העבודה עם הפלטפורמה של מפות Google.
הקטעים של מדריך ההטמעה
בהמשך מפורטים היישומים וההתאמות האישיות שנעסוק בהם בנושא זה.
- סמל סימן הווי הוא שלב מרכזי בהטמעה.
- סמל הכוכב הוא התאמה אישית אופציונלית אבל מומלצת כדי לשפר את הפתרון.
| שיוך של מיקומי חנויות למקומות בפלטפורמה של מפות Google | צריך להתאים בין מיקום של חנות לבין מקום בפלטפורמה של מפות Google. | |
| זיהוי המיקום של המשתמש | אפשר להוסיף פונקציונליות של 'הקלדה בזמן השימוש' כדי לשפר את חוויית המשתמש בכל הפלטפורמות ולשפר את הדיוק של הכתובות בהקשות מינימליות. | |
| זיהוי החנויות הקרובות ביותר | אפשר לחשב את מרחק הנסיעה ואת זמן הנסיעה במספר מקורות ויעדים, עם ציון של אמצעי תחבורה שונים כמו הליכה, נהיגה, תחבורה ציבורית או רכיבה על אופניים. | |
| הצגת פרטי החנות | הצגת מידע עשיר בנתונים על החנויות שלך, כדי שהמשתמשים יוכלו לנווט אליהן בקלות רבה יותר. | |
| קבלת מסלול ניווט | אפשר לקבל נתוני מסלול מנקודת המוצא ליעד באמצעות אמצעי תחבורה שונים כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית. | |
| שליחת מסלול לנייד | בנוסף להצגת המסלול בדף האינטרנט שלך, ניתן גם לשלוח מסלול לטלפון של המשתמש לצורך ניווט באמצעות מפות Google כשהוא בדרכים. | |
| הצגת המיקומים שלכם במפה אינטראקטיבית | יצירת סמני מפה מותאמים אישית כדי להבליט את המיקומים שלך, ועצב את המפה כך שתתאים לצבעי המותג שלך. הצגה (או הסתרה) של נקודות עניין (POI) ספציפיות במפה כדי לעזור למשתמשים להתמצא בצורה טובה יותר, ולשלוט בצפיפות של נקודות העניין כדי למנוע עומס במפה. | |
| שילוב נתוני מיקום מותאמים אישית עם פרטי מקום | כדאי לשלב פרטי מיקום מותאמים אישית עם פרטי מקום כדי לספק למשתמשים מגוון עשיר של נתונים לקבלת החלטות. |
שיוך של מיקומי חנויות למקומות בפלטפורמה של מפות Google
אחזור מזהי מקומות
| בדוגמה הזו: Place API | זמין גם: JavaScript |
יכול להיות שיש לכם מסד נתונים של החנויות שלכם עם מידע בסיסי כמו שם המיקום, הכתובת ומספר הטלפון שלו, ואתם רוצים לשייך אותו למקום בפלטפורמה של מפות Google כקבוצה של יעדים סופיים שבהם המשתמשים יכולים לאסוף מוצרים. כדי לאחזר את המידע שיש בפלטפורמה של מפות Google לגבי המקום, כולל קואורדינטות גיאוגרפיות ומידע שמשתמשים מוסיפים, מאתרים את מזהה המקום שתואם לכל אחת מהחנויות במסד הנתונים.
אפשר לבצע קריאה ל
נקודת הקצה של חיפוש מקום ב-Place Search 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 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>לסיום, צריך לאתחל את שירות ההשלמה האוטומטית ולקשר אותו לתיבת הטקסט בעלת השם. הגבלת החיזויים של ההשלמה האוטומטית המקום לסוגים שונים של קואורדינטות (geocoding) מגדירה את השדה להזנת קלט לקבלת כתובות של רחובות, שכונות, ערים ומיקודים, כך שהמשתמשים יוכלו להזין כל רמת ספציפיות של ספציפיות כדי לתאר את המקור שלהם. חשוב לבקש את השדה 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:
זיהוי החנויות הקרובות ביותר
| בדוגמה הזו: Distance Matrix Service, Maps JavaScript API | זמין גם: Distance Matrix API |
אחרי שתזהו את מיקום המשתמש, תוכלו להשוות אותו למיקום של מיקומי החנויות שלכם. באמצעות השירות 'מטריצת מרחקים', Maps JavaScript API עוזר למשתמשים לבחור את המיקום הנוח להם ביותר לפי זמן נסיעה או מרחק הנסיעה.
הדרך הרגילה לארגון רשימה של מיקומים היא למיין אותם לפי מרחק. לעיתים קרובות המרחק הזה מחושב על ידי שימוש בקו הישר מהמשתמש למיקום, אבל זה עלול להטעות. הקו הישר יכול להיות מעל נהר שאי אפשר לעבור או דרך כבישים עמוסים, בזמן שמתאים יותר למיקום אחר. זה חשוב כשיש כמה מיקומים שנמצאים במרחק כמה קילומטרים זה מזה.
השירות 'מטריצת מרחקים', Maps JavaScript API, עובד על ידי הצגת רשימה של מיקומי המוצא והיעד וחזרה לא רק של מרחק הנסיעה, אלא גם של הזמן ביניהם. במקרה של המשתמש, המוצא יהיה המקום שבו הוא נמצא כרגע או נקודת ההתחלה שהוא רוצה, והיעדים יהיו אלה של המיקומים. אפשר לציין מקורות ויעדים כצמדי קואורדינטות או ככתובות. כשקוראים לשירות, השירות תואם לכתובות. תוכלו להשתמש ב-Destination Matrix Service וב-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;
});
}
בכל מיקום קרוב תוכלו להציג את סטטוס המלאי של המוצר על סמך מסד נתוני המלאי שלכם.
הצגת פרטי החנות
| בדוגמה הזו נעשה שימוש ב: Places Library (ספריית מקומות), Maps JavaScript API | זמין גם: Places SDK ל-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);
}
}
שיפור של מאתר המוצרים
תוכלו לשפר עוד יותר את חוויית המשתמש בהתאם לצרכים של העסק או של המשתמשים.
מספקת מסלול ניווט
| בדוגמה הזו: שירות המסלול של API JavaScript במפות Google | זמין גם: שירות אינטרנט של Directions API לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק דרך שרת proxy |
כשאתם מציגים למשתמשים הוראות הגעה מתוך האתר או האפליקציה שלכם, המשתמשים לא צריכים לצאת מהאתר ודעתם מוסחת בדפים אחרים או לראות מתחרים במפה. תוכלו אפילו להציג את פליטות הפחמן במצב נסיעה ספציפי ולהראות את ההשפעה של כל נסיעה מסוימת באמצעות קבוצת נתוני פחמן שבבעלותכם.
לשירות Directions Service יש גם פונקציות שמאפשרות לעבד את התוצאות ולהציג אותן בקלות במפה.
הדוגמה הבאה היא של הצגת חלונית מסלול. למידע נוסף על הדוגמה, ראו הצגת הנחיות טקסט.
המסלול לנייד נשלח
כדי להקל על המשתמשים להגיע למיקום מסוים, תוכלו לשלוח להם קישור מסלול בהודעת טקסט או באימייל. כשהוא ילחץ עליו, אפליקציית מפות 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 של מפות
מספקות אפשרויות נוספות לפרמטרים של שאילתה, כמו travelmode ו-dir_action=navigate כדי להפעיל את המסלול כשהניווט מופעל.
הקישור הזה קליקבילי, שמרחיב את כתובת ה-URL לדוגמה, מגדיר את origin כאצטדיון כדורגל בלונדון, ומתבסס על travelmode=transit כדי לספק מסלול לתחבורה הציבורית ליעד.
כדי לשלוח הודעת טקסט או אימייל עם כתובת ה-URL הזו, מומלץ כרגע להשתמש באפליקציית צד שלישי כמו twilio. אם משתמשים ב-App Engine, אפשר להיעזר בחברות של צד שלישי כדי לשלוח הודעות SMS או אימיילים. למידע נוסף, ראו שליחת הודעות באמצעות שירותי צד שלישי.
הצגת המיקומים שלך במפה אינטראקטיבית
שימוש במפות דינמיות
| בדוגמה הזו נעשה שימוש ב: Maps JavaScript API | זמין גם: Android | iOS |
כלי העזר הוא חלק חשוב בחוויית המשתמש. עם זאת, באתרים מסוימים אין אפילו מפה פשוטה, ולכן המשתמשים צריכים לצאת מהאתר או מהאפליקציה כדי למצוא מיקום קרוב. המשמעות היא שחוויית השימוש לא אופטימלית למשתמשים שחייבים לעבור בין דפים כדי לקבל את המידע שהם צריכים. במקום זאת, תוכלו לשפר את החוויה על ידי הטמעה והתאמה אישית של המפות באפליקציות שלכם.
ניתן להוסיף מפה דינמית לדף - כלומר, מפה שהמשתמשים יכולים לנוע בה, להגדיל או להקטין את התצוגה ולקבל פרטים על מיקומים ונקודות עניין שונים - באמצעות כמה שורות קוד.
קודם כל צריך לכלול בדף את ממשק ה-API של JavaScript של מפות Google. כדי לעשות זאת, מקשרים את הסקריפט הבא בדף ה-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.
בשלב הבא, נדרשת div HTML כדי למקם את המפה בדף.
זהו המקום שבו תוצג המפה.
<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, מפנים למזהה המפה הזה בקוד, כך שאפשר לעדכן סגנון מפה בזמן אמת בלי לשנות את הקוד (Refactoring) של האפליקציה. המראה החדש יופיע באפליקציה הקיימת באופן אוטומטי וישמש בכל הפלטפורמות. הדוגמאות הבאות מראות איך להוסיף מזהה מפה לדף אינטרנט באמצעות Maps JavaScript API.
כשכוללים לפחות map_ids אחד בכתובת ה-URL של הסקריפט, כשקוראים לסגנונות האלה בקוד, הסגנונות האלה זמינים באופן אוטומטי כדי לאפשר רינדור מפה מהיר יותר.
<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>
הקוד הבא מציג מפה מעוצבת בדף האינטרנט. (לא מוצג רכיב <div id="map"></div> HTML שבו המפה תופיע בדף).
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});
בקישורים הבאים תוכלו לקרוא מידע נוסף על שילוב עיצוב מפות מבוסס-ענן ב- JavaScript (באינטרנט), ב-Android וב-iOS.
שילוב נתוני מיקום מותאמים אישית עם פרטי מקום
בקטע הקודם, הצגת המיקומים שלכם במפה אינטראקטיבית, דיברנו על השימוש בפרטי מקום כדי לספק למשתמשים מידע רב על המיקומים שלכם, כמו שעות פתיחה, תמונות וביקורות.
כדאי להבין את העלות של שדות נתונים שונים בפרטי המקום, שמסווגים כנתונים בסיסיים, נתונים ליצירת קשר ונתוני אטמוספירה. לניהול העלויות, שיטה אחת היא לשלב את המידע שכבר יש לכם על המיקומים עם המידע החדש (בדרך כלל נתונים בסיסיים ונתונים ליצירת קשר) ממפות Google, כמו סגירה זמנית, שעות פתיחה בחגים ודירוגי משתמשים, תמונות וביקורות. אם כבר יש לכם את הפרטים ליצירת קשר עם החנויות שלכם, לא תצטרכו לבקש את השדות האלה מ'פרטי המקום', ויכול להיות שתוכלו להגביל את הבקשה לאחזור רק השדות הבסיסיים או נתוני האטמוספרה, בהתאם למה שרוצים להציג.
יכול להיות שיש לכם נתוני מקום משלכם שאפשר להוסיף במקום פרטי המקום, או להשתמש בהם. בעזרת Codelab של מאתר סטאק מלא אפשר לראות דוגמה לשימוש ב-GeoJSON עם מסד נתונים כדי לאחסן ולאחזר את פרטי המיקום שלכם.