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

סקירה

web iOS API

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

לפיתוח האפליקציות!

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

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

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

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

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

בצד שמאל של התרשים, דפדפן אינטרנט מציג מפה עם חלון קופץ של פרטי המקום.
              בצד ימין של התרשים מופיעה רשימה של ממשקי API שמספקים פונקציונליות שונה:
 ממשק JavaScript API של מפות Google להדמיה של מיקום ותוכן, עיצוב מפה, סמני מפה, Street View בהתאמה אישית והצגת מסלולים. הפעלת השלמה אוטומטית לצורך
              השלמת כתובות ופונקציות הקלדה מראש. מקומות וממשקי API לקידוד גיאוגרפי בשביל מיקום הכתובת. HD Matrix API לדירוג מיקומים לפי מרחק, זמן ומצב נסיעה. Directions API להצגת מסלול על סמך זמן ההגעה ומצב נסיעה.
              באמצע התרשים, סמל של מאגר נתונים שמייצג נקודות של נתוני מיקום מותאמים אישית
              עד סמל של שרת אינטרנט עם חץ כפול ראש שמציין נתונים מסוג קריאה וכתיבה
              בין שרת האינטרנט לבין מאגר הנתונים. החיצים בין דפדפן האינטרנט
              לממשקי ה-API עוברים דרך שרת האינטרנט כמתווך.

הפעלת ממשקי API

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

קטעי הטמעה

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

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

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

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

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

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

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

הצגת מבצעים מקומיים הראה למשתמשים הצעות מקומיות שניתן ללחוץ עליהן בחלונית הצדדית של 'פרטי מקום'.
קבלת מסלול ניווט אפשר לקבל נתוני מסלול מנקודת המוצא ליעד באמצעות אמצעי תחבורה שונים כמו הליכה, נהיגה, רכיבה על אופניים ותחבורה ציבורית.
התאמה אישית של המפה אפשר ליצור סמני מפה מותאמים אישית כדי להבליט את המיקומים שלך ולעצב את המפה כך שיתאימו לצבעי המותג שלך. הצגה (או הסתרה) של נקודות עניין (POI) ספציפיות במפה שלך כדי לעזור למשתמשים להתמצא בצורה טובה יותר ולשלוט בצפיפות של נקודות העניין כדי למנוע עומס על המפה.
קבלת תובנות שימוש בעזרת ניתוח נתונים צריך להגדיר את Google Analytics ולהשתמש בו כדי לקבל תובנות לגבי האסטרטגיה וההטמעה של כלי האיתור.
שליחת מסלול לנייד בנוסף להצגת המסלול במאתר המידע, אפשר גם לשלוח מסלול לטלפון של המשתמש לצורך ניווט באמצעות מפות Google תוך כדי תנועה.
הצגת Street View כדי לעזור למשתמשים להמחיש מיקומים יש לך אפשרות להוסיף תמונות Street View למשתמשים ב-360 מעלות כדי שיוכלו לראות את המיקומים שלך טוב יותר ולעזור להם למצוא את המיקומים שלך מהר יותר.
קביעת מיקום המשתמש באמצעות מיקום גיאוגרפי אם לא רוצים להסתמך על שירותי המיקום במכשיר, אפשר להשתמש במיקום גיאוגרפי כדי לזהות את המיקום של המשתמש.
שילוב נתוני מיקום מותאמים אישית עם פרטי מקום כדאי לשלב פרטי מיקום מותאמים אישית עם פרטי מקום כדי לספק למשתמשים מגוון עשיר של נתונים לקבלת החלטות.

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

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

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

שימוש ב-Quick Builder Locator Plus

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

שילוב פרופיל העסק
קל לנהל את המיקומים ב-Locator Plus באמצעות ייבוא פרטי העסק מפרופיל העסק

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

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

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

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

אחזור מזהי מקומות

בדוגמה הזו: Place API זמין גם: JavaScript

יכול להיות שיש לכם מסד נתונים של המיקומים שלכם עם מידע בסיסי כמו שם המיקום, הכתובת שלו ומספר הטלפון שלו. כדי לאחזר את המידע שיש לפלטפורמה של מפות Google על המקום, כולל הקואורדינטות הגיאוגרפיות ומידע שנוסף על ידי משתמשים, צריך למצוא את מזהה המקום שתואם לכל אחד מהמיקומים במסד הנתונים שלכם. ניתן לבצע קריאה ל- Find Place endpoint (חיפוש מקום של נקודת הקצה) ב-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_locatorplus_v2_a

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

קידוד גיאוגרפי של המיקומים

בדוגמה הזו נעשה שימוש ב: Geocoding API זמין גם: JavaScript

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

הנה דוגמה לשימוש ב-Geocoding API כדי לקבל את קו הרוחב וקו האורך של מזהה המקום שהוחזר עבור המשרד ב-Google London:

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

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

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

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

var marker = new google.maps.Marker({
    position: { lat: 51.493073, lng: -0.146550 },
    label:"A",
    title:"Location Name"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

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

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

מתן פרטי מקום

בדוגמה הזו נעשה שימוש ב: Maps JavaScript API זמין גם: API | Android | iOS

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

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

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

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

בדיקת חסימות

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

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

     
  const marker = new google.maps.Marker({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const request = {
    placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
    fields: ["name", "formatted_address", "rating", "website"],
  };
  const infowindow = new google.maps.InfoWindow();
  const service = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(marker, "click", function () {
    service.getDetails(request, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place) {
        infowindow.setContent(
          "<div><strong>" +
            place.name +
            "</strong><br>" +
            place.formatted_address +
            "<br>" +
            "Rating: " +
            place.rating +
            " stars<br>" +
            place.website +
            "</div>"
        );

        infowindow.open(map, this);
      }
    });
  });
  
  

מוצגים מיקומים מתצוגת 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);
}

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

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_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", addUserLocation);
}

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

function addUserLocation() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  // Add a marker to the map.
  const marker = new google.maps.Marker({
          map: map
        });

  marker.setLabel("C");
  marker.setPosition(place.geometry.location);

  // Zoom the map to the marker.
  map.panTo(place.geometry.location);
  map.setZoom(12);
}

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

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

אתר

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

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

מוצגים זמן ההגעה והמרחק אל המיקומים הקרובים ביותר

בדוגמה הזו נעשה שימוש: Distance Matrix API זמין גם: שירות מטריצת מרחקים, Maps JavaScript API

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

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

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

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

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

עיון מהיר בקידוד כתובות URL: %2C = , (פסיק), %3A = : (נקודתיים) ו-%7C = | (קו ניצב).

      https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
      &destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
      &units=metric
      &mode=driving
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_locatorplus_v2_a

זו גרסה שאפשר להעתיק ולהפעיל:

      https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a

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

ניתן להרחיב כדי לראות את התגובה לדוגמה:

{
    "destination_addresses": [
        "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
        "1-13 St Giles High St, West End, London WC2H 8AG, UK",
        "6 Pancras Square, Kings Cross, London N1C 4AG, UK"
    ],
    "origin_addresses": [
        "Unnamed Road, London, UK"
    ],
    "rows": [
        {
            "elements": [
                {
                    "distance": {
                        "text": "4.5 km",
                        "value": 4540
                    },
                    "duration": {
                        "text": "15 mins",
                        "value": 924
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "5.0 km",
                        "value": 5043
                    },
                    "duration": {
                        "text": "17 mins",
                        "value": 1044
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "6.9 km",
                        "value": 6919
                    },
                    "duration": {
                        "text": "23 mins",
                        "value": 1357
                    },
                    "status": "OK"
                }
            ]
        }
    ],
    "status": "OK"
}

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

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

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

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

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

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

בדוגמה הזו: שירות המסלול של API JavaScript במפות Google זמין גם: שירות אינטרנט של Directions API לשימוש ב-Android וב-iOS, ישירות מהאפליקציה או מרחוק דרך שרת proxy

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

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

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

למידע נוסף על התכונות האלה של מפות Google, אפשר לקרוא את מסמכי התיעוד של Maps JavaScript API או לעיין בCodelabs המפורטים כדי לפתח מאתר.

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

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

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

שימוש ב-Quick Builder Locator Plus

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

Google הזמנת מקומות
הוספת יכולות של הזמנות לכלי לאיתור חנויות

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

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

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

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

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

  1. יוצרים ממשקי Business Profile API placeActionLink למיקום מסוג 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"
    }
    
  2. מאתרים את המיקום בפרופיל העסק שמשויך למזהה המקום בפלטפורמה של מפות Google.

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

    1. הצגת רשימה של חשבונות הפרויקט
    2. רשימה של כל המיקומים בחשבון.
    3. במיקומי החשבונות, השדה LocationKey מכיל את מזהה המקום של הפלטפורמה של מפות Google, ואפשר להשוות אותו למזהה המקום של המיקום שמוצג.
  3. בעזרת מזהה המיקום, תוכלו לקבל את הקישור הרצוי לפעולה. כדי לאחזר פגישה placeActionLink קיימת, מציגים את רשימת placeActionLinks קיימת למיקום ומסננים לפי placeActionType כדי למצוא את הקישור לפגישה שרוצים להשתמש בה (APPOINTMENT, ONLINE_APPOINTMENT או DINING_RESERVATION).

    בדוגמה הבאה רואים placeActionLink של APPOINTMENT בתשובה מהשיחה 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"
           }
       ]
     }
  4. יוצרים ומאכלסים <div> בחלונית הצדדית בנתונים רלוונטיים מהאובייקט placeActionLink, במיוחד ה-URI של הקישור להזמנת הפגישה.

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

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

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

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

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

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

  1. באמצעות Google My Business API, יוצרים פוסטים על מבצעים שרוצים להציג, מסוג OFFER.
  2. מאתרים את מזהה המיקום או המיקום של פרופיל העסק שמשויכים למזהה המקום במפה.

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

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

    בהמשך מוצגת בקשה לדוגמה לפרטי מיקום בממשקי ה-API של פרופיל העסק ב-Google:

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

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

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

          {
        "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"
        }
    }
          
  3. עכשיו, אחרי שיש לך את מזהה המיקום, אפשר לקבל את המבצע הרצוי. כדי לאחזר פוסט של מבצע קיים, צריך לרשום את השדה 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."
                }
            },
        ],
    }
            
  4. יוצרים ומאכלסים <div> בחלונית הצדדית בנתונים רלוונטיים מהאובייקט localPost.

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

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

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

יצירת סמני מפה מותאמים אישית

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

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

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

עיצוב המפה

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

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

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

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

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

בדף &#39;סגנון מפה&#39;, המשתמש לוחץ על &#39;יצירת סגנון מפה חדש&#39;. בדף &#39;סגנון מפה חדש&#39;, באמצעות העכבר לוחצים על לחצן הבחירה שלצד כל אחד
 מהסגנונות הבאים שמותאמים במיוחד לתעשייה: נסיעות, לוגיסטיקה, נדל&quot;ן וקמעונאות. כשמשתמשים לוחצים על כל לחצן, התיאור של סגנון המפה והתצוגה המקדימה הגרפית משתנים.

בקרה על נקודות עניין

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

בדף &#39;סגנון מפה&#39;, המשתמש לוחץ על &#39;יצירת סגנון מפה חדש&#39;. בדף
                &#39;סגנון מפה חדש&#39;, בקטע &#39;יצירת סגנון משלך&#39;, לחצן הבחירה של מפות Google
                נבחר. העכבר לוחץ על לחצן הבחירה Atlas של הסגנון Atlas, ולאחר מכן לוחץ על &#39;פתיחה בעורך סגנונות&#39;. בעורך הסגנונות, העכבר לוחץ על
                התכונה &#39;נקודות עניין&#39; ולאחר מכן לוחץ על רכיב הסמל, ומגדיר את
                הצבע לאדום. לאחר מכן, העכבר בוחר את תיבת הסימון &#39;צפיפות של נקודת העניין&#39; ומחליק את בקרת הצפיפות שמאלה כדי ליצור את הצפיפות המקסימלית. יותר ויותר סמנים אדומים
                יופיעו בתצוגה המקדימה של המפה ככל שהצפיפות תגדל. לאחר מכן, העכבר יעבור ללחצן &#39;שמירה&#39;.

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

Locator Plus Analytics
מרכז הבקרה של ניתוח הנתונים של מאתר החנויות מספק מדדי ביצועים

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

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

הגדרת Google Analytics

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

בהמשך מוצגת דוגמה ל'תג גלובלי' שאפשר להדביק באתר כדי להפעיל את 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 Analtics מופיעה בתצוגה 'בדיקה' של הדפדפן, בכרטיסייה 'רשת'. (יש ללחוץ כדי להגדיל).

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

 

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

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

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

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

בבקשה לדוגמה הבאה לממשקי ה-API של 'פרופיל העסק ב-Google' מבקשים כמה סוגים של מדדים. כדי לעקוב אחרי קליקים על מוצרים, המדדים 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"
                   }
               }
           ]
       }
   ]
}

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

  • 1571 צפיות של המיקום במפות Google
  • 631 צפיות במיקום בחיפוש Google.
  • 3 בקשות למסלול נסיעה למיקום.
  • 42 LOCAL_POST_ACTIONS_CALL_TO_ACTION קליקים על מוצרים.
  • 11 צפיות בפוסטים מקומיים בחיפוש Google.

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

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


שיפור של תכונת האיתור Plus

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

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

כדי להקל על המשתמשים להגיע למיקום מסוים, אפשר לשלוח להם הודעת טקסט או אימייל עם קישור למסלול. כשהוא ילחץ עליו, אפליקציית מפות 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 באותו פורמט כתובת כמו היעד. עם זאת, אם משמיטים את המסלול, המסלול מתחיל מהמיקום הנוכחי של המשתמש, ועשוי להיות שונה מהמיקום שבו הוא השתמש באפליקציית Locator Plus. כתובות URL של מפות Google מספקות אפשרויות נוספות של פרמטרים של שאילתות, כמו 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 שהלקוח יכול לזהות. אפשר להשתמש בתכונה 'מיקום גיאוגרפי' כמנגנון גיבוי לקביעת מיקום המשתמש, או להשתמש בו כדי לבדוק את המיקום המדווח על ידי המכשיר.

שילוב נתוני מיקום מותאמים אישית עם פרטי מקום

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

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

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