Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

סקירה כללית

web iOS API

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

ליצירה

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

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

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

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

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

בצד ימין של הדיאגרמה, דפדפן אינטרנט מציג מפה עם חלון קופץ של פרטי מקום.
בצד ימין של הדיאגרמה, רשימה של ממשקי API שמספקים פונקציונליות שונה:
Maps JavaScript API להצגת מיקום ותוכן, סגנון מפה, סמני מפה, Street View בהתאמה אישית והצגת מסלולים. השלמה אוטומטית למקומות לצורך השלמת כתובות ופונקציונליות של הקלדה מראש. ממשקי Places ו-Geocoding API למיקום כתובת. ‫Distance Matrix API כדי לדרג מיקומים לפי מרחק, זמן ואמצעי תחבורה. ‫Directions 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 כדי לספק למשתמשים מערך עשיר של נתונים שיעזרו להם לקבל החלטות.

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

פריסה ב-Cloud — אפשר לפרוס בקלות את פתרון 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 Maps Platform לקבלת רשימה מלאה של השפות והאזורים הנתמכים, וקראו מידע נוסף על השימוש בregionפרמטר.

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

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

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

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

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

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

המרת כתובות לקואורדינטות (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

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

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

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

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

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

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

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

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

בדיקת סגירות

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

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

     
  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);
}

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

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

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

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

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

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

אפשר גם: Android | iOS

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

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

כדי להוסיף את ספריית ההשלמה האוטומטית למקומות לאתר, צריך רק להוסיף כמה פרמטרים של שאילתה לכתובת ה-URL של הסקריפט של Maps 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

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

בדוגמה הזו נעשה שימוש ב: Distance Matrix API (קודם)

אפשר גם להשתמש ב: Distance Matrix Service, Maps JavaScript API (Legacy)

אחרי שתקבלו את המיקום של המשתמש, תוכלו להשוות אותו למיקומים של העסקים שלכם. השימוש ב-Distance Matrix Service, Maps JavaScript API (Legacy) עוזר למשתמשים לבחור את המיקום שהכי נוח להם להגיע אליו לפי זמן נסיעה או מרחק בכביש.

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

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

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

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

טבלת קידודי תווים לכתובות URL: %2C = , (פסיק), %3A = : (נקודתיים), ו-%7C = | (קו אנכי).

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

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

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

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

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

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

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

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

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

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

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

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

בדוגמה הזו נעשה שימוש ב: שירות המסלולים של Maps JavaScript API

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

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

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

כשמשתמשים צופים ב-Place Details, הם צופים בפרטים של מזהה מקום בפלטפורמה של Google Maps Platform. מזהה המקום משויך למזהה מיקום בפרופיל העסק, לכן צריך למצוא את מזהה המיקום על סמך מזהה המקום במפה כדי לאחזר ולהציג את הקישור שיצרתם להזמנת תורים. מבצעים את הקריאות הבאות ל-Business Profile APIs:
1. הצגת רשימה של החשבונות בפרויקט.
2. הצגת רשימה של כל המיקומים בחשבון.
3. במיקומי החשבון, התג LocationKey מכיל את מזהה המקום ב-Google Maps Platform, שאפשר להשוות אותו למזהה המקום של המיקום שמוצג.
בעזרת מזהה המיקום, אפשר לקבל את הקישור לפעולה הרצוי. כדי לאחזר פגישה קיימת placeActionLink, מציגים את רשימת הפגישות הקיימות placeActionLinks במיקום ומסננים לפי placeActionType כדי למצוא את הקישור לפגישה שרוצים להשתמש בו (APPOINTMENT, ‏ONLINE_APPOINTMENT או DINING_RESERVATION).
הערה: לפעולות לגבי המקום שנוצרו באמצעות Google הזמנת מקומות (Google Maps Booking API) יהיה ערך placeActionType של AGGREGATOR_3P.
בדוגמה הבאה מוצג APPOINTMENT placeActionLink בתגובה מהקריאה LIST.
```
 {
   "placeActionLinks": [
       {
           "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
           "providerType": "MERCHANT",
           "isEditable": true,
           "uri": "https://example.com/",
           "placeActionType": "APPOINTMENT",
           "createTime": "2021-05-01T01:17:41.609161Z",
           "updateTime": "2021-05-01T01:17:41.609161Z"
       }
   ]
 }
```
יוצרים ומאכלסים <div> בחלונית הצדדית עם נתונים רלוונטיים מאובייקט placeActionLink, במיוחד מזהה ה-URI של הקישור להזמנת פגישה.

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

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

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

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

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

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

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

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

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

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

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

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"
    }
}

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

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

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

בדוגמה הבאה מוצג OFFER localPost בתגובה.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצגת נקודות עניין

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

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

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

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

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

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

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

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

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

הגדרת Google Analytics

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיפור של Locator Plus

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

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

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

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

      https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

אפשר גם להוסיף פרמטר שאילתה origin בפורמט הכתובת של היעד. אבל אם לא תציינו אותו, המסלול יתחיל מהמיקום הנוכחי של המשתמש, שיכול להיות שונה מהמקום שבו הוא השתמש באפליקציית Locator Plus. כתובות URL של מפות מספקות אפשרויות נוספות של פרמטרים של שאילתות, כמו travelmode ו-dir_action=navigate, כדי להפעיל את המסלול עם ניווט.

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

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

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

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

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

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

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

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

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

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

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

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

סקירה כללית

הפעלת ממשקי API

סעיפים בנושא הטמעה

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

בדיקת סגירות

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

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

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

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

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

אתר

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

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

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

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

קבלת הוראות ניווט

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

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

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

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

הצגת נקודות עניין

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

הגדרת Google Analytics

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

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

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

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

שיפור של Locator Plus

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

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

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

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

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