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

סקירה כללית

אתר iOS ב-API

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

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

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

תרשים ארכיטקטורה
תרשים אדריכלי (צריך ללחוץ כדי להגדיל)

הפעלת ממשקי API

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

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

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

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

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

שיוך של מיקומי חנויות למקומות בפלטפורמה של מפות Google

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

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

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

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

בדוגמה הזו: ספריית ההשלמה האוטומטית של המקומות ב-Maps JavaScript API זמין גם: Android | iOS

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

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

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

פונקציונליות של השלמה אוטומטית של כתובות
פונקציונליות של השלמה אוטומטית של כתובות (יש ללחוץ להגדלה)

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

מוצגות אפשרויות מיקום
הצגת אפשרויות מיקום (יש ללחוץ כדי להגדיל)

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

אתר

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

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

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

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

הרשאת גישה למיקום המשתמש בדפדפן
בקשת הרשאה לדפדפן אינטרנט (יש ללחוץ כדי להגדיל)

זיהוי החנויות הקרובות ביותר

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

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

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

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

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

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

הצגת פרטי החנות

בדוגמה הזו נעשה שימוש ב: Places Library (ספריית מקומות), Maps JavaScript API זמין גם: Places SDK ל-Android | Places SDK ל-iOS | Places API

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

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

הצגת אפשרויות החנות
הצגת האפשרויות לחנות (יש ללחוץ כדי להגדיל)

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

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

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

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

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

בדוגמה הזו: 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_productlocator_v1_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
});
}

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

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

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

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

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

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

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

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

עיצוב המפה

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

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

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

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

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

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

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

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

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

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

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

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_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, כמו סגירה זמנית, שעות הפעילות בחגים ודירוגים, תמונות וביקורות של משתמשים. אם כבר יש לך פרטים ליצירת קשר עם החנויות שלכם, אין צורך לבקש את השדות האלה פרטי מקום ועשויים להגביל את הבקשה לאחזור נתונים בסיסיים או מסוג Atmosphere בלבד שדות נתונים, בהתאם לתוכן שרוצים להציג.

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