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

סקירה כללית

אינטרנט iOS API

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

אני רוצה ליצור

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

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

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

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

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

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

הפעלת ממשקי API

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

סעיפי ההטמעה

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

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

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

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

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

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סביר להניח שיש לכם מסד נתונים של המיקומים שלכם עם מידע בסיסי, כמו השם של המיקום, הכתובת ומספר הטלפון שלו. כדי לאחזר מידע מ-Google Maps Platform על המקום הזה, כולל קואורדינטות גיאוגרפיות ומידע שמשתמשים הוסיפו, צריך למצוא את מזהה המקום שתואם לכל אחד מהמיקומים במסד הנתונים. אתם יכולים לשלוח קריאה ל נקודת הקצה של חיפוש טקסט (חדש) ב-Places API (חדש) ולבקש רק את השדה places.id במסכת השדות כדי להפעיל את המק"ט Text Search Essentials IDs Only. דוגמה לבקשת מזהה המקום של משרד Google בלונדון:

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

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

המרת כתובות לקואורדינטות (geocoding) של המיקומים שלכם

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

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

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

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

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

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

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

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

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

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

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

מתן פרטי מקום

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

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

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

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

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

בדיקת סגירות

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בשלב הבא, מוסיפים לדף רכיב מאגר תגים שאליו יצורף הווידג'ט של PlaceAutocompleteElement.

<div id="autocomplete-container"></div>

בסיום, מאתחלים את הווידג'ט PlaceAutocompleteElement ומוסיפים אותו לקונטיינר. ‫includedPrimaryTypes: ["geocode"] מגדיר את הווידג'ט כך שיקבל כתובות רחוב, שכונות, ערים ומיקודים, כדי שהמשתמשים יוכלו להזין כל רמת פירוט לתיאור המקור שלהם. כך אפשר להגביל את ההצעות להשלמת החיפוש של מקומות. כשמשתמש בוחר חיזוי, האירוע gmp-select מופעל ואפשר לקרוא ל-place.fetchFields() כדי לבקש את השדה location שמכיל את קו הרוחב וקו האורך של נקודת המוצא של המשתמש. אתם תשתמשו בקואורדינטות האלה כדי למרכז מחדש את המפה ולציין את הקשר בין המיקומים שלכם לנקודת המוצא.

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });
}

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

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

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

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

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

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

אתר

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

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

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

בדוגמה הזו משתמשים ב: Routes API אפשר גם להשתמש ב: ספריית המסלולים, Maps JavaScript API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

הפעלת קישורים להזמנה בתוסף מפה באמצעות &quot;Google הזמנת מקומות&quot;
הוספת אפשרויות להזמנת תורים בתוסף המפה

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

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

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

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

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

  1. יוצרים placeActionLink של ממשקי Business Profile API למיקום מהסוג APPOINTMENT,‏ ONLINE_APPOINTMENT או DINING_RESERVATION. האובייקט placeActionLink ישמש אתכם לקישור לפגישה בחלונית הצדדית. (אם כבר יצרתם את הקישור לפעולת קביעת הפגישה שאתם רוצים, דלגו לשלב הבא). זו דוגמה לתשובה לפעולת POST מוצלחת של placeActionLinks.create:

    {
        "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
        "providerType": "MERCHANT",
        "isEditable": true,
        "uri": "https://example.com/reservation-uri",
        "placeActionType": "DINING_RESERVATION",
        "createTime": "2021-05-01T01:17:41.609161Z",
        "updateTime": "2021-05-01T01:17:41.609161Z"
    }
  2. מוצאים את המיקום של פרופיל העסק שמשויך למזהה המקום ב-Google Maps Platform.

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

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

    בדוגמה הבאה מוצג APPOINTMENT placeActionLink בתשובה מהקריאה ל-LIST.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עיצוב המפה

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

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

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

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

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

בדף &quot;סגנון המפה&quot;, לוחצים על &quot;יצירת סגנון מפה חדש&quot;. בדף New Map Style, לוחצים על כפתור בחירה לצד כל אחד מסגנונות המפה הבאים שמותאמים לתעשייה: Travel,‏ Logistics,‏ Real Estate ו-Retail. כשלוחצים על כל אחד מהלחצנים, התיאור של סגנון המפה והתצוגה המקדימה הגרפית משתנים.

פקד נקודות עניין

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

בדף &quot;סגנון המפה&quot;, לוחצים על &quot;יצירת סגנון מפה חדש&quot;. בדף New Map Style, בקטע Create Your Own Style, כפתור הבחירה Google Map מסומן. העכבר לוחץ על כפתור הבחירה Atlas לסגנון Atlas,
                ואז לוחץ על Open in Style Editor (פתיחה בכלי לעריכת סגנונות). בעורך הסגנון, לוחצים עם העכבר על התכונה &quot;נקודות עניין&quot;, ואז לוחצים על הרכיב &quot;סמל&quot; ומגדירים את הצבע לאדום. העכבר בוחר את תיבת הסימון &quot;צפיפות נקודות העניין&quot; ומזיז את פקד הצפיפות ימינה כדי להגדיר צפיפות מקסימלית. ככל שהצפיפות עולה, מופיעים יותר ויותר סמנים אדומים בתצוגה המקדימה של המפה. העכבר זז אל כפתור השמירה.

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

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

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

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

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

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

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

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

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

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

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

הגדרת Google Analytics

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

בבקשה לדוגמה הבאה לממשקי Business Profile 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"
                   }
               }
           ]
       }
   ]
}

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

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

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

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


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

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

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

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

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