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

סקירה כללית

web iOS API

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

כדאי לבנות עכשיו!

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

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

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

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

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

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

הפעלת ממשקי API

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

סעיפי הטמעה

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

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

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

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

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

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

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

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

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

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

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

שימוש באיתור מהיר של Builder Builder Plus

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

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

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

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

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

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

ראשית, יש לכלול את Maps JavaScript API בדף. לשם כך, צריך לקשר את הסקריפט הבא לדף ה-HTML.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>

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

בשלב הבא, צריך להוסיף קוד HTML div כדי למקם את המפה בדף. כאן יוצג המפה.

<div id="map"></div>

השלב הבא הוא הגדרת הפונקציונליות הבסיסית של המפה שלך. הפעולה הזו מתבצעת בפונקציית הסקריפט initMap שצוינה בכתובת ה-URL של הסקריפט. בסקריפט הזה, שמוצג בדוגמה הבאה, אפשר להגדיר את המיקום הראשוני, סוג המפה ואת הפקדים שיהיו זמינים למשתמשים שלך במפה. לתשומת ליבך: getElementById() מפנה למזהה "map" div למעלה.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    zoomControl: false
  });
}

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

קבלת מזהי מקומות

דוגמה זו משתמשת ב: Places API זמין גם: JavaScript

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

אם במסד הנתונים של המיקומים יש כתובות (רחוב) אבל לא קואורדינטות גיאוגרפיות, יש להשתמש ב-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

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

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

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

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

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

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

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

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

הדוגמה הזו משתמשת בפרמטרים הבאים: המרחק מטריצת 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 דקות

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

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

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

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

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

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

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

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

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

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

שימוש באיתור מהיר של Builder Builder Plus

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

Google הזמנת מקומות
הוספת יכולות הזמנה לממקם החנויות

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

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

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

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

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

  1. יוצרים ממשקי 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 של פרופיל העסק:

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

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

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

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

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

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

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

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

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

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

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

    בהמשך מוצגת בקשה לדוגמה של פרטי מיקום בממשקי 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.

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

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

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

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

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

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

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

עיצוב המפה

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

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

הרחבה להצגת אנימציות של יצירת סגנון וסגנון המפה ב-Cloud Console:

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

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

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

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

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

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

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

על-ידי הכללת map_ids אחד או יותר בכתובת האתר של הסקריפט, ממשק ה-API של מפות 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>

הקוד הבא מציג מפה מעוצבת בדף האינטרנט. (לא מוצג רכיב HTML <div id="map"></div> שבו המפה תופיע בדף ).

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 51.485925, lng: -0.129500},
  zoom: 12,
  mapId: '1234abcd5678efgh'
});

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

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

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

כלי האיתור של Analytics Plus
לוח הבקרה של Analytics בנושא איתור חנויות נותן לך מדדי ביצועים

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

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

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

 

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

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

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

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

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

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

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