מאתר מוצרים - מדריך הטמעה

סקירה כללית

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

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

הפעלת ממשקי API

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

• Maps JavaScript API
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

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

הקטעים של מדריך ההטמעה

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

• check_circle_filled סמל סימן הווי הוא שלב מרכזי בתהליך ההטמעה.
• stars סמל הכוכב הוא התאמה אישית אופציונלית, אבל מומלצת, לשיפור הפתרון.

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

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

בדוגמה הזו נעשה שימוש ב-: Places API

אפשרויות נוספות: JavaScript

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

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

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

בדוגמה הזו נעשה שימוש ב: ספריית Places Autocomplete בממשק API של JavaScript במפות Google

האפליקציה זמינה גם: Android | iOS

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

טיפול ברשומים שהוזנו באמצעות השלמה אוטומטית

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

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

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

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

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

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

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

זמינים גם: Distance Matrix API

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

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

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

בדוגמה הבאה מתבצעת קריאה ל-Distance Matrix Service, ‏ Maps JavaScript API, עם ציון המיקום המוצא של המשתמש ו-25 מיקומי חנויות בכל פעם.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

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

בדוגמה הזו נעשה שימוש ב: ספריית מקומות, Maps JavaScript API

זמינות גם: Places SDK ל-Android | Places SDK ל-iOS | Places API

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

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

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

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

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};


service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

---

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

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

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

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

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

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

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

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

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

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

שימוש במפות דינמיות

בדוגמה הזו נעשה שימוש ב: 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_productlocator_v1_a"></script>

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

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

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

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

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

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

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

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

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

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

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

עיצוב המפה

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

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

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

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