محصول یاب - راهنمای پیاده سازی

نمای کلی

وب iOS API

پلتفرم نقشه‌های گوگل برای وب (JS، TS)، اندروید و iOS در دسترس است و همچنین APIهای خدمات وب را برای دریافت اطلاعات در مورد مکان‌ها، مسیرها و مسافت‌ها ارائه می‌دهد. نمونه‌های موجود در این راهنما برای یک پلتفرم نوشته شده‌اند، اما لینک‌های مستندات برای پیاده‌سازی در پلتفرم‌های دیگر ارائه شده است.

وقتی کاربران شما محصولات شما را به صورت آنلاین می‌بینند، می‌خواهند بهترین و راحت‌ترین راه را برای دریافت سفارش خود پیدا کنند. راهنمای پیاده‌سازی و نکات سفارشی‌سازی «مکان‌یاب محصول» همان چیزی است که گوگل به عنوان ترکیب بهینه APIهای پلتفرم نقشه‌های گوگل برای ایجاد تجربیات کاربری عالی مکان‌یاب محصول توصیه می‌کند.

با دنبال کردن این راهنمای پیاده‌سازی، می‌توانید به مشتریان کمک کنید تا اطلاعات دقیقی را که برای یافتن محصولات شما نیاز دارند، مشاهده کنند و چه در حال رانندگی، دوچرخه‌سواری، پیاده‌روی یا استفاده از وسایل حمل و نقل عمومی باشند، آنها را به فروشگاهی که کالای مورد نظرشان را دارد، راهنمایی کنید.

معماری سیستم مکان‌یاب محصول که مرورگر وب، وب سرور، پایگاه داده موجودی و APIهای پلتفرم نقشه‌های گوگل را به هم متصل می‌کند
نمودار معماری (برای بزرگنمایی کلیک کنید)

فعال کردن APIها

برای پیاده‌سازی Product Locator، باید APIهای زیر را در کنسول Google Cloud فعال کنید. هایپرلینک‌های زیر شما را به کنسول Google Cloud هدایت می‌کنند تا هر API را برای پروژه انتخابی خود فعال کنید:

برای اطلاعات بیشتر در مورد تنظیمات، به شروع به کار با پلتفرم نقشه‌های گوگل مراجعه کنید.

بخش‌های راهنمای پیاده‌سازی

پیاده‌سازی‌ها و سفارشی‌سازی‌های زیر در اینجا پوشش داده شده‌اند:

  • آیکون علامت تیک، یک مرحله اصلی پیاده‌سازی است.
  • آیکون ستاره یک سفارشی‌سازی اختیاری است اما برای بهبود راهکار توصیه می‌شود.
مکان‌های فروشگاه را با مکان‌های پلتفرم نقشه‌های گوگل مرتبط کنید مکان فروشگاه را با مکانی در پلتفرم نقشه گوگل تطبیق دهید.
شناسایی موقعیت مکانی کاربر قابلیت تایپ همزمان با استفاده را اضافه کنید تا تجربه کاربری در همه پلتفرم‌ها بهبود یابد و دقت آدرس‌دهی با حداقل تعداد ضربه به کلیدها افزایش یابد.
شناسایی نزدیکترین فروشگاه‌ها مسافت و زمان سفر را برای چندین مبدا و مقصد محاسبه کنید و به صورت اختیاری انواع مختلف حمل و نقل مانند پیاده‌روی، رانندگی، حمل و نقل عمومی یا دوچرخه‌سواری را مشخص کنید.
نمایش اطلاعات فروشگاه اطلاعات غنی از داده‌ها را در فروشگاه‌های خود نمایش دهید تا کاربران بتوانند راحت‌تر به آنها دسترسی پیدا کنند.
ارائه مسیرهای ناوبری با استفاده از انواع مختلف حمل و نقل مانند پیاده‌روی، رانندگی، دوچرخه‌سواری و حمل و نقل عمومی، داده‌های مسیر را از مبدا تا مقصد دریافت کنید.
ارسال مسیر به موبایل علاوه بر نمایش مسیرها در صفحه وب خود، می‌توانید مسیرها را برای پیمایش با استفاده از نقشه‌های گوگل در حال حرکت به تلفن کاربر نیز ارسال کنید.
مکان‌های خود را روی نقشه تعاملی نمایش دهید برای برجسته کردن مکان‌هایتان، نشانگرهای نقشه سفارشی ایجاد کنید و نقشه را طوری طراحی کنید که با رنگ‌های برندتان مطابقت داشته باشد. نقاط مورد علاقه (POI) خاص را روی نقشه خود نمایش دهید (یا پنهان کنید) تا به کاربران در جهت‌یابی بهتر کمک کنید و تراکم POI را کنترل کنید تا از شلوغی نقشه جلوگیری شود.
داده‌های موقعیت مکانی سفارشی را با جزئیات مکان ترکیب کنید جزئیات مکان سفارشی خود را با جزئیات مکان ترکیب کنید تا مجموعه‌ای غنی از داده‌ها را برای تصمیم‌گیری در اختیار کاربران قرار دهید.

مکان‌های فروشگاه را با مکان‌های پلتفرم نقشه‌های گوگل مرتبط کنید

دریافت شناسه مکان‌ها

این مثال از موارد زیر استفاده می‌کند: Places API (جدید) همچنین موجود است: جاوا اسکریپت

ممکن است شما یک پایگاه داده از فروشگاه‌های خود با اطلاعات اولیه مانند نام آن مکان، آدرس و شماره تلفن آن داشته باشید و بخواهید آن را به مکانی در پلتفرم نقشه‌های گوگل به عنوان مجموعه‌ای از مقاصد نهایی که کاربران شما می‌توانند محصولات را دریافت کنند، مرتبط کنید. برای دریافت اطلاعاتی که پلتفرم نقشه‌های گوگل در مورد آن مکان دارد، از جمله مختصات جغرافیایی و اطلاعات ارائه شده توسط کاربر، شناسه مکانی را که با هر یک از فروشگاه‌های موجود در پایگاه داده شما مطابقت دارد، پیدا کنید. می‌توانید نقطه پایانی جستجوی متن (جدید) را در API مکان‌ها (جدید) فراخوانی کنید و فقط فیلد places.id را در ماسک فیلد درخواست کنید (که باعث فعال شدن شناسه‌های ضروری جستجوی متن SKU می‌شود).

مثال زیر درخواست شناسه مکان برای دفتر گوگل لندن را نشان می‌دهد:

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

شما می‌توانید این شناسه مکان را در پایگاه داده خود به همراه بقیه داده‌های فروشگاه ذخیره کنید و از آن به عنوان روشی کارآمد برای درخواست اطلاعات در مورد فروشگاه استفاده کنید. در ادامه دستورالعمل‌هایی برای استفاده از شناسه مکان برای کد جغرافیایی، بازیابی جزئیات مکان و درخواست مسیر به مکان آمده است.

مکان‌های خود را جغرافیایی کنید

این مثال از موارد زیر استفاده می‌کند: API کدگذاری جغرافیایی همچنین موجود است: جاوا اسکریپت

اگر پایگاه داده فروشگاه‌های شما آدرس خیابان‌ها را دارد اما مختصات جغرافیایی ندارد، از API ژئوکدینگ برای بدست آوردن طول و عرض جغرافیایی آن آدرس استفاده کنید تا بتوانید نزدیکترین فروشگاه‌ها به مشتری خود را محاسبه کنید. می‌توانید فروشگاه را در سمت سرور ژئوکدینگ کنید، طول و عرض جغرافیایی را در پایگاه داده خود ذخیره کنید و حداقل هر 30 روز یکبار آن را به‌روزرسانی کنید .

در اینجا مثالی از استفاده از API ژئوکدینگ برای بدست آوردن طول و عرض جغرافیایی شناسه مکان که برای دفتر گوگل لندن برگردانده شده است، آورده شده است:

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

شناسایی موقعیت مکانی کاربر

این مثال از موارد زیر استفاده می‌کند: تکمیل خودکار مکان در API جاوا اسکریپت نقشه‌ها همچنین موجود است: اندروید | iOS

یکی از اجزای کلیدی در Product Locator شناسایی موقعیت مکانی شروع کاربر است. شما می‌توانید دو گزینه برای مشخص کردن موقعیت مکانی شروع به کاربر ارائه دهید: تایپ مبدا جستجوی خود، یا اعطای مجوز به موقعیت مکانی مرورگر وب یا سرویس‌های موقعیت مکانی موبایل.

مدیریت ورودی‌های تایپ‌شده با استفاده از تکمیل خودکار

کاربران امروزی به قابلیت تکمیل خودکار تایپ در نسخه مصرفی گوگل مپ عادت کرده‌اند. این قابلیت را می‌توان با استفاده از کتابخانه‌های Places پلتفرم گوگل مپ در دستگاه‌های تلفن همراه و وب، در هر برنامه‌ای ادغام کرد. وقتی کاربر آدرسی را تایپ می‌کند، تکمیل خودکار بقیه را از طریق ویجت‌ها پر می‌کند. شما همچنین می‌توانید قابلیت تکمیل خودکار خودتان را مستقیماً با استفاده از API تکمیل خودکار داده مکان ارائه دهید.

فیلد ورودی جستجو که پیشنهادات تکمیل خودکار آدرس را هنگام تایپ کاربر نمایش می‌دهد
قابلیت تکمیل خودکار آدرس (برای بزرگنمایی کلیک کنید)

در مثال زیر، با اضافه کردن پارامتر libraries=places,marker به آدرس URL اسکریپت Maps JavaScript API، کتابخانه‌های Places و Marker را به سایت خود اضافه کنید. 

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

سپس، یک عنصر کانتینر به صفحه خود اضافه کنید که ویجت PlaceAutocompleteElement به آن اضافه شود: 

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

در نهایت، ویجت PlaceAutocompleteElement مقداردهی اولیه کنید و آن را به کانتینر اضافه کنید. محدود کردن پیش‌بینی‌های Place Autocomplete با includedPrimaryTypes: ["geocode"] ویجت را طوری پیکربندی می‌کند که آدرس خیابان‌ها، محله‌ها، شهرها و کدهای پستی را بپذیرد تا کاربران بتوانند هر سطحی از جزئیات را برای توصیف مبدا خود وارد کنند. وقتی کاربری یک پیش‌بینی را انتخاب می‌کند، رویداد gmp-select فعال می‌شود و شما می‌توانید place.fetchFields() را برای درخواست فیلد location حاوی طول و عرض جغرافیایی مبدا کاربر فراخوانی کنید. شما از این مختصات نقشه برای نشان دادن رابطه مکان‌های خود با مبدا استفاده خواهید کرد.

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

// When the user selects an address from the drop-down,
// fetch the place details and search for the nearest stores.
placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
  const place = placePrediction.toPlace();
  await place.fetchFields({
    fields: ["id", "location", "formattedAddress"],
  });
  searchFromOrigin(place);
});
}

در این مثال، به محض اینکه کاربر آدرس را انتخاب می‌کند، تابع searchFromOrigin() شروع به کار می‌کند. این تابع موقعیت مکانی نتیجه منطبق که همان موقعیت مکانی کاربر است را دریافت می‌کند، سپس بر اساس آن مختصات به عنوان مبدا، نزدیکترین مکان‌ها را جستجو می‌کند، که در بخش شناسایی نزدیکترین فروشگاه‌ها مورد بحث قرار گرفته است.

نمای جزئیات محصول که مکان‌های فروشگاه‌های نزدیک را به همراه موجودی انبار و فاصله نشان می‌دهد
نمایش گزینه‌های مکان (برای بزرگنمایی کلیک کنید)

برای مشاهده ویدیوهای آموزشی نحوه افزودن قابلیت تکمیل خودکار مکان به برنامه خود، این قسمت را باز کنید:

وب‌سایت

برنامه‌های اندروید

اپلیکیشن‌های iOS

استفاده از موقعیت جغرافیایی مرورگر

برای درخواست و مدیریت موقعیت جغرافیایی مرورگر HTML5، به نحوه فعال کردن پنجره « استفاده از موقعیت مکانی من» مراجعه کنید:

مجوز مرورگر برای موقعیت مکانی کاربر
درخواست مجوز مرورگر وب (برای بزرگنمایی کلیک کنید)

شناسایی نزدیکترین فروشگاه‌ها

این مثال از موارد زیر استفاده می‌کند: کتابخانه مسیرها، API جاوا اسکریپت نقشه‌ها همچنین موجود است: API مسیرها

وقتی موقعیت مکانی کاربر را پیدا کردید، می‌توانید آن را با موقعیت مکانی فروشگاه‌های خود مقایسه کنید. انجام این کار با کلاس RouteMatrix در کتابخانه مسیرها، Maps JavaScript API (یا ویژگی Compute Route Matrix در Routes API) به کاربران شما کمک می‌کند تا با توجه به زمان رانندگی یا مسافت جاده‌ای، مکانی را که برایشان راحت‌تر است انتخاب کنند.

روش استاندارد سازماندهی فهرستی از مکان‌ها، مرتب‌سازی آنها بر اساس فاصله است. اغلب این فاصله به سادگی با استفاده از خط مستقیم از یک کاربر تا مکان محاسبه می‌شود، اما این می‌تواند گمراه‌کننده باشد. خط مستقیم ممکن است روی یک رودخانه صعب‌العبور یا از میان جاده‌های شلوغ در زمانی باشد که مکان دیگری ممکن است راحت‌تر باشد. این موضوع زمانی مهم است که چندین مکان در فاصله چند کیلومتری از یکدیگر داشته باشید.

متد RouteMatrix.computeRouteMatrix با دریافت لیستی از مکان‌های مبدا و مقصد و بازگرداندن نه تنها مسافت سفر، بلکه زمان سفر بین آنها نیز کار می‌کند. در مورد کاربر، مبدا جایی است که در حال حاضر در آن قرار دارد، یا نقطه شروع مورد نظر او، و مقصدها همان مکان‌ها خواهند بود. مبداها و مقصدها را می‌توان به صورت جفت مختصات، شناسه مکان یا آدرس مشخص کرد. می‌توانید از RouteMatrix.computeRouteMatrix با تنظیمات مسیریابی مانند TRAFFIC_AWARE برای نمایش نتایج بر اساس زمان رانندگی فعلی یا آینده استفاده کنید.

مثال زیر RouteMatrix.computeRouteMatrix را در کتابخانه مسیرها، Maps JavaScript API فراخوانی می‌کند و مبدا کاربر و حداکثر ۲۵ مکان ذخیره را همزمان مشخص می‌کند.

async function getDistances(originLocation) {
  const { RouteMatrix } = await google.maps.importLibrary("routes");
  const request = {
    origins: [originLocation],
    destinations: stores.slice(0, 25).map((store) => store.location),
    travelMode: google.maps.TravelMode.DRIVING,
    routingPreference: "TRAFFIC_AWARE",
    fields: ["distanceMeters", "durationMillis", "condition"],
  };
  return RouteMatrix.computeRouteMatrix(request);
}

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(({ matrix }) => {
      const items = matrix.rows[0].items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].condition === "ROUTE_EXISTS") {
          stores[i].travelDistance = items[i].distanceMeters;
          stores[i].travelDuration = items[i].durationMillis;
        }
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

برای هر مکان نزدیک، می‌توانید وضعیت موجودی محصول را بر اساس پایگاه داده موجودی خود نمایش دهید.

نمایش اطلاعات فروشگاه

این مثال از موارد زیر استفاده می‌کند: کتابخانه مکان‌ها، API جاوا اسکریپت نقشه‌ها همچنین موجود است: Places SDK برای اندروید | Places SDK برای iOS | Places API (جدید)

شما می‌توانید جزئیات غنی از مکان مانند اطلاعات تماس، ساعات کاری و وضعیت فعلی باز بودن آن را به اشتراک بگذارید تا به مشتریان در انتخاب مکان مورد نظر خود یا نهایی کردن سفارششان کمک کنید.

پس از فراخوانی API جاوا اسکریپت Maps برای دریافت جزئیات مکان ، می‌توانید پاسخ را فیلتر و رندر کنید.

گزینه‌های فروشگاه‌های نزدیک که وضعیت موجودی محصول، ساعات کاری و فاصله سفر را نشان می‌دهند
نمایش گزینه‌های فروشگاه (برای بزرگنمایی کلیک کنید)

برای درخواست جزئیات مکان، به شناسه مکان هر یک از مکان‌های خود نیاز دارید. برای دریافت شناسه مکان مکان خود، به بخش «دریافت شناسه‌های مکان» مراجعه کنید.

درخواست جزئیات مکان زیر از کلاس Place برای برگرداندن نام، مختصات، وب‌سایت، شماره تلفن، رتبه‌بندی و ساعات کاری برای شناسه مکان گوگل لندن استفاده می‌کند: 

const place = new google.maps.places.Place({
  id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
});



await place.fetchFields({
  fields: [
    'displayName',
    'nationalPhoneNumber',
    'location',
    'regularOpeningHours',
    'rating',
    'utcOffsetMinutes',
    'websiteURI',
  ],
});



createMarker(place);

بهبود یافتن مکان‌یاب محصول

بسته به کسب و کار یا نیازهای کاربران، می‌توانید تجربه کاربر را بیشتر بهبود بخشید.

ارائه مسیرهای ناوبری

این مثال از موارد زیر استفاده می‌کند: کتابخانه مسیرها، API جاوا اسکریپت نقشه‌ها همچنین موجود است: سرویس وب API مسیرها برای استفاده در اندروید و iOS، چه مستقیماً از برنامه و چه از راه دور از طریق پروکسی سرور

وقتی از داخل سایت یا برنامه‌های خود، مسیرها را به کاربران نشان می‌دهید، نیازی نیست کاربران از سایت شما خارج شوند و حواسشان به صفحات دیگر پرت شود یا رقبا را روی نقشه ببینند. با استفاده از API مسیرها، می‌توانید مسیرهای سازگار با محیط زیست را نیز درخواست کنید تا میزان مصرف سوخت یا انرژی را تخمین بزنید و تأثیر زیست‌محیطی یک سفر را نشان دهید.

کلاس Route در کتابخانه Routes و API جاوا اسکریپت Maps همچنین متدهایی مانند createPolylines() و createWaypointAdvancedMarkers() دارد که به شما امکان می‌دهد نتایج را پردازش کرده و آنها را روی نقشه نمایش دهید.

در ادامه مثالی از درخواست و نمایش یک مسیر روی نقشه آمده است. برای اطلاعات بیشتر در مورد این نمونه، به بخش «دریافت مسیر» مراجعه کنید.

ارسال مسیر به موبایل

برای اینکه دسترسی کاربران به یک مکان آسان‌تر شود، می‌توانید یک لینک مسیر را برایشان پیامک یا ایمیل کنید. وقتی روی آن کلیک می‌کنند، در صورت نصب بودن، برنامه Google Maps روی تلفنشان اجرا می‌شود، یا maps.google.com در مرورگر وب دستگاهشان بارگذاری می‌شود. هر دوی این تجربه‌ها به کاربر این امکان را می‌دهند که از ناوبری گام به گام، از جمله راهنمای صوتی، برای رسیدن به مقصد استفاده کند.

از Maps URLs برای نوشتن یک URL جهت‌یابی مانند زیر استفاده کنید، که در آن نام مکان کدگذاری شده با URL به عنوان پارامتر destination و شناسه مکان به عنوان پارامتر destination_place_id قرار می‌گیرد. نوشتن یا استفاده از Maps URLs هیچ هزینه‌ای ندارد، بنابراین نیازی به وارد کردن کلید API در URL ندارید.

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

شما می‌توانید به صورت اختیاری یک پارامتر پرس‌وجوی origin با همان فرمت آدرس مقصد ارائه دهید. اما با حذف آن، مسیرها از مکان فعلی کاربر شروع می‌شوند که ممکن است با جایی که از برنامه‌ی Product Locator شما استفاده می‌کردند متفاوت باشد. URLهای نقشه‌ها گزینه‌های پارامتر پرس‌وجوی اضافی مانند travelmode و dir_action=navigate برای راه‌اندازی مسیرها با ناوبری روشن ارائه می‌دهند.

این لینک قابل کلیک ، که URL مثال قبلی را بسط می‌دهد، origin به عنوان یک استادیوم فوتبال لندن تنظیم می‌کند و travelmode=transit برای ارائه مسیرهای حمل و نقل عمومی به مقصد استفاده می‌کند.

برای ارسال پیامک یا ایمیل حاوی این URL، در حال حاضر توصیه می‌کنیم از یک برنامه شخص ثالث مانند twilio استفاده کنید. اگر از App Engine استفاده می‌کنید، می‌توانید از شرکت‌های شخص ثالث برای ارسال پیامک یا ایمیل استفاده کنید. برای اطلاعات بیشتر، به بخش ارسال پیام با سرویس‌های شخص ثالث مراجعه کنید.

مکان‌های خود را روی نقشه تعاملی نمایش دهید

استفاده از نقشه‌های پویا

این مثال از موارد زیر استفاده می‌کند: API جاوا اسکریپت نقشه‌ها همچنین موجود است: اندروید | iOS

مکان‌یاب بخش مهمی از تجربه کاربری است. با این حال، برخی از سایت‌ها ممکن است حتی یک نقشه ساده هم نداشته باشند و کاربران را مجبور کنند برای یافتن مکان‌های نزدیک، سایت یا برنامه را ترک کنند. این به معنای یک تجربه نه چندان مطلوب برای کاربرانی است که باید برای به دست آوردن اطلاعات مورد نیاز خود بین صفحات حرکت کنند. در عوض، می‌توانید با تعبیه و سفارشی‌سازی نقشه‌ها در برنامه‌های خود، این تجربه را بهبود بخشید.

اضافه کردن یک نقشه پویا به صفحه شما - یعنی نقشه‌ای که کاربران می‌توانند در آن حرکت کنند، بزرگنمایی و کوچکنمایی کنند و جزئیاتی در مورد مکان‌ها و نقاط مورد علاقه مختلف دریافت کنند - می‌تواند با چند خط کد انجام شود.

ابتدا، باید API جاوا اسکریپت Maps را در صفحه وارد کنید. این کار از طریق لینک دادن اسکریپت زیر در صفحه HTML شما، از جمله libraries=marker انجام می‌شود تا بتوانید نشانگرهای پیشرفته را به نقشه اضافه کنید.

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

این URL به تابع initMap جاوا اسکریپت اشاره دارد که هنگام بارگذاری صفحه اجرا می‌شود. در URL، می‌توانید زبان یا منطقه نقشه خود را نیز تعریف کنید تا مطمئن شوید که برای کشور خاصی که هدف قرار داده‌اید، به درستی قالب‌بندی شده است. تنظیم منطقه همچنین تضمین می‌کند که رفتار برنامه‌های مورد استفاده در خارج از ایالات متحده نسبت به منطقه‌ای که شما تعیین کرده‌اید، جانبدارانه باشد. برای مشاهده لیست کامل زبان‌ها و مناطق پشتیبانی شده و کسب اطلاعات بیشتر در مورد استفاده از پارامتر region ، به جزئیات پوشش پلتفرم نقشه‌های گوگل مراجعه کنید.

در مرحله بعد، برای قرار دادن نقشه خود در صفحه به یک div مربوط به HTML نیاز دارید. این جایی است که نقشه نمایش داده خواهد شد. 

<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 },
mapId: "DEMO_MAP_ID",
zoomControl: false
});
}

برای یک مکان‌یاب، معمولاً به تنظیم مکان اولیه، نقطه یا مرزهای مرکزی و سطح بزرگنمایی (میزان بزرگنمایی نقشه در آن مکان) علاقه‌مند هستید. اکثر عناصر دیگر، مانند تنظیم کنترل‌ها، اختیاری هستند زیرا سطح تعامل با نقشه را تعیین می‌کنید.

نقشه خود را سفارشی کنید

شما می‌توانید ظاهر و جزئیات نقشه خود را به روش‌های مختلفی تغییر دهید. برای مثال، می‌توانید:

  • نشانگرهای سفارشی خود را برای جایگزینی پین‌های پیش‌فرض نقشه ایجاد کنید.
  • رنگ‌های عوارض نقشه را تغییر دهید تا برند شما را منعکس کنند.
  • کنترل کنید که کدام نقاط مورد علاقه را نمایش دهید (جاذبه‌ها، غذا، اقامتگاه و غیره) و با چه تراکمی، به شما این امکان را می‌دهد که توجه کاربر را به مکان‌های خود معطوف کنید و در عین حال مکان‌های دیدنی را که به کاربران کمک می‌کند تا به نزدیکترین مکان برسند، برجسته کنید.

ایجاد نشانگرهای نقشه سفارشی

شما می‌توانید نشانگرهای پیشرفته خود را با تغییر پس‌زمینه پین ​​پیش‌فرض، حاشیه یا رنگ حروف (به عنوان مثال، برای نشان دادن اینکه آیا یک مکان در حال حاضر باز است یا خیر)، جایگزینی نشانگر با یک تصویر گرافیکی سفارشی مانند لوگوی برند خود، یا ساخت نشانگرهای HTML و CSS سفارشی ، سفارشی کنید. پنجره‌های اطلاعات یا پنجره‌های بازشو می‌توانند اطلاعات بیشتری مانند ساعات کاری، شماره تلفن یا عکس‌ها را در اختیار کاربران قرار دهند.

در ادامه یک نقشه نمونه که از نشانگرهای گرافیکی سفارشی استفاده می‌کند، آورده شده است. (به کد منبع در مبحث نشانگرهای گرافیکی سفارشی Maps JavaScript API مراجعه کنید.)

برای اطلاعات دقیق‌تر، به مستندات نشانگرهای پیشرفته برای جاوا اسکریپت (وب) ، اندروید و iOS مراجعه کنید.

نقشه خود را سبک‌دهی کنید

پلتفرم نقشه‌های گوگل به شما این امکان را می‌دهد که نقشه خود را به گونه‌ای طراحی کنید که به کاربران کمک کند نزدیکترین مکان را پیدا کنند، در اسرع وقت به آنجا برسند و به شما در تقویت برندتان کمک کند. به عنوان مثال، می‌توانید رنگ‌های نقشه را برای مطابقت با برند خود تغییر دهید و با کنترل نقاط مورد علاقه‌ای که برای کاربران قابل مشاهده است، می‌توانید حواس‌پرتی‌های روی نقشه را کاهش دهید. پلتفرم نقشه‌های گوگل همچنین تعدادی قالب اولیه نقشه ارائه می‌دهد که برخی از آنها برای صنایع مختلف مانند سفر، لجستیک، املاک و مستغلات و خرده‌فروشی بهینه شده‌اند.

شما می‌توانید سبک‌های نقشه را در صفحه سبک‌های نقشه کنسول Google Cloud در پروژه خود ایجاد یا اصلاح کنید.

برای دیدن انیمیشن‌های ایجاد و استایل‌دهی به نقشه در کنسول ابری، صفحه را باز کنید:

سبک‌های نقشه صنعتی

این انیمیشن سبک‌های نقشه از پیش تعریف‌شده مخصوص هر صنعت را نشان می‌دهد که می‌توانید از آنها استفاده کنید. این سبک‌ها یک نقطه شروع بهینه برای هر نوع صنعت ارائه می‌دهند. به عنوان مثال، سبک نقشه خرده‌فروشی نقاط مورد علاقه روی نقشه را کاهش می‌دهد و به کاربران اجازه می‌دهد تا روی مکان‌های شما و همچنین مکان‌های دیدنی تمرکز کنند تا به آنها کمک کند تا در اسرع وقت و با اطمینان به نزدیکترین مکان برسند.

در صفحه «سبک نقشه»، ماوس روی «ایجاد سبک نقشه جدید» کلیک می‌کند. در صفحه «سبک نقشه جدید»، ماوس روی دکمه رادیویی کنار هر یک از سبک‌های بهینه‌شده برای صنعت زیر کلیک می‌کند: سفر، لجستیک، املاک و مستغلات و خرده‌فروشی. با کلیک روی هر دکمه، توضیحات سبک نقشه و پیش‌نمایش گرافیکی آن تغییر می‌کند.

کنترل نقاط مورد علاقه

این انیمیشن رنگ نشانگر را برای نقاط مورد علاقه تنظیم می‌کند و تراکم نقاط مورد علاقه را روی سبک نقشه افزایش می‌دهد. هرچه تراکم بیشتر باشد، نشانگرهای نقاط مورد علاقه بیشتری روی نقشه ظاهر می‌شوند.

در صفحه «سبک نقشه»، ماوس روی «ایجاد سبک نقشه جدید» کلیک می‌کند. در صفحه «سبک نقشه جدید»، در زیر «ایجاد سبک خودتان»، دکمه رادیویی «نقشه گوگل» انتخاب شده است. ماوس روی دکمه رادیویی «اطلس» برای سبک «اطلس» کلیک می‌کند، سپس روی «باز کردن در ویرایشگر سبک» کلیک می‌کند. در ویرایشگر سبک، ماوس روی ویژگی «نقاط مورد علاقه» کلیک می‌کند، سپس روی عنصر «آیکون» کلیک می‌کند و رنگ را روی قرمز تنظیم می‌کند. سپس ماوس کادر انتخاب «تراکم POI» را انتخاب می‌کند و کنترل تراکم را برای حداکثر تراکم به سمت راست می‌لغزاند. با افزایش تراکم، نشانگرهای قرمز بیشتری روی پیش‌نمایش نقشه ظاهر می‌شوند. سپس ماوس روی دکمه «ذخیره» حرکت می‌کند.

هر سبک نقشه شناسه (ID) مخصوص به خود را دارد. پس از انتشار یک سبک در کنسول Cloud، آن شناسه نقشه را در کد خود ارجاع می‌دهید - به این معنی که می‌توانید یک سبک نقشه را بدون نیاز به تغییر ساختار برنامه خود، به صورت بلادرنگ به‌روزرسانی کنید. ظاهر جدید به طور خودکار در برنامه موجود ظاهر می‌شود و در پلتفرم‌های مختلف استفاده می‌شود. مثال‌های زیر نحوه اضافه کردن شناسه نقشه به یک صفحه وب با استفاده از API جاوا اسکریپت Maps را نشان می‌دهند.

با گنجاندن یک یا چند map_ids در آدرس URL اسکریپت، API جاوا اسکریپت Maps به طور خودکار آن استایل‌ها را برای رندر سریع‌تر نقشه، هنگام فراخوانی آن استایل‌ها در کد، در دسترس قرار می‌دهد. 

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

کد زیر یک نقشه با استایل مشخص را در صفحه وب نمایش می‌دهد. (عنصر <div id="map"></div> در HTML که نقشه در آن نمایش داده می‌شود، نمایش داده نمی‌شود.) 

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

درباره ترکیب سبک نقشه‌های مبتنی بر ابر در جاوا اسکریپت (وب) ، اندروید و iOS بیشتر بیاموزید.

داده‌های موقعیت مکانی سفارشی را با جزئیات مکان ترکیب کنید

بخش قبلی «مکان‌هایتان را روی نقشه تعاملی نمایش دهید» استفاده از «جزئیات مکان» را برای ارائه سطح غنی از اطلاعات در مورد مکان‌هایتان، مانند ساعات کاری، عکس‌ها و نظرات، به کاربران شرح می‌دهد.

درک قیمت‌گذاری و سطوح SKU فیلدهای داده مختلف در Places API (جدید) مفید است. برای مدیریت هزینه‌هایتان، یک استراتژی این است که اطلاعاتی را که از قبل در مورد مکان‌های خود دارید با اطلاعات جدید از Google Maps مانند تعطیلی موقت، ساعات تعطیلات و رتبه‌بندی کاربران، عکس‌ها و نظرات ترکیب کنید. اگر از قبل اطلاعات تماس فروشگاه‌های خود را دارید، نیازی به درخواست این فیلدها از Place Details ندارید و می‌توانید Field Mask خود را محدود کنید تا فقط فیلدهایی را که می‌خواهید نمایش دهید، دریافت کند.

شما ممکن است داده‌های مکانی خودتان را برای تکمیل یا استفاده به جای جزئیات مکان داشته باشید. codelab برای مکان‌یاب فول‌استک، نمونه‌ای از استفاده از GeoJSON با یک پایگاه داده برای ذخیره و بازیابی جزئیات مکان خودتان را ارائه می‌دهد.