‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

מדריך להטמעה של Locator Plus

סקירה כללית

‫web iOS API

Google Maps Platform זמינה לאינטרנט (JS,‏ TS), ל-Android ול-iOS, והיא מציעה גם ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים ומרחקים. הדוגמאות במדריך הזה נכתבו לפלטפורמה אחת, אבל יש קישורים לתיעוד להטמעה בפלטפורמות אחרות.

ליצירה

Quick Builder במסוף Google Cloud מאפשר לכם ליצור במהירות כלי לאיתור מיקומים, כולל ייבוא של כרטיסי מידע בפרופיל העסק והטמעה אוטומטית של קישורים להזמנת תורים מספקים של צד שלישי. ממשק המשתמש האינטראקטיבי מאפשר ליצור קוד ולפרוס אותו ב-Cloud תוך דקות.

המשתמשים רוצים לחפש מוצרים ושירותים באינטרנט, ולמצוא את המקום הכי טוב והכי נוח לבקר בו, לקבוע פגישה או לאסוף הזמנה. הם רוצים להגיע למיקום שלכם כמה שיותר מהר, ואתם רוצים לספק להם חוויות עשירות באינטרנט שיגדילו את מספר הביקורים במיקומים הפיזיים שלכם, ישפרו את שביעות רצון המשתמשים ויצמצמו את מספר הפניות לתמיכה. כדאי גם למדוד את הצלחת הכלי לאיתור מיקום כדי לדעת אם הלקוחות יכולים למצוא את המיקום שלכם, וכדי להבין איפה יש מקום לשיפור.

הפתרון Locator Plus – ההמלצות והטיפים להתאמה אישית שמפורטים במסמך הזה – הוא השילוב האופטימלי של ממשקי Google Maps Platform API שמומלץ להשתמש בו כדי ליצור חוויית משתמש מצוינת של איתור מיקום. ההמלצות האלה יעזרו לכם להציג למשתמשים את המיקומים של העסקים שלכם במפה, להציג להם מידע מפורט שיעזור להם לקבל החלטות ולספק להם הוראות הגעה, בין אם הם נוהגים, רוכבים על אופניים, הולכים ברגל או נוסעים בתחבורה ציבורית.

משתמשי Locator Plus יכולים להשתמש בלוח בקרה של ניתוח נתונים כדי לנתח את הנתונים ולקבל מהם תובנות. כך הם יכולים לקבל תמונה ברורה של מידת האינטראקציה של הקונים עם איתור החנויות. כדי לגשת לדוח הזה, עוברים לקטע דוחות על מעורבות במסוף. מידע נוסף על הדוח הזה זמין במאמר בנושא דוחות על אינטראקציות ראשוניות.

בתרשים הבא מוצגים ממשקי ה-API המרכזיים שמשמשים להטמעה של Locator Plus. בדיאגרמה מוצג גם מסד נתונים של נתוני המיקום שלכם, שאפשר לשלב עם Place Details כדי לספק למשתמשים את המידע הטוב והמלא ביותר שאפשר. (כדי להגדיל, לוחצים על התמונה).

בצד ימין של הדיאגרמה, דפדפן אינטרנט מציג מפה עם חלון קופץ של פרטי מקום.
בצד ימין של הדיאגרמה, רשימה של ממשקי API שמספקים פונקציונליות שונה:
Maps JavaScript API להצגת מיקום ותוכן, לעיצוב מפות, לסמנים מתקדמים, ל-Street View בהתאמה אישית ולהצגת מסלולים. השלמה אוטומטית למקומות לכתובות והשלמה אוטומטית בזמן ההקלדה. ‫Places API (חדש) ו-Geocoding API למיקום כתובת. ‫Routes API לדירוג מיקומים לפי מרחק, זמן ואמצעי תחבורה, ולהצגת מסלול על סמך זמן הנסיעה ואמצעי התחבורה.
באמצע התרשים, סמל של מאגר נתונים שמייצג נקודות נתונים של מיקומים מותאמים אישית
עד לסמל של שרת אינטרנט עם חץ דו-ראשי שמציין קריאה וכתיבה של נתונים
בין שרת האינטרנט למאגר הנתונים. החיצים בין דפדפן האינטרנט לבין ממשקי ה-API עוברים דרך שרת האינטרנט כמתווך.

הפעלת ממשקי API

כדי ליישם את השיטות האלה, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud:

מידע נוסף על הגדרה זמין במאמר תחילת העבודה עם Google Maps Platform.

קטעי הטמעה

במסמך הזה נסביר על השיטות המומלצות וההתאמות האישיות הבאות.

סמל סימן הווי הוא שיטה מרכזית.
סמל הכוכב הוא התאמה אישית אופציונלית אך מומלצת לשיפור הפתרון.

	הצגת המיקומים שלכם במפה אינטראקטיבית	ליצור מפה שמאפשרת למשתמשים לראות פרטים על מיקום, לנוע במפה ולהתקרב ולהתרחק. אפשר גם לעיין ב פתרון Quick Builder Locator Plus כדי ליצור במהירות מפה, כולל ייבוא פרטי העסק מ פרופיל העסק , הטמעה של קישורים להזמנת תורים ופריסה ב-Google Cloud Storage.
	הצגת פרטי מקום	אחרי שהמשתמשים מוצאים במפה את המיקומים הכי קרובים שלכם, כדאי לספק להם פרטים משמעותיים על המקומות כדי לעזור להם לקבל החלטות.
	הצגת מיקומים בתצוגה של 45°	כך המשתמשים יכולים לראות את המיקום שלכם בצורה טובה יותר בתצוגת לוויין מזווית של 45 מעלות.
	זיהוי המיקום של המשתמש	הוספת פונקציונליות של הקלדה תוך כדי תנועה משפרת את חוויית המשתמש בכל הפלטפורמות, וגם משפרת את הדיוק של הכתובת עם מינימום הקשות.
	הצגת זמן הנסיעה והמרחק למיקומים הקרובים ביותר	חישוב מרחק הנסיעה וזמן הנסיעה למספר נקודות מוצא ויעדים, אפשר גם לציין אמצעי תחבורה שונים כמו הליכה, נהיגה או רכיבה על אופניים.
	עזרה למשתמשים בהזמנת פגישות	לאפשר למשתמשים לקבוע פגישה מחלונית הצד של פרטי המקום. אפשר גם לעיין ב פתרון Quick Builder Locator Plus כדי ליצור במהירות מפה, כולל ייבוא פרטי העסק מ פרופיל העסק , הטמעה של קישורים להזמנת תורים ופריסה ב-Google Cloud Storage.
	הצגת מבצעים מקומיים	הצגת מבצעים מקומיים שניתן ללחוץ עליהם בחלונית הצדדית של פרטי המקום.
	מתן הוראות ניווט	קבלת נתוני מסלול מנקודת המוצא ליעד באמצעות אמצעי תחבורה שונים, כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית.
	התאמה אישית של המפה	אתם יכולים ליצור סמני מפה מותאמים אישית כדי שהמיקומים שלכם יבלטו, ולעצב את המפה כך שתתאים לצבעי המותג שלכם. הצגה (או הסתרה) של נקודות עניין ספציפיות במפה כדי לעזור למשתמשים להתמצא טוב יותר, ושליטה בצפיפות של נקודות העניין כדי למנוע עומס במפה.
	קבלת תובנות לגבי השימוש באמצעות ניתוח נתונים	הגדרתם את Google Analytics ואתם משתמשים בו כדי לקבל תובנות לגבי אסטרטגיית איתור החנויות וההטמעה שלה.
	שליחת מסלול לנייד	בנוסף להצגת הוראות הגעה בכלי האיתור, אפשר גם לשלוח הוראות הגעה לטלפון של המשתמש לניווט באמצעות מפות Google בדרכים.
	הצגת תמונות Street View כדי לעזור למשתמשים לדמיין מיקומים	כדאי להוסיף תמונות Street View עם תצוגות של 360 מעלות כדי לעזור למשתמשים להתמצא טוב יותר ולמצוא את המיקומים שלכם מהר יותר.
	קביעת מיקום המשתמש באמצעות מיקום גיאוגרפי	אם אתם לא רוצים להסתמך על שירותי מיקום במכשיר, אתם יכולים להשתמש במיקום גיאוגרפי כדי לזהות את מיקום המשתמש.
	שילוב נתוני מיקום מותאמים אישית עם Place Details	אתם יכולים לשלב את פרטי המיקום המותאמים אישית שלכם עם Place Details כדי לספק למשתמשים מערך עשיר של נתונים שיעזרו להם לקבל החלטות.

הערה: כדי לעקוב אחרי השימוש בדוגמאות קוד של פתרונות ולשפר את איכות הפתרונות, Google כוללת את פרמטר השאילתה solution_channel בקריאות ל-API בקוד לדוגמה שמופיע בדף הזה. כדי לבטל את ההסכמה, מוחקים את פרמטר השאילתה solution_channel מקוד הדוגמה. מידע נוסף זמין במאמר בנושא פרמטר הפתרונות של Google Maps Platform.

הצגת המיקומים שלכם במפה אינטראקטיבית

כלי האיתור הוא חלק חשוב בחוויית שימוש. עם זאת, יכול להיות שבאתרים מסוימים לא תהיה אפילו מפה, ולכן המשתמשים יצטרכו לצאת מהאתר או מהאפליקציה כדי למצוא מיקום בקרבת מקום. המשמעות היא שחוויית המשתמש לא אופטימלית, כי המשתמשים צריכים לנווט בין דפים כדי לקבל את המידע שהם צריכים. במקום זאת, אפשר לשפר את חוויית המשתמש על ידי הטמעה של מפות באפליקציות והתאמה שלהן.

יש שתי דרכים להפעיל את הפונקציונליות הזו: באמצעות פתרון Quick Builder Locator Plus, שמאפשר להשתמש בה מיד, או באמצעות הטמעה של מפות דינמיות משלכם. בקטע הזה מתוארות האפשרויות האלה בפירוט.

שימוש ב-Quick Builder Locator Plus

אתם יכולים להשתמש ב פתרון Quick Builder Locator Plus כדי לייבא פרטי עסק מפרופיל העסק. לכן, מעכשיו, שינוי בפרטי העסק בפרופיל העסק יופיע במאתר החנויות באתר שלכם. השינויים האלה יכולים לכלול שעות פעילות, פרטים ליצירת קשר, תמונות, אפשרויות שירות ועוד. בעזרת Quick Builder תוכלו לחקור במהירות את האפשרות להגדיר מיקומי עסקים במפה, ליצור קוד שניתן לפריסה או לפרוס ישירות ל-Google Cloud Storage תוך דקות.

ייבוא פרטים של מיקומי העסק מפרופיל העסק אל Quick Builder — ניהול המיקומים ב-Locator Plus על ידי ייבוא פרטי העסק מפרופיל העסק

פריסת אפליקציית Locator Plus ישירות ב-Google Cloud Storage — פריסת פתרון Locator Plus באמצעות Google Cloud

שימוש בהטמעה של מפות דינמיות משלכם

בדוגמה הזו נעשה שימוש ב: 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_locatorplus_v2_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
  });
}

בדרך כלל, כשמגדירים כלי לאיתור מיקום, רוצים להגדיר את המיקום הראשוני, את נקודת המרכז או את הגבולות, ואת רמת הזום (עד כמה המפה מוגדלת במיקום הזה). רוב הרכיבים האחרים, כמו התאמה של אמצעי הבקרה, הם אופציונליים, כי אתם קובעים את רמת האינטראקציה עם המפה.

איך מקבלים מזהי מקומות

בדוגמה הזו נעשה שימוש ב: Places API (חדש)

אפשרות נוספת: ‫JavaScript

בדרך כלל יש לכם מסד נתונים של המיקומים עם מידע בסיסי כמו שם המיקום, הכתובת ומספר הטלפון. כדי לאחזר את המידע שיש ל-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 בלונדון:

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

הוספת מיקומים למפה

השלב הבא הוא להוסיף את המיקומים שלכם למפה. בדרך כלל עושים את זה על ידי הוספה של סמנים מתקדמים למפה, אבל יש עוד כמה אפשרויות שבהן אפשר להשתמש, כמו שכבות נתונים.

אחרי שמקבלים את קווי הרוחב והאורך של המיקום, הנה דוגמה להוספת סמן מתקדם עם גליף טקסט מותאם אישית למפה:

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

אפשר להוסיף כמה סמנים כדי לראות את המיקום של כמה מקומות ביחד.

אם יש מספר גדול של מיקומים, כדאי להשתמש בכלי marker clustering ל-JavaScript, ל-Android או ל-iOS. זו דוגמה לאשכולות של סמנים בדוגמה של כלי לאיתור חנויות ב-JavaScript ב-GitHub.

הוספת פרטי מקום

בדוגמה הזו נעשה שימוש ב: Maps JavaScript API

אפשר גם להשתמש ב: Places API (חדש) | Android | iOS

אתם יכולים לשתף את פרטי המקום שהמשתמשים צריכים לדעת לפני שהם מבקרים באחד מהמיקומים שלכם. עם Place Details עשירים, כמו פרטים ליצירת קשר, שעות פעילות, דירוגים של משתמשים, תמונות של משתמשים וסטטוס של סגירה זמנית, המשתמשים שלכם יידעו בדיוק למה לצפות כשהם מבקרים במיקום שלכם. אחרי שמבצעים קריאה ל-Places API (חדש), אפשר לסנן את התגובה ולהציג אותה בחלון מידע, בסרגל צד באינטרנט או בכל דרך אחרת שרוצים.

כדי לבקש פרטים על מקומות, תצטרכו את מזהה המקום של כל אחד מהמיקומים שלכם. כדי לאחזר את מזהה המקום של המיקום שלכם, אפשר לעיין במאמר איך מקבלים מזהי מקומות.

כדי לראות סרטונים שניתן לבקש לגביהם פרטים על מקום:

קבלת שעות הפתיחה

בדיקת סגירות

שליטה בעלויות

בדוגמה הבאה נעשה שימוש במחלקה Place בספריית המקומות של Maps JavaScript API כדי לאחזר פרטים של מקום ולהוסיף אותם לחלון מידע. ההטמעה הזו משתמשת באסטרטגיה לחיסכון בעלויות, שבה מופעלת בקשה ל-Place Details רק כשהמשתמש מבקש פרטים בלחיצה על הסמן, במקום לאחזר מראש פרטים של כל המיקומים בלי קשר לתחומי העניין של המשתמש.

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
    gmpClickable: true,
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("gmp-click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });

הצגת מיקומים בתצוגה של 45 מעלות

בדוגמה הזו נעשה שימוש ב: Maps JavaScript API

זמינים גם: Android | iOS

כשמציגים למשתמשים תצוגה אווירית של המיקום שלכם, הם יכולים להבין טוב יותר איך הוא נראה ולמצוא אותו בקלות. כשמשתמש בוחר מיקום יחיד כדי לראות פרטים נוספים, אפשר להגדיל את המיקום הזה כדי להציג תמונות לוויין זמינות מזווית של 45 מעלות.

בדוגמת הקוד הבאה, המפה מוגדרת לרמת זום גבוהה, לסוג מפה תואם ולזווית הטיה שתציג תמונות בזווית של 45 מעלות אם הן זמינות. פרטים על זמינות תמונות בזווית של 45° מוסברים במסמכי התיעוד.

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

איפוס לתצוגת המפה המקורית

משתמשים רוצים לעבור בין התצוגה המפורטת של מיקום יחיד לבין תצוגת הסיכום של כמה מיקומים סמוכים. כדי לעשות זאת, מוסיפים listener כדי לזהות מתי המשתמש יוצא מתצוגת הפרטים, בין אם באינטראקציות עם המפה או בתצוגת הרשימה. לדוגמה, האזנה לאירוע zoom_changed באובייקט map מציינת שהמשתמש ביצע זום אאוט מהתצוגה המפורטת באופן ידני או הפעיל פונקציה אחרת שעדכנה את רמת הזום. בדוגמה הזו, הרחקת התצוגה מאפסת את המפה לסוג המפה ולזווית ההטיה המקוריים.

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

זיהוי המיקום של המשתמש

בדוגמה הזו נעשה שימוש ב: Maps JavaScript API

זמינים גם: Android | iOS

המרכיב המרכזי הבא בכל כלי איתור הוא זיהוי מיקום ההתחלה של המשתמש. כברירת מחדל, תוכלו להשתמש בשירותי מיקום לנייד ובמיקום גיאוגרפי של דפדפן אינטרנט כדי לבקש הרשאות משתמש להגדרת המקור כמיקום הנוכחי של המשתמש. עם זאת, יכול להיות שהמשתמש ידחה את ההרשאות האלה או ירצה להגדיר מיקום אחר כנקודת ההתחלה.

המשתמשים של היום רגילים לתכונת ההשלמה האוטומטית בגרסה הרגילה של מפות Google. אפשר לשלב את הפונקציונליות הזו בכל אפליקציה באמצעות ספריות המקומות של Google Maps Platform במכשירים ניידים ובאינטרנט. כשמשתמש מקליד כתובת, ההשלמה האוטומטית ממלאת את השאר באמצעות ווידג'טים. אפשר גם לספק פונקציונליות משלכם של השלמה אוטומטית למקומות באמצעות Place Autocomplete Data API ישירות.

כדי להוסיף את ספריית ההשלמה האוטומטית למקומות לאתר, צריך רק להוסיף כמה פרמטרים של שאילתה לכתובת ה-URL של הסקריפט של Maps JavaScript API. בדוגמה הבאה, התוסף הוא libraries=places,marker.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_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,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });
}

בדוגמה הזו, אחרי שהמשתמש בוחר את הכתובת, הפונקציה addUserLocation() מופעלת. הפעולה הזו לוקחת את המיקום של התוצאה התואמת, מעבירה את המפה למיקום הזה ומוסיפה סמן מתקדם.

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

אז תוכלו לראות את הקשר בין המשתמש לבין מיקומים מסוימים, כפי שמוצג בתמונה הבאה.

כאן אפשר להרחיב את הקטע כדי לראות סרטוני הדרכה להוספת השלמה אוטומטית של מקומות לאפליקציה:

אתר

אפליקציות ל-Android

אפליקציות ל-iOS

מוצגים זמני הנסיעה והמרחק למיקומים הקרובים ביותר

בדוגמה הזו נעשה שימוש ב: Routes API

אפשר גם להשתמש ב: Routes Library, Maps JavaScript API

אחרי שמקבלים את המיקום של המשתמש, אפשר להשוות אותו למיקומים שלכם. השימוש בתכונה Compute Route Matrix ב-Routes API (או במחלקה RouteMatrix בספריית המסלולים, Maps JavaScript API) יעזור למשתמשים לבחור את המיקום שהכי נוח להם לפי זמן הנסיעה או המרחק בכביש.

הצגת מיקומים שקרובים למשתמש מרמזת שכבר מילאתם את המיקומים שלכם. כשמשתמשים במסד נתונים משלכם של מיקומים, חשוב לוודא שהנתונים הם בפורמט שאפשר להשתמש בו במפה, כמו GeoJSON, שמתואר בנושא שכבת הנתונים.

הדרך הרגילה לארגן רשימה של מיקומים היא למיין אותם לפי מרחק. לרוב, המרחק הזה מחושב באמצעות הקו הישר מהמשתמש למיקום, אבל זה יכול להיות מטעה. יכול להיות שהקו הישר עובר מעל נהר שאי אפשר לחצות או דרך כבישים עמוסים, בזמן שמיקום אחר יכול להיות נוח יותר. זה חשוב במיוחד אם יש לכם כמה מיקומים במרחק של כמה קילומטרים זה מזה.

השיטה computeRouteMatrix פועלת על ידי קבלת רשימה של מיקומי מוצא ויעד, ומחזירה לא רק את מרחק הנסיעה אלא גם את זמן הנסיעה ביניהם. במקרה של משתמש, נקודת המוצא תהיה המיקום הנוכחי שלו או נקודת ההתחלה המועדפת שלו, והיעדים יהיו המיקומים. אפשר לציין את נקודות המוצא והיעד כזוגות קואורדינטות, כמזהי מקומות או ככתובות. אתם יכולים להשתמש ב-computeRouteMatrix עם העדפות ניתוב כמו TRAFFIC_AWARE כדי להציג תוצאות על סמך זמני נסיעה נוכחיים או עתידיים.

בדוגמה הבאה מבוצעת קריאה לנקודת הקצה computeRouteMatrix ב-Routes API, עם ציון נקודת המוצא של המשתמש ומזהי המקומות של היעד. בדוגמה הזו מחושב המרחק ומשך הנסיעה ממרכז המפה לשלושה משרדים של Google בלונדון:

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

התגובה מהשירות מכילה את המרחק (במטרים) ואת משך הזמן של כל זוג של נקודת מוצא ויעד, כמו בדוגמה הבאה:

כדי להרחיב את התשובה לדוגמה צריך ללחוץ כאן:

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

בתמונה הבאה מוצגים מקור (סמן אדום C) ויעדים במפה:

תמונה של מפת עיר עם המיקום של המשתמש כסמן אדום
ומיקומים מסביב כסמנים ירוקים.

המרחק בקו ישר והמרחק במסלול שונים בדרך כלל, כפי שמודגם בטבלה הבאה.

מיקום	מרחק ישר	דרך בתנועה / זמן
מיקום א'	‫3.32 ק"מ	‫4.5 ק"מ / 15 דקות
מיקום ב'	‫3.20 ק"מ	‫5.0 ק"מ / 17 דקות
מיקום ג'	‫4.84 ק"מ	‫6.9 ק"מ / 23 דקות

למרות שמיקום ב' הוא הקרוב ביותר מבחינת מרחק, המסלול והזמן להגעה אליו ארוכים יותר כי אפשר להגיע למיקום א' דרך כביש מהיר.

אחרי ששולחים את הבקשה הזו, אפשר לעבד את ההתאמה כדי להזמין את התגובות לפי משך זמן הנהיגה. דוגמאות לפונקציה כזו אפשר למצוא ב-codelab של כלי איתור המיקום.

בדוגמה הזו נעשה שימוש ב: Routes Library, Maps JavaScript API

אפשרות נוספת: ‫Routes API שירות אינטרנט לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק דרך שרת proxy

הצגת ההוראות למשתמשים מתוך האתר או האפליקציות שלכם מאפשרת להם לא לצאת מהאתר, כך שהם לא יוסחו על ידי דפים אחרים ולא יראו מתחרים במפה. באמצעות Routes API, אפשר גם לבקש מסלולים ידידותיים לסביבה כדי להעריך את צריכת הדלק או האנרגיה ולהציג את ההשפעה הסביבתית של הנסיעה.

בנוסף, ל-Route class בספריית המסלולים, Maps JavaScript API יש שיטות כמו createPolylines() ו-createWaypointAdvancedMarkers() שמאפשרות לעבד את התוצאות ולהציג אותן במפה.

בדוגמה הבאה מוצגת בקשה להצגת מסלול במפה. מידע נוסף על הדוגמה זמין במאמר קבלת מסלול.

מידע נוסף על רכיבים במפות Google מופיע במאמרי העזרה של ה-API של Maps JavaScript. אפשר גם לעיין בCodelab שמסביר איך ליצור כלי האיתור.

עזרה למשתמשים בקביעת פגישות

כשמשתמשים צופים ב-Place Details של המיקום שלכם בחלונית צד, אתם יכולים להציע להם את האפשרות הנוחה לקבוע פגישה בלחיצת כפתור, כמו שמוצג באיור הבא.

יש כמה דרכים להפעיל את התכונה הזו: (1) באמצעות פתרון Quick Builder Locator Plus כדי לספק את הפונקציונליות הזו מחוץ לקופסה, ו-(2) באמצעות פרופיל העסק. בקטע הזה מתוארות האפשרויות האלה בפירוט.

שימוש ב-Quick Builder Locator Plus

אתם יכולים להשתמש ב פתרון Quick Builder Locator Plus כדי לייבא במהירות את פרטי העסק מ פרופיל העסק. אחרי הייבוא לכלי Quick Builder, אפשר להפעיל קישורים מוטמעים להזמנת תורים, אם הם זמינים, למיקומי העסק באמצעות Google הזמנת מקומות. גם אם אין לכם פרופיל עסק שמקושר לחשבון Google, אתם עדיין יכולים להשתמש ב-Quick Builder כדי להטמיע קישורים להזמנת מקומות בעסקים שכבר הפעלתם בהם ספקי הזמנות של צד שלישי דרך Google הזמנת מקומות*.

הפעלת קישורים לקביעת פגישות בכלי לאיתור חנויות באמצעות 'Google הזמנת מקומות' — הוספת אפשרות לקביעת פגישות למאתר החנויות

*שירות "Google הזמנת מקומות" זמין רק במדינות או באזורים מסוימים שבהם העסקים עובדים עם ספק נתמך לניהול הזמנות . אם אתם רוצים להשתמש ב'הזמנת מקומות ב-Google', אבל אתם לא עובדים עם שותף של 'הזמנת מקומות ב-Google', אתם יכולים להפנות את הספק שלכם למילוי טופס ההתעניינות ולעיון במסמכי התיעוד שלנו כדי להבין איך להתחיל. אם אתם לא עובדים עם ספק לניהול ההזמנות, תוכלו לראות את רשימת הספקים שעומדים בדרישות בקטע 'הזמנות' בכלי לניהול פרופיל העסק.

איך משתמשים בפרופיל העסק כדי לאפשר קביעת פגישות

כשמנהלים את הנוכחות באינטרנט באמצעות פרופיל העסק, המיקומים העסקיים שיוצרים משויכים למזהי מקומות בפלטפורמה של מפות Google, כדי לאפשר שילוב של פונקציונליות מיפוי עם נתונים עסקיים.

ממשקי Business Profile API מאפשרים לכם ליצור פעולות, כמו הזמנת תור, שתוכלו לאחזר ולהציג באפליקציות שלכם. עם זאת, כדי להפעיל את האפשרות הזו צריך לבצע כמה שלבים ידניים, כמו שמתואר בהמשך.

כשמשתמשים צופים בפרטי מקום של אחד מהמיקומים שלכם בחלונית צדדית, אתם יכולים לספק להם קישור לקביעת פגישה. בקטע הזה מוסבר איך עושים את זה.

יצירת placeActionLink של Business Profile API למיקום מסוג APPOINTMENT, ONLINE_APPOINTMENT או DINING_RESERVATION. האובייקט placeActionLink יהיה הקישור לפגישה בחלונית הצדדית. (אם כבר יצרתם את הקישור לפעולה של קביעת פגישה שרציתם, אפשר לדלג לשלב הבא). זוהי דוגמה לתגובה מפעולת POST מוצלחת של placeActionLinks.create:
```
{
    "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
    "providerType": "MERCHANT",
    "isEditable": true,
    "uri": "https://example.com/reservation-uri",
    "placeActionType": "DINING_RESERVATION",
    "createTime": "2021-05-01T01:17:41.609161Z",
    "updateTime": "2021-05-01T01:17:41.609161Z"
}
```
למצוא את המיקום של פרופיל העסק שמשויך למזהה המקום בפלטפורמת מפות Google.

כשמשתמשים צופים ב-Place Details, הם צופים בפרטים של מזהה מקום ב-Google Maps Platform. מזהה המקום משויך למזהה מיקום בפרופיל העסק, לכן צריך למצוא את מזהה המיקום על סמך מזהה המקום במפה כדי לאחזר ולהציג את הקישור להזמנת תורים שיצרתם. מבצעים את הקריאות הבאות לממשקי Business Profile API:
1. הצגת רשימה של החשבונות בפרויקט.
2. הצגת רשימה של כל המיקומים בחשבון.
3. במיקומים בחשבון, התג LocationKey מכיל את מזהה המקום ב-Google Maps Platform, שאפשר להשוות אותו למזהה המקום של המיקום שמוצג.
בעזרת מזהה המיקום, תוכלו לקבל את הקישור לפעולה שאתם רוצים. כדי לאחזר פגישה קיימת placeActionLink,מציגים את רשימת placeActionLinks הפגישות הקיימות במיקום ומסננים לפי placeActionType כדי למצוא את הקישור לפגישה שרוצים להשתמש בו (APPOINTMENT, ‏ONLINE_APPOINTMENT או DINING_RESERVATION).

הערה: לפעולות לגבי המקום שנוצרו באמצעות Google הזמנת מקומות (Google Maps Booking API) יהיה הערך placeActionType של AGGREGATOR_3P.

בדוגמה הבאה מוצג APPOINTMENT placeActionLink בתגובה מהקריאה LIST.
```
 {
   "placeActionLinks": [
       {
           "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
           "providerType": "MERCHANT",
           "isEditable": true,
           "uri": "https://example.com/",
           "placeActionType": "APPOINTMENT",
           "createTime": "2021-05-01T01:17:41.609161Z",
           "updateTime": "2021-05-01T01:17:41.609161Z"
       }
   ]
 }
```
יוצרים ומאכלסים <div> בחלונית צד עם נתונים רלוונטיים מהאובייקט placeActionLink, במיוחד מזהה ה-URI של הקישור להזמנה.

דרכים חלופיות להוספת קישורים לפגישות

אם אין לכם פרופיל עסק או שאתם לא רוצים להשתמש ב פתרון Quick Builder Locator Plus, כדאי לעיין במסמכים של פלטפורמת הזמנת התורים שלכם כדי להבין איך להטמיע ווידג'ט להזמנת תורים באתר או באפליקציה. אפשרות נוספת היא להשתמש ב-Google Cloud, למשל ב-Cloud Spanner לניהול מלאי שטחי פרסום (סרטון).

הצגת מבצעים מקומיים

בחלונית הצדדית 'פרטי המקום' של מיקום מסוים, אתם יכולים להציג הצעות מקומיות למשתמשים כדי שילחצו עליהן. ‫Google My Business API מאפשר לכם ליצור ולאחזר 'פוסטים' (כמו מבצעים מקומיים) שמשויכים למיקומים שלכם. באיור הבא אפשר לראות דוגמה למוצר בחנות מקומית בחלונית הצדדית 'פרטי המקום'.

(תרשים הארכיטקטורה בקטע Quick Builder מציג טכנולוגיות זמינות להוספת מבצעים לכלי לאיתור חנויות).

מכיוון שמבצעים על מוצרים בחנויות מקומיות משויכים למיקומים, תצטרכו למצוא את מזהה המיקום של פרופיל העסק שמשויך למזהה המקום ב-Google Maps Platform של המיקום שהמשתמשים צופים בו. אם יש לכם את מזהה המיקום בפרופיל העסק, תוכלו לאחזר את המבצע הרלוונטי כ-localPost ולהציג אותו בחלונית הצדדית 'פרטי המקום'. אלה השלבים:

באמצעות Google לעסק שלי API, אפשר ליצור פוסטים של מבצעים שרוצים להציג, מסוג OFFER.

מוצאים את המיקום בפרופיל העסק או את מזהה המיקום שמשויך למזהה המקום במפה.

כשמשתמשים צופים בפרטי מקום, הם צופים בפרטים של מזהה מקום ב-Google Maps Platform. מזהה המקום משויך למזהה המיקום בפרופיל העסק, ולכן צריך למצוא את מזהה המיקום על סמך מזהה המקום במפה כדי לאחזר ולהציג את הקישור למבצע על מוצרים מקומיים במיקום שלכם. מבצעים את הקריאות הבאות לממשקי Business Profile API:

הצגת רשימה של החשבונות בפרויקט.
הצגת רשימה של כל המיקומים בחשבון.
במיקומי החשבון, LocationKey מכיל את מזהה המקום במפות Google, שאפשר להשוות אותו למזהה המקום של המיקום שמוצג.

זו דוגמה לבקשה לקבלת פרטים של מיקום בממשקי Business Profile API:

https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700

התשובה מכילה את השדה locationKey שהוא מזהה המקום שאפשר להשתמש בו בבקשות ל-Google Maps Platform.

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

      {
    "name": "accounts/111098884960588804666/locations/15899957830169237700",
    "locationName": "Sushi Sushi",
    "primaryPhone": "+49 2222 22222",
    "primaryCategory": {
        "displayName": "Restaurant",
        "categoryId": "gcid:restaurant",
    },
    "regularHours": {
        "periods": [
            {
                "openDay": "MONDAY",
                "openTime": "09:00",
                "closeDay": "MONDAY",
                "closeTime": "09:10"
            },
            {
                "openDay": "TUESDAY",
                "openTime": "11:30",
                "closeDay": "TUESDAY",
                "closeTime": "24:00"
            }
        ]
    },
    "locationKey": {
        "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
        "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c"
    },
    "latlng": {
        "latitude": 1.3670033,
        "longitude": 103.8556385
    },
    "openInfo": {
        "status": "OPEN",
        "canReopen": true
    },
    "locationState": {
        "isGoogleUpdated": true,
        "canUpdate": true,
        "canDelete": true,
        "isVerified": true,
        "isPublished": true,
        "canHaveFoodMenus": true
    },
    "attributes": [
        {
            "attributeId": "has_delivery",
            "valueType": "BOOL",
            "values": [
                false
            ]
        },
        {
            "attributeId": "requires_masks_customers",
            "valueType": "BOOL",
            "values": [
                true
            ]
        },
        {
            "attributeId": "url_order_ahead",
            "valueType": "URL",
            "urlValues": [
                {
                    "url": "https://example.com/"
                },
            ]
        },
        {
            "attributeId": "pay_credit_card_types_accepted",
            "valueType": "REPEATED_ENUM",
            "repeatedEnumValue": {
                "setValues": [
                    "visa"
                ],
                "unsetValues": [
                    "american_express"
                ]
            }
        }
    ],
    "address": {
        "regionCode": "SG",
        "languageCode": "en-US",
        "postalCode": "560445",
        "addressLines": [
            "445 Ang Mo Kio Ave 10"
        ]
    },
    "profile": {
        "description": "Example restaurant"
    }
}

עכשיו, כשיש לכם את מזהה המיקום, אתם יכולים לקבל את המבצע שרציתם. כדי לאחזר פוסט קיים של מבצע, מריצים את הפקודה localPosts למיקום ומסננים לפי topicType של OFFER כדי למצוא את תוכן המבצע שרוצים להשתמש בו.

הנה דוגמה לבקשה להצגת הפוסטים הפעילים לעסק מקומי במיקום מסוים:

https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

בדוגמה הבאה אפשר לראות OFFER localPost בתשובה.

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

{
    "localPosts": [
        {
            "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
            "languageCode": "en",
            "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
            "state": "LIVE",
            "event": {
                "title": "Bento BOGO",
                "schedule": {
                    "startDate": {
                        "year": 2020,
                        "month": 1,
                        "day": 20
                    },
                    "startTime": {},
                    "endDate": {
                        "year": 2021,
                        "month": 1,
                        "day": 21
                    },
                    "endTime": {}
                }
            },
            "updateTime": "2020-09-11T10:56:22.594Z",
            "createTime": "2020-09-11T10:56:22.594Z",
            "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
            "media": [
                {
                    "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                    "mediaFormat": "PHOTO",
                    "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                }
            ],
            "topicType": "OFFER",
            "offer": {
                "couponCode": "BOGO-JET-CODE",
                "redeemOnlineUrl": "https://www.example.com/redeem",
                "termsConditions": "Offer only valid for order-ahead orders placed online."
            }
        },
    ],
}

יוצרים <div> ומאכלסים אותו בחלונית הצדדית בנתונים רלוונטיים מהאובייקט localPost.

התאמה אישית של המפה

יש כמה דרכים לשנות את המראה והפרטים של המפה. לדוגמה, אתם יכולים:

אתם יכולים ליצור סמנים מותאמים אישית משלכם כדי להחליף את סיכות המפה שמוגדרות כברירת מחדל.
לשנות את הצבעים של התכונות במפה כדי לשקף את המותג שלכם.
שליטה בנקודות העניין שמוצגות (אטרקציות, אוכל, לינה וכו'), וגם בצפיפות שלהן, כדי למקד את תשומת הלב של המשתמשים במיקומים שלכם תוך הדגשת ציוני הדרך שעוזרים למשתמשים להגיע למיקום הקרוב ביותר.

יצירת סמני מפה בהתאמה אישית

אפשר להתאים אישית את הסמנים המתקדמים על ידי שינוי הרקע, הגבול או הגליף של הסיכה שמוגדרים כברירת מחדל (לדוגמה, כדי לציין אם מיקום מסוים פתוח), החלפת הסמן בתמונה גרפית בהתאמה אישית, כמו הלוגו של המותג, או יצירת סמנים מותאמים אישית ב-HTML וב-CSS. חלונות מידע יכולים לספק למשתמשים מידע נוסף, כמו שעות פתיחה, מספר טלפון או תמונות.

בהמשך מוצגת דוגמה למפה שבה נעשה שימוש בסמנים גרפיים בהתאמה אישית. (אפשר לראות את קוד המקור בנושא סמנים גרפיים בהתאמה אישית ב-Maps JavaScript API).

מידע מפורט זמין במסמכי התיעוד בנושא סמנים מתקדמים ל-JavaScript (אינטרנט), ל-Android ול-iOS.

שינוי הסגנון של המפה

‫Google Maps Platform מאפשרת לכם לעצב את המפה כך שהמשתמשים יוכלו למצוא את המיקום הקרוב ביותר, להגיע אליו במהירות האפשרית ולחזק את המותג שלכם. לדוגמה, אפשר לשנות את צבעי המפה כך שיתאימו למיתוג שלכם, ואפשר לצמצם את ההסחות במפה על ידי שליטה בנקודות העניין שגלויות למשתמשים. Google Maps Platform מספקת גם מספר תבניות התחלה למפות, חלקן מותאמות לתעשיות שונות, כמו תיירות, לוגיסטיקה, נדל"ן וקמעונאות.

אפשר ליצור או לשנות סגנונות מפות במסוף Google Cloud בדף Map Styles בפרויקט.

כאן אפשר לראות אנימציות של יצירת סגנון מפה ועיצוב שלה ב-מסוף Cloud:

סגנונות מפה לפי ענף

אנימציה שמציגה סגנונות מפה מוגדרים מראש שספציפיים לתעשייה שאפשר להשתמש בהם. הסגנונות האלה מספקים נקודת התחלה אופטימלית לכל סוג של תעשייה. לדוגמה, סגנון המפה 'קמעונאות' מצמצם את נקודות העניין במפה, וכך המשתמשים יכולים להתמקד במיקומים שלכם ובנקודות הציון שיעזרו להם להגיע למיקום הקרוב ביותר במהירות ובביטחון.

בדף 'סגנון המפה', לוחצים על 'יצירת סגנון מפה חדש'. בדף New Map Style (סגנון מפה חדש), העכבר לוחץ על לחצן הבחירה לצד כל אחד מהסגנונות הבאים שעברו אופטימיזציה לתעשיות שונות: תיירות, לוגיסטיקה, נדל"ן וקמעונאות. כשלוחצים על כל לחצן, התיאור של סגנון המפה והתצוגה המקדימה הגרפית משתנים.

אמצעי בקרה של נקודות עניין

באנימציה הזו מוגדר צבע הסמן לנקודות עניין ומוגברת צפיפות נקודות העניין בסגנון המפה. ככל שהצפיפות גבוהה יותר, כך מופיעים במפה יותר סמני נקודות עניין.

בדף 'סגנון המפה', לוחצים על 'יצירת סגנון מפה חדש'. בדף 'סגנון מפה חדש', בקטע 'יצירת סגנון משלכם', הכפתור 'מפת Google' מסומן. העכבר לוחץ על לחצן הבחירה של Atlas כדי לבחור את הסגנון Atlas,
ואז לוחץ על Open in Style Editor (פתיחה בכלי לעריכת סגנונות). בכלי לעריכת סגנונות, לוחצים באמצעות העכבר על התכונה 'נקודות עניין', ואז לוחצים על רכיב הסמל ומגדירים את הצבע לאדום. העכבר בוחר את תיבת הסימון 'צפיפות נקודות העניין' ומזיז את אמצעי הבקרה של הצפיפות ימינה לצפיפות מקסימלית. ככל שהצפיפות גדלה, מופיעים יותר ויותר סמנים אדומים בתצוגה המקדימה של המפה. העכבר יעבור אל לחצן השמירה.

לכל סגנון מפה יש מזהה משלו. אחרי שמפרסמים סגנון במסוף Cloud, מציינים את מזהה המפה בקוד – כלומר, אפשר לעדכן סגנון מפה בזמן אמת בלי לשנות את מבנה האפליקציה. המראה החדש יופיע אוטומטית באפליקציה הקיימת וישמש בכל הפלטפורמות. בדוגמאות הבאות אפשר לראות איך מוסיפים מזהה מפה לדף אינטרנט באמצעות 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_locatorplus_v2_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.

קבלת תובנות לגבי השימוש באמצעות ניתוח נתונים

בעזרת ניתוח נתונים, תוכלו לקבל תובנות חשובות לגבי האינטראקציות של המשתמשים עם כלי איתור המיקום שלכם. בקטע הזה מוסבר איך להגדיר ולעקוב אחרי נתוני Analytics ב-Google Analytics ובפרופיל העסק ב-Google, כדי לעקוב אחרי הנתונים שהכי חשובים לכם. למשתמשי Locator Plus ב-Quick Builder, לוח בקרה של Analytics עוזר לנתח וליצור תובנות, ומספק תמונה של רמת האינטראקציה של המבקרים באתר עם איתור החנויות, על סמך נתונים אנונימיים.

לוח בקרה של ניתוח נתונים של איתור חנויות, שבו מוצגים מדדי ביצועים ומעורבות משתמשים — לוח הבקרה של ניתוח הנתונים של איתור החנויות מספק מדדי ביצועים

כדי לגשת לדוח הזה, עוברים אל הקטע 'דוחות על מעורבות' במסוף Cloud. מידע נוסף על הדוח הזה זמין במאמר בנושא דוחות על אינטראקציות ראשוניות.

ב-Google Analytics יש הרבה תכונות, ולכן לא נספק כאן מידע מקיף על ההגדרה והשימוש. במקום זאת, נציג לכם מסמכי תיעוד חשובים לקריאה נוספת והוראות, ונציין שיקולים חשובים לניתוח נתונים באפליקציית איתור המיקום שלכם.

הגדרת Google Analytics

אם אתם כבר משתמשים ב-Google Analytics באפליקציה שלכם, אתם יכולים לדלג על הקטע הזה.

בהמשך מופיעה דוגמה ל-Global Tag שאפשר להדביק באתר כדי להפעיל את Google Analytics.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

בין אם אתם משתמשים ב-Google Tag Manager או מוסיפים את Google Analytics ישירות לאתר, חשוב להבין איך להשתמש בהטמעה של Google Analytics כדי לבצע את הפעולות הבאות:

להפעיל אינטראקציות של משתמשים, כמו קליקים, שאפשר למדוד בנפרד מצפיות בדפים באתר (אירועים).
הצגת נתונים גולמיים (מדדים) בקיבוצים משמעותיים (מאפיינים או מאפיינים מותאמים אישית).

שימוש באירועים מותאמים אישית

דוגמה להגדרת אירוע מותאם אישית בכלי האיתור:

gtag('event', 'location', {
  'method': 'address'
});

חשוב לתת שמות ברורים לevent ולmethod כדי שתוכלו להבין את האירועים בדוחות. מפעילים אותם לאינטראקציות הספציפיות שרוצים למדוד, למשל כשמשתמש בוחר כתובת מהרשימה הנפתחת של ההשלמה האוטומטית, שמוצגת באיור הבא.

אתם יכולים לשלוח ל-Google Analytics את קריאת המעקב הבאה שמשתמשת באירוע ובשיטה שהגדרתם. (כדי שיהיה קל לקרוא, נציג כל פרמטר של שאילתה בשורה נפרדת).

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

באיור הבא אפשר לראות איך הקריאה הזו של Google Analytics מופיעה בתצוגת הבדיקה של הדפדפן, בכרטיסייה Network. (אפשר ללחוץ כדי להגדיל).

כדי לוודא שתגי האירועים המותאמים אישית מתועדים בצורה תקינה, אפשר לעיין בתצוגה 'זמן אמת' ב-Google Analytics. לדוגמה, האירוע 'מיקום' שהוגדר קודם לכן עבור השלמה אוטומטית למקומות מופיע ב-Google Analytics כמו שמוצג באיורים הבאים.

אפשר גם לעקוב אחרי אירועים בזמן אמת באמצעות DebugView, כמו שמוצג באיור הבא. שימו לב: צריך להמתין 24 שעות לפני שניתן לגשת לדוח אירועים מלא בקטע מעורבות > אירועים ב-Google Analytics.

אפשר גם לפתח ולמדוד אסטרטגיות להגדלת תנועה פיזית בחנות למיקומים הפיזיים שלכם באמצעות אפליקציית איתור המיקומים. לדוגמה, ב-Google Analytics יש תכונה בשם ביקורים בחנות הפיזית ב-Analytics שמקשרת בין ניתוח נתונים של ביקורים בחנות פיזית (שנמדדים על ידי Google Ads) לבין ניתוח הנתונים של איתור המיקומים. אתם יכולים גם לפתח אסטרטגיות משלכם לקידום מוצרים בחנויות מקומיות, כמו מבצעים אונליין שאפשר לממש בחנויות הפיזיות.

מדדים של פרופיל העסק

בנוסף למעקב אחרי האירועים, המדדים והמאפיינים שמעניינים אתכם באמצעות Google Analytics, לפרופיל העסק ב-Google יש גם מדדים משלו. לדוגמה, אם תוסיפו למוצא הסניפים קישורים לקביעת פגישות וקישורים למבצעים על מוצרים בחנויות מקומיות, תוכלו לקבל מדדים לגבי הצפיות והקליקים על הקישורים האלה.

בדוגמה הבאה של בקשה ל-Business Profile APIs מפורטים כמה סוגים של מדדים. המדדים הרלוונטיים ביותר למעקב אחרי קליקים על מוצרים הם LOCAL_POST_VIEWS_SEARCH ו-LOCAL_POST_ACTIONS_CALL_TO_ACTION.

הרחבה כדי לראות את בקשת הדוגמה.

POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
 "locationNames": [
   "accounts/111098884960528804666/locations/15899957830169237700"
 ],
 "basicRequest": {
         "metricRequests": [
            {
              "metric": "QUERIES_DIRECT"
            },
            {
              "metric": "QUERIES_INDIRECT"
            },
            {
              "metric": "VIEWS_MAPS"
            },
            {
              "metric": "VIEWS_SEARCH"
            },
            {
                "metric": "ACTIONS_DRIVING_DIRECTIONS"
            },
            {
                "metric": "LOCAL_POST_VIEWS_SEARCH"
            },
            {
                "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
            }
         ],
         "timeRange": {
              "startTime": "2021-01-01T01:01:23.045123456Z",
              "endTime": "2021-04-30T23:59:59.045123456Z"
         }
   }
}

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

{
   "locationMetrics": [
       {
           "locationName": "accounts/111098884960528804666/locations/15899957830169237700",
           "timeZone": "Asia/Singapore",
           "metricValues": [
               {
                   "metric": "QUERIES_DIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "82"
                   }
               },
               {
                   "metric": "QUERIES_INDIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1493"
                   }
               },
               {
                   "metric": "VIEWS_MAPS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1571"
                   }
               },
               {
                   "metric": "VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "631"
                   }
               },
               {
                   "metric": "ACTIONS_DRIVING_DIRECTIONS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "3"
                   }
               },
               {
                   "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "42"
                   }
               },
               {
                   "metric": "LOCAL_POST_VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "11"
                   }
               }
           ]
       }
   ]
}

התשובה מכילה את המדדים, בעיקר:

1,571 צפיות במיקום במפות Google
‫631 צפיות במיקום בחיפוש Google.
3 בקשות לקבלת מסלול נסיעה אל המיקום.
‫42 קליקים על מוצרים של LOCAL_POST_ACTIONS_CALL_TO_ACTION.
‫11 צפיות בפוסטים ב-Google בחיפוש Google.

אפשרות נוספת למדדים היא להשתמש בGoogle הזמנת מקומות כדי ליצור קישורים לפעולות. כשמשתמשים לוחצים על קישורים לפעולה שנוצרו ב-'Google הזמנת מקומות', אתם יכולים לרשום את הפעולות האלה ביומן ב-Google Analytics, וכך לעקוב אחרי המרות ב-Google Analytics. מידע נוסף זמין במאמרי העזרה בנושא מעקב המרות.

לא משנה באיזו אסטרטגיית מדדים אתם משתמשים, מדידה היא יותר מאשר בדיקה של הביצועים ביחס למדדי ה-KPI. הנתונים גם עוזרים לכם להבין את ההשפעה של השיפורים האלה בכלי לאיתור מיקומים על העסק שלכם. בנוסף, אפשר להשוות בין המדדים מ-Google Analytics בכלי לאיתור מיקום לבין המדדים של פרופיל העסק. לדוגמה, באמצעות השוואה בין המדדים האלה, תוכלו לראות כמה לקוחות מקבלים מסלול הגעה מהכלי לאיתור חנויות וממפות Google, ואז מבקרים במיקומים הפיזיים שלכם.

שיפור של Locator Plus

בהתאם לצרכים של העסק או של המשתמשים, אפשר לשפר עוד יותר את חוויית המשתמש.

שליחת מסלול לנייד

כדי להקל עוד יותר על המשתמשים להגיע למיקום מסוים, אתם יכולים לשלוח להם בהודעת טקסט או באימייל קישור להוראות הגעה. כשלוחצים על הקישור, אפליקציית מפות 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 באותו פורמט של כתובת כמו היעד. אבל אם לא מציינים אותו, ההוראות מתחילות מהמיקום הנוכחי של המשתמש, שיכול להיות שונה מהמקום שבו הוא השתמש באפליקציית Locator Plus. כתובות URL של מפות מספקות אפשרויות נוספות של פרמטרים של שאילתות, כמו travelmode ו-dir_action=navigate, כדי להפעיל את ההוראות עם הניווט.

הקישור הזה שאפשר ללחוץ עליו, שהוא הרחבה של כתובת ה-URL לדוגמה שלמעלה, מגדיר את origin כאצטדיון כדורגל בלונדון ומשתמש ב-travelmode=transit כדי לספק מסלול לתחבורה ציבורית ליעד.

כדי לשלוח הודעת טקסט או אימייל עם כתובת ה-URL הזו, מומלץ להשתמש באפליקציה של צד שלישי כמו Twilio. אם אתם משתמשים ב-App Engine, אתם יכולים להשתמש בחברות צד שלישי כדי לשלוח הודעות SMS או אימייל. מידע נוסף מופיע במאמר בנושא שליחת הודעות באמצעות שירותים של צד שלישי.

הצגת Street View כדי לעזור למשתמשים לדמיין מיקומים

במקומות רבים בעולם, אפשר להשתמש ב-Street View כדי להציג את החלק החיצוני של מיקום מסוים, וכך המשתמשים יכולים לראות את המיקום לפני שהם מגיעים אליו. אתם יכולים לספק תמונות Street View בפורמט אינטראקטיבי (אינטרנט) או בפורמט סטטי (API), בהתאם לרצון שלכם שהמשתמשים יוכלו להסתכל מסביב לאזור ב-360 מעלות. אפשר להשתמש ב-Street View גם ב-Android וב-iOS.

קביעת מיקום המשתמש באמצעות מיקום גיאוגרפי

ברוב המקרים, אפשר לאתר את המיקום של המשתמש באמצעות שירותי המיקום שמוטמעים במכשירים או בדפדפנים שלו. אנחנו מספקים דוגמה ל שימוש בתכונת המיקום הגיאוגרפי של HTML5 בדפדפן כדי להציג את המיקום הגיאוגרפי של משתמש או מכשיר במפת Google. בנוסף, יש תיעוד בנושא בקשת הרשאות וקבלת מיקום ב- Android וב- iOS. עם זאת, יכול להיות שיהיו מצבים שבהם תרצו להשתמש בכלי חלופי לאיתור מיקום. למשל, אם שירותי המיקום במכשיר מושבתים או אם יש לכם חשש לזיוף המיקום של המכשיר.

‫ Geolocation API הוא API בצד השרת שמחזיר מיקום ורדיוס דיוק על סמך מידע על מגדלי תקשורת וצמתי Wi-Fi שהלקוח יכול לזהות. אפשר להשתמש במיקום גיאוגרפי כמנגנון גיבוי לקביעת מיקום המשתמש, או להשתמש בו כדי לבצע בדיקה צולבת של המיקום שדווח על ידי המכשיר.

שילוב של נתוני מיקום בהתאמה אישית עם Place Details

בקטע הקודם הצגת פרטי מקום, הסברנו איך להשתמש בפרטי מקום כדי לספק למשתמשים מידע מפורט על המיקומים שלכם, כמו שעות פתיחה, תמונות וביקורות.

כדאי להבין את רמות התמחור והמק"טים של שדות נתונים שונים ב-Places API (חדש). כדי לנהל את העלויות, אפשר לשלב את המידע שכבר יש לכם על המיקומים עם המידע העדכני ממפות Google, כמו סגירה זמנית, שעות פעילות בחגים, דירוגים, תמונות וביקורות של משתמשים. אם כבר יש לכם את הפרטים ליצירת קשר של המיקומים, לא תצטרכו לבקש את השדות האלה מ-Place Details, ותוכלו להגביל את מסכת השדות כך שיוחזרו רק השדות שאתם רוצים להציג.

יכול להיות שיש לכם נתונים משלכם על מקומות, שתוכלו להשתמש בהם בנוסף ל-Place Details או במקום Place Details. ב-codelab של איתור מיקום full-stack יש דוגמה לשימוש ב-GeoJSON עם מסד נתונים כדי לאחסן ולאחזר את פרטי המיקום שלכם.

מדריך להטמעה של Locator Plus קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

סקירה כללית

הפעלת ממשקי API

קטעי הטמעה

הצגת המיקומים שלכם במפה אינטראקטיבית

שימוש ב-Quick Builder Locator Plus

שימוש בהטמעה של מפות דינמיות משלכם

איך מקבלים מזהי מקומות

גיאו-קידוד של המיקומים

הוספת מיקומים למפה

הוספת פרטי מקום

כדי לראות סרטונים שניתן לבקש לגביהם פרטים על מקום:

קבלת שעות הפתיחה

בדיקת סגירות

שליטה בעלויות

הצגת מיקומים בתצוגה של 45 מעלות

איפוס לתצוגת המפה המקורית

זיהוי המיקום של המשתמש

כאן אפשר להרחיב את הקטע כדי לראות סרטוני הדרכה להוספת השלמה אוטומטית של מקומות לאפליקציה:

אתר

אפליקציות ל-Android

אפליקציות ל-iOS

מוצגים זמני הנסיעה והמרחק למיקומים הקרובים ביותר

כדי להרחיב את התשובה לדוגמה צריך ללחוץ כאן:

קבלת מסלול ניווט

עזרה למשתמשים בקביעת פגישות

שימוש ב-Quick Builder Locator Plus

איך משתמשים בפרופיל העסק כדי לאפשר קביעת פגישות

דרכים חלופיות להוספת קישורים לפגישות

הצגת מבצעים מקומיים

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

התאמה אישית של המפה

יצירת סמני מפה בהתאמה אישית

שינוי הסגנון של המפה

כאן אפשר לראות אנימציות של יצירת סגנון מפה ועיצוב שלה ב-מסוף Cloud:

סגנונות מפה לפי ענף

אמצעי בקרה של נקודות עניין

קבלת תובנות לגבי השימוש באמצעות ניתוח נתונים

הגדרת Google Analytics

שימוש באירועים מותאמים אישית

מדדים של פרופיל העסק

הרחבה כדי לראות את בקשת הדוגמה.

כדי לראות את התשובה לדוגמה, לוחצים על החץ להרחבה.

שיפור של Locator Plus

שליחת מסלול לנייד

הצגת Street View כדי לעזור למשתמשים לדמיין מיקומים

קביעת מיקום המשתמש באמצעות מיקום גיאוגרפי

שילוב של נתוני מיקום בהתאמה אישית עם Place Details

מדריך להטמעה של Locator Plus