דף זה תורגם על ידי Cloud Translation API.

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

סקירה כללית

אתר iOS ב-API

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

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

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

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

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

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

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

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

הפעלת ממשקי API

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

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

קטעי הטמעה

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

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

בדוגמה הזו: API JavaScript של מפות

זמין גם: Android | iOS

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

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

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

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

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

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

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

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

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

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

בדוגמה הזו: Places API

זמין גם: JavaScript

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

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

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

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

בדוגמה הזו: Geocoding API

זמין גם: JavaScript

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

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

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. זאת דוגמה לאשכול סמנים בדוגמה של מאתר חנויות JavaScript ב-GitHub.

מתן פרטי מקום

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

זמין גם: API | Android | iOS

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

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

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

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

בדיקת חסימות

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

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

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

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

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

מוצגים מיקומים מתצוגת 45°

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

זמין גם: Android | iOS

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

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

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

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

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

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

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

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

בדוגמה הזו: API JavaScript של מפות Google

זמין גם: Android | iOS

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

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

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

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

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

<input id="autocomplete" placeholder="Enter starting
      address, city, or zip code" type="text"></input>

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

  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"],
      componentRestrictions: {'country': ['gb']},
      fields: ['place_id', 'geometry', 'formatted_address'] }
  );
  // When the user selects an address from the drop-down
  // zoom to the select location and add a marker.
  autocomplete.addListener("place_changed", addUserLocation);
}

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

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

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

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

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

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

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

אתר

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

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

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

בדוגמה הזו: ממשק API של מטריצת מרחקים

זמין גם: שירות מטריצת מרחק, Maps JavaScript API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

עיצוב המפה

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

קבלת תובנות שימוש בעזרת ניתוח נתונים

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

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

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

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

הגדרת Google Analytics

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סקירה כללית

הפעלת ממשקי API

קטעי הטמעה

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

מתן פרטי מקום

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

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

בדיקת חסימות

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

מוצגים מיקומים מתצוגת 45°

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

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

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

אתר

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

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

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

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

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

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

שימוש ב-Quick Builder Locator Plus

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

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

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

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

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

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

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

עיצוב המפה

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

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

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

קבלת תובנות שימוש בעזרת ניתוח נתונים

הגדרת Google Analytics

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

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

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

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

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

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

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

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

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