راهنمای پیاده سازی Locator Plus، راهنمای پیاده سازی Locator Plus

نمای کلی

وب iOS API

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

همین حالا بسازش!

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

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

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

برای کاربران Locator Plus، یک داشبورد تحلیلی به شما کمک می‌کند تا داده‌های خود را تجزیه و تحلیل کرده و بینش‌هایی از آنها ایجاد کنید و تصویر روشنی از میزان تعامل خریداران با فروشگاه یاب خود به شما ارائه می‌دهد. برای دسترسی به این گزارش، به بخش گزارش‌های تعامل در کنسول مراجعه کنید. برای جزئیات بیشتر در مورد این گزارش، به گزارش‌های تعامل مراجعه کنید.

نمودار زیر APIهای اصلی دخیل در پیاده‌سازی Locator Plus را نشان می‌دهد. این نمودار همچنین پایگاه داده‌ای از داده‌های مکانی شما را نشان می‌دهد که می‌توانید با Place Details ترکیب کنید تا بهترین و کامل‌ترین مجموعه اطلاعات ممکن را در اختیار کاربران قرار دهید. (برای بزرگنمایی کلیک کنید.)

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

فعال کردن APIها

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

بخش‌های پیاده‌سازی

در ادامه به شیوه‌ها و سفارشی‌سازی‌هایی که در این مبحث پوشش خواهیم داد، اشاره می‌کنیم.

  • آیکون علامت تیک یک عمل اصلی است.
  • آیکون ستاره یک سفارشی‌سازی اختیاری است اما برای بهبود راهکار توصیه می‌شود.
نمایش مکان‌های شما روی نقشه تعاملی

نقشه‌ای بسازید که به کاربران امکان مشاهده جزئیات مکان، حرکت در اطراف و بزرگنمایی و کوچکنمایی را بدهد.

یا راهکار Quick Builder Locator Plus را برای ساخت سریع نقشه، از جمله وارد کردن آسان جزئیات کسب و کار از فهرست‌های نمایه کسب و کار ، جاسازی لینک‌های رزرو قرار ملاقات و استقرار در فضای ذخیره‌سازی ابری گوگل، بررسی کنید.

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

به کاربران اجازه دهید از پنل کناری «جزئیات مکان» وقت ملاقات رزرو کنند.

یا راهکار Quick Builder Locator Plus را برای ساخت سریع نقشه، از جمله وارد کردن آسان جزئیات کسب و کار از فهرست‌های نمایه کسب و کار ، جاسازی لینک‌های رزرو قرار ملاقات و استقرار در فضای ذخیره‌سازی ابری گوگل، بررسی کنید.

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

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

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

There are multiple ways to enable this: (1) using the Quick Builder Locator Plus solution to provide this functionality out of the box, and (2) using your own Dynamic Maps implementation. This section describes these options in detail.

استفاده از Quick Builder Locator Plus

شما می‌توانید از راهکار Quick Builder Locator Plus برای وارد کردن جزئیات کسب و کار از پروفایل کسب و کار خود استفاده کنید. بنابراین، اکنون، هر تغییری در جزئیات کسب و کار پروفایل کسب و کار شما در فروشگاه یاب وب‌سایت شما منعکس خواهد شد. این تغییرات می‌تواند شامل ساعات کاری، اطلاعات تماس، عکس‌ها، گزینه‌های خدمات و موارد دیگر باشد. Quick Builder می‌تواند شما را قادر سازد تا به سرعت مکان‌های کسب و کار را روی نقشه بررسی کنید، کد قابل استقرار تولید کنید یا مستقیماً در عرض چند دقیقه در فضای ذخیره‌سازی ابری گوگل مستقر شوید.

ادغام پروفایل تجاری
با وارد کردن جزئیات کسب و کار از نمایه کسب و کار خود، به راحتی مکان‌های خود را در Locator Plus مدیریت کنید

استقرار در فضای ابری
به راحتی راهکار Locator Plus خود را با استفاده از Google Cloud مستقر کنید.

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

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

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

ابتدا، باید API جاوا اسکریپت Maps را در صفحه وارد کنید. این کار از طریق لینک کردن اسکریپت زیر در صفحه 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 جاوا اسکریپت اشاره دارد که هنگام بارگذاری صفحه اجرا می‌شود. در URL، می‌توانید زبان یا منطقه نقشه خود را نیز تعریف کنید تا مطمئن شوید که به روش صحیح برای کشور خاصی که هدف قرار داده‌اید، قالب‌بندی شده است. تنظیم منطقه همچنین تضمین می‌کند که رفتار برنامه‌های مورد استفاده در خارج از ایالات متحده نسبت به منطقه‌ای که شما تعیین کرده‌اید، جانبدارانه باشد. برای مشاهده لیست کامل زبان‌ها و مناطق پشتیبانی شده و کسب اطلاعات بیشتر در مورد استفاده از پارامتر region ، به جزئیات پوشش پلتفرم Google Maps مراجعه کنید.

در مرحله بعد، برای قرار دادن نقشه خود در صفحه به یک 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 },
    zoomControl: false
  });
}

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

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

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

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

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

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

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

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

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

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

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

اضافه کردن مکان‌ها به نقشه

The next step is to add your locations to the map. This is usually done by adding markers to the map, although there are a number of other options you can use such as data layers .

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

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

با چند علامت، می‌توانید موقعیت تعدادی از مکان‌ها را با هم ببینید.

اگر تعداد مکان‌ها زیاد است، می‌توانید از یک ابزار خوشه‌بندی نشانگر برای جاوا اسکریپت ، اندروید یا iOS استفاده کنید. در اینجا مثالی از خوشه‌بندی نشانگر در نمونه گیت‌هاب مکان‌یاب فروشگاه جاوا اسکریپت آورده شده است .

ارائه جزئیات مکان

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

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

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

برای دیدن ویدیوهای مربوط به درخواست، صفحه را باز کنید. جزئیات مکان:

ساعات کاری را دریافت کنید

بررسی تعطیلی‌ها

کنترل هزینه‌ها

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

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

نمایش مکان‌ها از نمای ۴۵ درجه

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

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

نمونه کد زیر، نقشه را روی سطح بزرگنمایی بالا، نوع نقشه سازگار و زاویه شیبی که در صورت وجود، تصاویر ۴۵ درجه را نمایش می‌دهد، تنظیم می‌کند. جزئیات مربوط به در دسترس بودن تصاویر ۴۵ درجه در مستندات توضیح داده شده است.

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 جاوا اسکریپت نقشه‌ها همچنین موجود است: اندروید | iOS

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

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

اضافه کردن کتابخانه تکمیل خودکار مکان به سایت شما فقط با اضافه کردن چند پارامتر پرس و جو به آدرس اینترنتی اسکریپت API جاوا اسکریپت Maps انجام می‌شود. در مثال زیر، این اضافه کردن 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>

Finally, you need to initialize the Autocomplete service and link it to the named text box. Constraining the Place Autocomplete predictions to geocode types configures your input field to accept street addresses, neighborhoods, cities, and zip codes so users can input any level of specificity to describe their origin. Be sure to request the geometry field so that the response contains latitude and longitude of the user's origin. You'll use these map coordinates to recenter the map and indicate the relationship of your locations to the origin. 

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

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

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

وب‌سایت

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

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

نمایش زمان سفر و فاصله تا نزدیکترین مکان‌ها

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

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

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

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

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

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

ارجاع سریع به کد 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) و مقاصد را روی نقشه نشان می‌دهد:

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

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

مکان فاصله مستقیم جاده در ترافیک / زمان
مکان الف ۳.۳۲ کیلومتر ۴.۵ کیلومتر / ۱۵ دقیقه
مکان ب ۳.۲۰ کیلومتر ۵.۰ کیلومتر / ۱۷ دقیقه
مکان ج ۴.۸۴ کیلومتر ۶.۹ کیلومتر / ۲۳ دقیقه

اگرچه مکان B از نظر فاصله نزدیکترین است، اما مسیر و زمان رسیدن به آنجا طولانی‌تر است زیرا مکان A از طریق بزرگراه قابل دسترسی است.

پس از ارسال این درخواست، می‌توانید تطبیق را پردازش کنید تا پاسخ‌ها را بر اساس مدت زمان رانندگی مرتب کنید. می‌توانید نمونه‌هایی از چنین عملکردی را در آزمایشگاه‌های کد مکان‌یاب (locator codelabs) بیابید.

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

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

سرویس مسیریابی همچنین دارای توابعی است که به شما امکان می‌دهد نتایج را پردازش کرده و آنها را به راحتی روی نقشه نمایش دهید.

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

برای کسب اطلاعات بیشتر در مورد این ویژگی‌های Maps، مستندات API جاوا اسکریپت Maps را مطالعه کنید یا نگاهی به آزمایشگاه‌های کد گام به گام برای ساخت یک مکان‌یاب بیندازید.

کمک به کاربران برای رزرو نوبت

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

روش‌های مختلفی برای فعال کردن این قابلیت وجود دارد: (1) استفاده از راهکار Quick Builder Locator Plus برای ارائه این قابلیت به صورت آماده، و (2) استفاده از نمایه تجاری شما. این بخش این گزینه‌ها را به تفصیل شرح می‌دهد.

از Quick Builder Locator Plus استفاده کنید

شما می‌توانید از راهکار Quick Builder Locator Plus برای وارد کردن آسان جزئیات کسب و کار از نمایه کسب و کار خود استفاده کنید. پس از وارد کردن اطلاعات به ابزار Quick Builder، می‌توانید در صورت امکان، لینک‌های رزرو قرار ملاقات جاسازی شده را برای مکان‌های کسب و کار خود از طریق Reserve with Google فعال کنید. حتی اگر نمایه کسب و کار مرتبط با حساب گوگل نداشته باشید، همچنان می‌توانید از Quick Builder برای جاسازی لینک‌های رزرو برای کسب و کارهایی که قبلاً از طریق Reserve with Google* در ارائه دهندگان رزرو شخص ثالث فعال کرده‌اید، استفاده کنید.

رزرو با گوگل
قابلیت رزرو را به مکان‌یاب فروشگاه خود اضافه کنید

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

برای فعال کردن رزرو نوبت از نمایه تجاری استفاده کنید

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

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

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

  1. یک 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"
}

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

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

    1. حساب‌های پروژه خود را فهرست کنید .
    2. تمام مکان‌های موجود در یک حساب را فهرست کنید .
    3. در قسمت مکان‌های حساب، LocationKey شامل شناسه مکان پلتفرم نقشه‌های گوگل (Google Maps Platform) است که می‌توانید آن را با شناسه مکان مکان مورد نظر مقایسه کنید.

  3. با استفاده از شناسه مکان، می‌توانید لینک اکشن مورد نظر خود را دریافت کنید. برای بازیابی یک placeActionLink موجود برای قرار ملاقات، placeActionLinks موجود برای مکان را فهرست کنید و placeActionType را فیلتر کنید تا لینک قرار ملاقاتی را که می‌خواهید استفاده کنید ( APPOINTMENT ، ONLINE_APPOINTMENT یا DINING_RESERVATION ) پیدا کنید.

    مثال زیر یک APPOINTMENT placeActionLink در پاسخ از فراخوانی LIST نشان می‌دهد. 

     {
   "placeActionLinks": [
       {
           "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
           "providerType": "MERCHANT",
           "isEditable": true,
           "uri": "https://example.com/",
           "placeActionType": "APPOINTMENT",
           "createTime": "2021-05-01T01:17:41.609161Z",
           "updateTime": "2021-05-01T01:17:41.609161Z"
       }
   ]
 }
  4. یک <div> در پنل کناری ایجاد کنید و آن را با داده‌های مرتبط از شیء placeActionLink ، به ویژه آدرس اینترنتی (URI) لینک رزرو قرار ملاقات، پر کنید.

گزینه‌های دیگر برای اضافه کردن لینک‌های قرار ملاقات

اگر نمایه تجاری (Business Profile) را مدیریت نمی‌کنید یا نمی‌خواهید از راهکار Quick Builder Locator Plus استفاده کنید، برای مشاهده مستندات مربوط به جاسازی ویجت رزرو در وب‌سایت یا برنامه، پلتفرم رزرو وقت خود را بررسی کنید. گزینه دیگر استفاده از Google Cloud، مانند Cloud Spanner برای مدیریت موجودی است (ویدئو).

نمایش پیشنهادات محلی

در پنل کناری «جزئیات مکان» برای یک مکان، می‌توانید پیشنهادهای محلی را برای کلیک کاربران نمایش دهید. API «Google My Business» به شما امکان می‌دهد «پست‌هایی» (مانند پیشنهادهای محلی) مرتبط با مکان‌های خود ایجاد و بازیابی کنید. شکل زیر نمونه‌ای از یک پیشنهاد محلی را در پنل کناری «جزئیات مکان» نشان می‌دهد.

(نمودار معماری در بخش سازنده سریع، فناوری‌های موجود برای افزودن پیشنهادها به مکان‌یاب شما را نشان می‌دهد.)

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

  1. با استفاده از API گوگل مای بیزینس، هر پست پیشنهادی که می‌خواهید نمایش دهید، از نوع OFFER ایجاد کنید.

  2. مکان/شناسه مکان مرتبط با شناسه مکان در نمایه کسب‌وکار را روی نقشه پیدا کنید.

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

    1. حساب‌های پروژه خود را فهرست کنید .
    2. تمام مکان‌های موجود در یک حساب را فهرست کنید .
    3. در قسمت مکان‌های حساب، LocationKey شامل شناسه مکان نقشه است که می‌توانید آن را با شناسه مکان مورد نظر مقایسه کنید.

    در زیر نمونه‌ای از درخواست برای جزئیات یک مکان در APIهای نمایه کسب‌وکار آمده است: 

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

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

    برای دیدن پاسخ نمونه، صفحه را باز کنید. 

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

  3. حالا که شناسه مکان را دارید، می‌توانید پیشنهاد مورد نظرتان را دریافت کنید. برای بازیابی یک پست پیشنهادی موجود، 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."
            }
        },
    ],
}
  4. یک <div> در پنل کناری ایجاد کنید و داده‌های مرتبط را از شیء localPost در آن قرار دهید.

سفارشی‌سازی نقشه شما

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

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

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

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

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

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

طراحی نقشه شما

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

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

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

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

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

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

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

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

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

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

By including one or more map_ids in the script URL, the Maps JavaScript API automatically makes those styles available for faster map rendering when you call those styles in your code. 

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

The following code displays a styled map on the web page. (Not shown is an HTML <div id="map"></div> element where the map will appear on the page.) 

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

Learn more about incorporating cloud-based maps styling in JavaScript (web) , Android , and iOS .

Gaining usage insights with analytics

Using analytics, you can gain valuable insights about how users are interacting with your locator. This section provides guidance on configuring and monitoring Google Analytics and Business Profile analytics to track the data you're most interested in. For Quick Builder Locator Plus users, an analytics dashboard helps you analyze and generate insights, giving you a picture of how well your site visitors are engaging with your store locator, based on anonymized data.

Locator Plus Analytics
The store locator analytics dashboard provides you with performance metrics

To access this report, go to the engagement reports section of the Cloud console . For more details about this report, see engagement reports .

Given the power and flexibility of Google Analytics, we won't attempt to provide comprehensive setup and usage information. Instead, we'll point you to key documentation for further reading and instructions while highlighting the key analytics considerations for your locator app.

Setting up Google Analytics

If you're already using Google Analytics with your app, you can skip this section.

Following is an example of a “Global Tag” you'd paste on your site to enable Google Analytics. 

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

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

Whether you're using Google Tag Manager or adding Google Analytics directly to your site, the key is to understand how to use your Google Analytics implementation to do the following:

Using custom events

Following is an example of defining a custom event in your locator: 

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

It's important to name your event and method clearly enough that you can understand events in reporting. Trigger them for the specific interactions you want to measure, such as when a user selects and address from the Autocomplete drop-down list, shown in the following figure.

You can send the following tracking call to Google Analytics that uses the event and method you defined. (We'll show each query parameter on a separate line for ease of reading.) 

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

The following figure shows how that Google Analytics call appears in the browser's Inspect view, on the Network tab. (Click to enlarge).

You can verify that your custom event tags are properly being captured by viewing the "Real-time" view in Google Analytics. For example, the "location" event set up previously for Place Autocomplete appears in Google Analytics as shown in the following figures.

Alternatively, you could monitor real-time events using the DebugView, as shown in the following figure. Note that you have to wait 24 hours before accessing a full Events report in the Engagement > Events section of Google Analytics.

You can also develop and measure strategies to drive more foot traffic to your physical locations from your locator app. For example, Google Analytics has a Store Visits in Analytics offering that links physical store visits analytics (measured by Google Ads) to your locator analytics. You can also develop your own app-to-location strategies, such as online offers redeemable at your physical locations.

Business Profile metrics

In addition to tracking the events, metrics, and dimensions you're interested in with Google Analytics, Business Profile also has its own metrics . For example, if you add appointment booking and local offer links to your locator, you can get metrics on those views and clicks.

The following sample request to the Business Profile APIs asks for multiple types of metrics. For tracking offer clicks, the LOCAL_POST_VIEWS_SEARCH and LOCAL_POST_ACTIONS_CALL_TO_ACTION metrics would be the most relevant.

Expand to see the sample request. 

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

Expand to see the sample response. 

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

The response contains the metrics, most notably:

  • 1571 views of the location on Google Maps
  • 631 location views on Google Search.
  • 3 requests for Driving Directions to the location.
  • 42 LOCAL_POST_ACTIONS_CALL_TO_ACTION offer clicks.
  • 11 views of Local Posts on Google Search.

Another metrics option involves using Reserve with Google to create action links. When users click action links created in Reserve with Google, you can log those actions to Google Analytics, which lets you track conversions in Google Analytics. See the conversion tracking documentation for more information.

Regardless of the metrics strategy you use, measurement is more than seeing how you're doing against your KPIs. The numbers also help you understand the impact these locator improvements have on your business. Additionally, you can compare the metrics from Google Analytics on your locator with the Business Profile metrics. For instance, by comparing these metrics, you can see how many customers are getting directions from your locator and Google Maps to then visit your physical locations.

Enhancing Locator Plus

Depending on your business' or users' needs, you can further enhance the user's experience.

Sending directions to mobile

To make it even easier for users to reach a location, you can text or email them a directions link. When they click it, the Google Maps app will launch on their phone if it is installed, or maps.google.com will load in their device's web browser. Both of these experiences provide the user with the option to use turn-by-turn navigation, including voice guidance, to reach the destination.

Use Maps URLs to compose a directions URL like the following, with the URL-encoded place name as the destination parameter and place ID as the destination_place_id parameter. There is no cost to compose or use Maps URLs, so you don't need to include an API key in the URL. 

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

You can optionally provide an origin query parameter using the same address format as the destination. But by omitting it, the directions start from the user's current location, which may be different from where they were using your Locator Plus app. Maps URLs provide additional query parameter options, such as travelmode and dir_action=navigate to launch the directions with navigation turned on.

This clickable link , which extends the example URL above, sets the origin as a London football stadium and uses travelmode=transit to provide public transit directions to the destination.

To send a text or email containing this URL, we currently recommend using a third-party application such as twilio . If you're using App Engine, you can use third-party companies to send SMS messages or email. For more information, see Sending Messages with Third-Party Services .

Showing Street View to help users visualize locations

For many locations in the world, Street View can be used to display the outside of a location, offering users a visual of the location before they arrive. You can provide Street View in either an interactive (web) or static (API) form, depending on whether you want your users to "look around" the area in 360 degrees. Street Viewis also available for Android and iOS .

Determining user location with Geolocation

In most cases, you can pinpoint user location using the location services built into their devices or browsers. We provide an example of using a browser's HTML5 Geolocation feature to display the geographic location of a user or device on a Google map, and there's documentation on requesting permissions and obtaining location in Android and iOS . However, there may be situations where you want an alternative location finder; for example, if device location services are disabled or you have concerns about device location being spoofed.

The Geolocation API is a server-side API that returns a location and accuracy radius based on information about cell towers and Wi-Fi nodes that the client can detect. You can use Geolocation as a backup mechanism for determining user location, or you can use it to cross-check the location reported by the device.

Combining custom location data with Place Details

In the previous Providing Place Details section, we covered using Place Details to give users a rich level of information about your locations, such as opening hours, photos, and reviews.

It's helpful to understand the cost of different data fields in Place Details, which are categorized as Basic, Contact, and Atmosphere Data. To manage your costs, one strategy is to combine the information you already have about your locations with the fresh information (usually Basic and Contact Data) from Google Maps such as temporary closure, holiday hours, and user ratings, photos, and reviews. If you already have the contact information for your locations, you won't need to request those fields from Place Details and can constrain your request to fetch only Basic or Atmosphere Data fields depending on what you want to display.

You may have your own place data to supplement or use instead of Place Details. The codelab for the full-stack locator provides an example of using GeoJSON with a database to store and retrieve your own location details.