نمای کلی
Google Maps Platform برای وب (JS، TS)، Android، و iOS دردسترس است و همچنین میاناهای برنامهسازی کاربردی سرویسهای وب را برای دریافت اطلاعات درباره مکانها، مسیرها، و فاصلهها ارائه میدهد. نمونههای این راهنما برای یک پلاتفرم نوشته شدهاند، اما پیوندهای اسناد برای پیادهسازی در پلاتفرمهای دیگر ارائه شدهاند.
Quick Builder در کنسول Google Cloud به شما امکان میدهد بهسرعت مکانیاب بسازید، ازجمله وارد کردن فهرستگان «نمایه کسبوکار» و جاسازی خودکار پیوندهای رزرو قرار از ارائهدهندگان شخص ثالث. رابط کاربری تعاملی به شما امکان میدهد کد تولید کنید و ظرف چند دقیقه در Cloud مستقر کنید.
کاربرانتان میخواهند محصولات و خدمات را بهصورت آنلاین جستجو کنند و بهترین و مناسبترین مکان را برای بازدید، قرار ملاقات، یا تحویل سفارش پیدا کنند. آنها میخواهند در سریعترین زمان ممکن به مکان شما برسند و شما میخواهید تجربههای آنلاین غنیای به آنها ارائه دهید که بازدید از مکانهای فیزیکیتان را افزایش دهد، رضایت کاربر را تقویت کند، و تماسهای پشتیبانی را کاهش دهد. همچنین باید موفقیت مکانیابتان را بسنجید تا ببینید آیا مشتریان میتوانند مکانتان را پیدا کنند یا نه، و باید بدانید کجاها را باید بهبود دهید.
Locator Plus (راهنماییها و نکات سفارشیسازی که در این سند ارائه میدهیم) همان چیزی است که بهعنوان ترکیب بهینه میاناهای برنامهسازی کاربردی Google Maps Platform برای ساختن تجربههای کاربری عالی در مکانیابی توصیه میکنیم. با پیروی از این روشها، میتوانید به کاربران کمک کنید مکانهایتان را روی نقشه پیدا کنند، اطلاعات دقیقی را که برای تصمیمگیری نیاز دارند ببینند، و مسیرها را به آنها نشان دهید، چه درحال رانندگی، دوچرخهسواری، پیادهروی، یا استفاده از حملونقل عمومی باشند.
برای کاربران Locator Plus، داشبورد تجزیهوتحلیل به شما کمک میکند تا بینشهایی را از دادههایتان تحلیل و تولید کنید و تصویری واضح از میزان تعامل خریداران با مکانیاب فروشگاهتان به شما ارائه میدهد. برای دسترسی به این گزارش، به بخش گزارشهای تعامل کنسول بروید. برای جزئیات بیشتر درباره این گزارش، گزارشهای تعامل را ببینید.
نمودار زیر میاناهای برنامهسازی کاربردی اصلی را که در پیادهسازی Locator Plus دخیل هستند نشان میدهد. این نمودار همچنین پایگاه دادهای از دادههای مکان خودتان را نشان میدهد که میتوانید آن را با «جزئیات جا» ترکیب کنید تا بهترین و کاملترین مجموعه اطلاعات ممکن را به کاربران ارائه دهید. (برای بزرگ کردن کلیک کنید.)
درحال فعال کردن میاناهای برنامهسازی کاربردی
برای پیادهسازی این شیوهها، باید میاناهای برنامهسازی کاربردی زیر را در کنسول Google Cloud فعال کنید: برای اطلاعات بیشتر درباره راهاندازی، شروع به کار با Google Maps Platform را ببینید.بخشهای پیادهسازی
در این سند، به تمرینها و سفارشیسازیهای زیر میپردازیم.
- نماد علامت تأیید یک تمرین اصلی است.
- نماد ستاره یک سفارشیسازی اختیاری اما توصیهشده برای بهبود راهکار است.
| نمایش مکانهای شما در نقشه تعاملی |
نقشهای بسازید که به کاربران امکان میدهد جزئیات مکان را ببینند، جابهجا شوند، و بزرگنمایی و کوچکنمایی کنند. یا راهحل Quick Builder Locator Plus را کاوش کنید تا بهسرعت نقشهای بسازید، ازجمله وارد کردن جزئیات کسبوکار از فهرستگان نمایه کسبوکار ، جاسازی کردن پیوندهای رزرو قرار، و استقرار در Google Cloud Storage. |
|
| ارائه جزئیات مکان | پساز اینکه کاربران نزدیکترین مکانهای شما را روی نقشه پیدا کردند، «جزئیات جا»ی معناداری درباره مکانها به آنها ارائه دهید تا به آنها در تصمیمگیری کمک کنید. | |
| نمایش مکانها از نمای ۴۵ درجه | با نمای ماهوارهای از زاویه ۴۵ درجه، تصویر بصری بهتری از مکانتان به کاربران ارائه دهید. | |
| شناسایی مکان کاربر | عملکرد «تایپ درحین حرکت» را اضافه کنید تا تجربه کاربری در همه پلاتفرمها بهبود یابد و دقت نشانی با حداقل ضربه کلید افزایش یابد. | |
| نمایش مدت سفر و فاصله تا نزدیکترین مکانها | محاسبه مسافت سفر و مدت سفر برای چند مبدأ و مقصد، با امکان مشخص کردن انواع مختلف حملونقل مانند پیادهروی، رانندگی، یا دوچرخهسواری. | |
| کمک به کاربران برای رزرو قرار |
به کاربران اجازه دهید از پانل کناری «جزئیات مکان» قرار رزرو کنند. یا راهحل Quick Builder Locator Plus را کاوش کنید تا بهسرعت نقشهای بسازید، ازجمله وارد کردن جزئیات کسبوکار از فهرستگان نمایه کسبوکار ، جاسازی کردن پیوندهای رزرو قرار، و استقرار در Google Cloud Storage. |
|
| نمایش پیشنهادهای ویژه محلی | پیشنهادهای محلی کلیککردنی را در پانل کناری «جزئیات مکان» به کاربران نشان دهید. | |
| ارائه مسیرهای ناوبری | بااستفاده از انواع مختلف حملونقل مانند پیادهروی، رانندگی، دوچرخهسواری، و حملونقل عمومی، دادههای مسیر را از مبدأ تا مقصد دریافت کنید. | |
| سفارشیسازی نقشه | نشانگرهای سفارشی نقشه ایجاد کنید تا مکانهایتان متمایز شوند و نقشه را بهگونهای طراحی کنید که با رنگهای نمانامتان مطابقت داشته باشد. نقاط موردعلاقه (POI) خاصی را در نقشهتان نمایش دهید (یا پنهان کنید) تا به کاربران کمک کنید بهتر جهتیابی کنند و تراکم نقاط موردعلاقه را کنترل کنید تا از بههمریختگی نقشه جلوگیری شود. | |
| کسب اطلاعات آماری استفاده با تجزیهوتحلیل | Google Analytics را پیکربندی و استفاده کنید تا اطلاعات آماری درباره استراتژی و پیادهسازی مکانیاب خود بهدست آورید. | |
| ارسال مسیرها به تلفن همراه | علاوهبر نمایش مسیرها در مکانیاب، میتوانید مسیرها را به تلفن کاربر ارسال کنید تا بتواند درحین حرکت بااستفاده از Google Maps ناوبری کند. | |
| نمایش «نمای خیابان» برای کمک به کاربران در تجسم مکانها | تصاویر «نمای خیابان» با نمای ۳۶۰ درجه به کاربران ارائه دهید تا بهتر جهتیابی کنند و مکانهای شما را سریعتر پیدا کنند. | |
| تعیین مکان کاربر با Geolocation | اگر نمیخواهید به خدمات مکان دروندستگاهی متکی باشید، از «مکان جغرافیایی» برای کمک به شناسایی مکان کاربر استفاده کنید. | |
| ترکیب کردن دادههای مکان سفارشی با «جزئیات جا» | جزئیات مکان سفارشی خودتان را با «جزئیات مکان» ترکیب کنید تا مجموعه غنیای از دادهها را برای تصمیمگیری دراختیار کاربران قرار دهید. |
نمایش مکانهای شما در نقشه تعاملی
مکانیاب بخش مهمی از تجربه کاربری است. اما برخیاز سایتها ممکن است حتی نقشه نداشته باشند و کاربران را ملزم کنند برای پیدا کردن مکانهای اطراف، سایت یا برنامه را ترک کنند. این یعنی تجربهای نامطلوب برای کاربرانی که باید بین صفحهها پیمایش کنند تا اطلاعات موردنیازشان را دریافت کنند. درعوض، میتوانید با جاسازی و سفارشیسازی نقشهها در برنامههایتان، این تجربه را بهبود بخشید.
میتوانید این عملکرد را به دو روش فعال کنید: بااستفاده از راهکار Quick Builder Locator Plus برای ارائه آن بهصورت آماده، یا بااستفاده از پیادهسازی «نقشههای پویا» خودتان. این بخش این گزینهها را با جزئیات شرح میدهد.
استفاده از «سازنده سریع Locator Plus»
میتوانید از راهکار Quick Builder Locator Plus برای وارد کردن جزئیات کسبوکار از «نمایه کسبوکار» خودتان استفاده کنید. بنابراین اکنون، تغییر در جزئیات کسبوکار «نمایه کسبوکار» شما در مکانیاب فروشگاه در وبسایتتان منعکس خواهد شد. این تغییرات میتواند شامل ساعت کاری، اطلاعات تماس، عکسها، گزینههای خدمات، و موارد دیگر باشد. «سازنده سریع» میتواند به شما امکان دهد بهسرعت راهاندازی مکانهای کسبوکار را در نقشه کاوش کنید، کد قابلاستقرار تولید کنید، یا مستقیماً در عرض چند دقیقه در Google Cloud Storage مستقر شوید.
استفاده از پیادهسازی «نقشههای پویا» خودتان
| این نمونه از موارد زیر استفاده میکند: Maps JavaScript API | همچنین دردسترس برای: Android | iOS |
افزودن نقشه پویا به صفحهتان (یعنی نقشهای که کاربران میتوانند در آن جابهجا شوند، بزرگنمایی و کوچکنمایی کنند، و جزئیات مکانهای مختلف و نقاط جالب را دریافت کنند) با چند خط کد قابل انجام است.
ابتدا باید Maps JavaScript API را در صفحه اضافه کنید.
این کار با پیوند دادن اسکریپت زیر در صفحه 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_locatorplus_v2_a"></script>
نشانی وب به تابع جاوا اسکریپت initMap ارجاع میدهد که هنگام بار شدن صفحه اجرا میشود. در نشانی وب، همچنین میتوانید زبان یا منطقه نقشهتان را تعریف کنید تا مطمئن شوید که قالببندی آن برای کشور خاصی که هدفیابی میکنید درست است. تنظیم منطقه همچنین تضمین میکند که رفتار برنامههایی که در خارج از ایالات متحده استفاده میشوند، به سمت منطقهای که تنظیم کردهاید متمایل باشد. برای مشاهده فهرست کامل زبانها و مناطق پشتیبانیشده،
جزئیات پوشش پلاتفرم Google Maps
را ببینید و درباره استفاده از پارامتر
region
بیشتر بدانید.
سپس، به div HTML نیاز دارید تا نقشهتان را در صفحه قرار دهید.
اینجا جایی است که نقشه نمایش داده خواهد شد.
<div id="map"></div>
مرحله بعدی تنظیم عملکرد اصلی نقشهتان است. این کار در تابع دستورات initMap که در نشانی وب دستورات مشخص شده است انجام میشود. در این اسکریپت،
که در مثال زیر نشان داده شده است، میتوانید مکان اولیه،
شناسه نقشه (موردنیاز برای
نشانگرهای پیشرفته و سبکپردازی نقشه بااستفاده از فضای ابری)،
نوع نقشه، و
کنترلهایی را که در نقشه برای کاربران دردسترس خواهد بود تنظیم کنید. توجه داشته باشید که
getElementById() به شناسه «نقشه» div در مثال قبلی
ارجاع میدهد.
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 }); }
برای مکانیاب، معمولاً میخواهید مکان اولیه، نقطه مرکزی یا مرزها، و سطح بزرگنمایی (میزان بزرگنمایی نقشه در آن مکان) را تنظیم کنید. اکثر عناصر دیگر، مانند تنظیم کنترلها، اختیاری هستند زیرا شما سطح تعامل با نقشه را تعیین میکنید.
دریافت شناسه جا
| این نمونه از موارد زیر استفاده میکند: Places API (New) | همچنین دردسترس است: JavaScript |
احتمالاً پایگاه دادهای از مکانهایتان با اطلاعات پایه
مثل نام آن مکان، نشانی، و شماره تلفن آن دارید. برای
واکشی اطلاعات «پلاتفرم Google Maps» درباره آن مکان، ازجمله
مختصات جغرافیایی و اطلاعات همیاریشده توسط کاربر،
شناسه مکان
مربوط به هریک از مکانهای موجود در پایگاه دادهتان را پیدا کنید. میتوانید با نقطه پایانی
جستجوی نوشتار (جدید) در Places API (جدید) تماس بگیرید و فقط فیلد places.id را در ماسک فیلد درخواست کنید تا شناسه SKU «جستجوی نوشتار» ضروری فقط شناسهها را راهاندازی کنید.
در اینجا نمونهای از درخواست شناسه جا برای دفتر Google در لندن آورده شده است:
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'میتوانید این شناسه مکان را در پایگاه دادهتان ذخیره کنید و از آن بهعنوان روشی کارآمد برای درخواست اطلاعات درباره مکان استفاده کنید. در ادامه، دستورالعملهای استفاده از شناسه جا برای زمینکدیابی، بازیابی «جزئیات جا»، و درخواست مسیر به جا ارائه شده است.
زمینکدیابی مکانهای شما
| این نمونه از موارد زیر استفاده میکند: Geocoding API | همچنین دردسترس است: JavaScript |
اگر پایگاه داده مکانهای شما نشانی خیابان دارد اما مختصات جغرافیایی ندارد، از Geocoding API برای بهدست آوردن طول و عرض جغرافیایی آن نشانی برای قرار دادن نشانگر روی نقشه استفاده کنید. میتوانید نشانیهایتان را در سمت سرور زمینکدیابی کنید، طول و عرض جغرافیایی را در پایگاه دادهتان ذخیره کنید، و حداقل هر ۳۰ روز یکبار بازآوری کنید.
در اینجا نمونهای از استفاده از Geocoding API برای بهدست آوردن طول و عرض جغرافیایی شناسه مکانی که برای دفتر Google London برگردانده شده است آورده شده است:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aدرحال افزودن مکانها به نقشه
مرحله بعدی افزودن مکانهایتان به نقشه است. این کار معمولاً با افزودن نشانگرهای پیشرفته به نقشه انجام میشود، هرچند گزینههای دیگری نیز وجود دارد که میتوانید استفاده کنید، مانند لایههای داده.
وقتی طول و عرض جغرافیایی مکانتان را بهدست آوردید، در اینجا نمونهای از افزودن نشانگر پیشرفته با نویسه نوشتاری سفارشی به نقشه ارائه شده است:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
با چند نشانگر، میتوانید مکان تعدادی از مکانها را باهم ببینید.
اگر تعداد مکانها زیاد است، میتوانید از ابزار کمکی خوشهبندی نشانگر برای JavaScript، Android، یا iOS استفاده کنید. در اینجا نمونهای از خوشهبندی نشانگر در نمونه GitHub مکانیاب فروشگاه JavaScript آورده شده است.
ارائه جزئیات جا
| این نمونه از موارد زیر استفاده میکند: Maps JavaScript API | همچنین دردسترس است: Places API (جدید) | Android | iOS |
میتوانید «جزئیات مکان» را که افراد قبلاز بازدید از یکی از مکانهایتان به آن نیاز دارند همرسانی کنید. با «جزئیات جا» غنی مانند اطلاعات تماس، ساعت کاری، ردهبندی، عکس، و وضعیت بسته بودن موقت، افراد دقیقاً میدانند هنگام بازدید از مکان شما چه انتظاری داشته باشند. پساز برقراری تماس با Places API (New)، میتوانید پاسخ را فیلتر و در پنجره اطلاعات، نوار کناری وب، یا هر روش دیگری که دوست دارید ارائه کنید.
برای درخواست «جزئیات مکان»، به شناسه مکان هریک از مکانهایتان نیاز دارید. برای بازیابی شناسه مکان موقعیت مکانیتان، دریافت شناسه مکان را ببینید.
برای دیدن ویدیوهای مربوط به درخواست «جزئیات جا»، ازهم باز کنید:
دریافت ساعات کاری
بررسی تعطیلیها
کنترل هزینهها
مثال زیر از کلاس جا در «کتابخانه جاها»، Maps JavaScript API برای بازیابی «جزئیات جا» و افزودن آنها به InfoWindow استفاده میکند. این پیادهسازی از استراتژی صرفهجویی در هزینه استفاده میکند که درخواست «جزئیات جا» را فقط زمانی راهاندازی میکند که کاربر با کلیک کردن روی نشانگر، جزئیات را درخواست کند، بهجای اینکه جزئیات را برای همه مکانها بدون توجه به علاقه کاربر ازپیش واکشی کند.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, gmpClickable: true, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("gmp-click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
نمایش مکانها از نمای ۴۵ درجه
| این نمونه از موارد زیر استفاده میکند: Maps JavaScript API | همچنین دردسترس برای: Android | 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); } });
شناسایی مکان کاربر
| این نمونه از موارد زیر استفاده میکند: Maps JavaScript API | همچنین دردسترس برای: Android | iOS |
مؤلفه کلیدی بعدی در هر مکانیاب، شناسایی مکان شروع کاربر است. بهطور پیشفرض، میتوانید از خدمات مکان تلفن همراه و مکانیابی جغرافیایی مرورگر وب برای درخواست اجازههای کاربر برای تنظیم مبدأ بهعنوان مکان فعلی کاربر استفاده کنید. بااینحال، ممکن است کاربر آن اجازهها را رد کند یا بخواهد مکان دیگری را بهعنوان نقطه شروع خود تنظیم کند.
کاربران امروزی به عملکرد تکمیل خودکار پیشبینیکننده در نسخه مصرفکننده Google Maps عادت کردهاند. این عملکرد را میتوان بااستفاده از کتابخانههای «اماکن پلاتفرم Google Maps» در دستگاههای همراه و وب در هر برنامهای ادغام کرد. وقتی کاربر نشانیای را تایپ میکند، تکمیل خودکار بااستفاده از ابزارهها بقیه نشانی را تکمیل میکند. همچنین میتوانید بااستفاده مستقیم از Place Autocomplete Data API، عملکرد تکمیل خودکار خودتان را ارائه دهید.
افزودن کتابخانه «تکمیل خودکار جا» به سایتتان فقط به افزودن چند پارامتر پُرسمان به نشانی وب اسکریپت Maps JavaScript API بستگی دارد. در مثال زیر،
افزودنی libraries=places,marker است.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
سپس، عنصر نگهدارندهای به صفحهتان اضافه کنید که
PlaceAutocompleteElement
ابزارک به آن اضافه خواهد شد.
<div id="autocomplete-container"></div>
درنهایت، ابزاره PlaceAutocompleteElement را مقداردهی اولیه کنید و آن را به محتوی اضافه کنید. محدود کردن
پیشبینیهای «تکمیل خودکار جا»
با 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, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); }); }
در این مثال، وقتی کاربر نشانی را انتخاب کرد، تابع
addUserLocation()
اجرا میشود. این کار مکان نتیجه منطبق را میگیرد، نقشه را به آن مکان منتقل میکند، و نشانگر پیشرفتهای اضافه میکند.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
سپس میتوانید رابطه بین کاربر و هر مکان خاصی را که در تصویر زیر نشان داده شده است ببینید.
این بخش را ازهم باز کنید تا راهنمای گامبهگام ویدیویی برای افزودن «تکمیل خودکار جا» به برنامهتان را ببینید:
وبسایت
Android Apps
برنامههای iOS
مدتزمان سفر و فاصله تا نزدیکترین مکانها نشان داده میشود
| این مثال از موارد زیر استفاده میکند: Routes API | همچنین دردسترس است: Routes Library, Maps JavaScript API |
وقتی مکان کاربر را دریافت کردید، میتوانید آن را با مکانهای خودتان مقایسه کنید. انجام این کار با ویژگی محاسبه ماتریس مسیر در Routes API (یا کلاس RouteMatrix در «کتابخانه مسیرها»، Maps JavaScript API) به کاربران شما کمک میکند تا مکانی را انتخاب کنند که ازنظر زمان رانندگی یا فاصله جادهای برای آنها مناسبتر است.
نمایش مکانهای نزدیک به کاربر به این معنی است که شما قبلاً مکانهایتان را پر کردهاید. هنگام استفاده از پایگاه داده مکانهای خود، نکته کلیدی این است که مطمئن شوید دادهها در قالبی هستند که میتوانند در نقشه استفاده شوند، مانند GeoJSON، که در موضوع لایه داده شرح داده شده است.
روش استاندارد برای سازماندهی فهرست مکانها، مرتبسازی آنها براساس فاصله است. اغلب این فاصله بااستفاده از خط مستقیم از کاربر به مکان محاسبه میشود، اما این میتواند گمراهکننده باشد. خط مستقیم ممکن است از روی رودخانهای غیرقابلعبور یا از میان جادههای شلوغ بگذرد، درحالیکه مکان دیگری ممکن است مناسبتر باشد. این موضوع زمانی اهمیت دارد که چند مکان در فاصله چند کیلومتری از یکدیگر داشته باشید.
روش computeRouteMatrix با گرفتن فهرستی از مکانهای مبدأ و مقصد و برگرداندن نه تنها مسافت سفر بلکه مدت سفر بین آنها کار میکند. در مورد کاربر،
مبدأ مکان فعلی او یا نقطه شروع ترجیحی او خواهد بود و
مقصدها همان مکانها خواهند بود.
مبدأ و مقصد را میتوان بهصورت جفت مختصات، شناسه مکان، یا نشانی مشخص کرد. میتوانید از
computeRouteMatrix با اولویتهای مسیریابی مثل TRAFFIC_AWARE
استفاده کنید تا نتایج براساس زمانهای رانندگی فعلی یا آینده نشان داده شود.
مثال زیر نقطه پایانی computeRouteMatrix را در Routes API فراخوانی میکند،
و شناسههای مکان مبدأ و مقصد کاربر را مشخص میکند. این مثال
مسافت و مدت سفر را از مرکز نقشه تا سه دفتر Google در لندن محاسبه میکند:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'پاسخ سرویس حاوی فاصله (به متر) و مدتزمان برای هر جفت مبدأ و مقصد است، مشابه آنچه در مثال زیر نشان داده شده است:
برای دیدن پاسخ نمونه، ازهم باز کنید:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]تصویر زیر مبدأ (نشانگر قرمز C) و مقصدها را روی نقشه نشان میدهد:
همانطور که در جدول زیر نشان داده شده است، فاصله خط مستقیم و فاصله مسیر اغلب متفاوت است.
| مکان | فاصله مستقیم | جاده در ترافیک / زمان |
|---|---|---|
| مکان الف | ۳٫۳۲ کیلومتر | ۴٫۵ کیلومتر / ۱۵ دقیقه |
| مکان ب | ۳٫۲۰ کیلومتر | ۵ کیلومتر / ۱۷ دقیقه |
| مکان C | ۴٫۸۴ کیلومتر | ۶٫۹ کیلومتر / ۲۳ دقیقه |
بااینکه «مکان ب» ازنظر مسافت نزدیکتر است، مسیر و زمان رسیدن به آن طولانیتر است چون «مکان الف» ازطریق بزرگراه قابلدسترسی است.
وقتی این درخواست را انجام دادید، میتوانید مطابقت را پردازش کنید تا پاسخها را براساس مدت زمان رانندگی مرتب کنید. میتوانید نمونههایی از چنین عملکردی را در codelab مکانیاب پیدا کنید.
ارائه مسیرهای پیمایش
| این نمونه از موارد زیر استفاده میکند: کتابخانه مسیرها، Maps JavaScript API | همچنین دردسترس است: Routes API سرویس وب برای استفاده در Android و iOS، بهطور مستقیم از برنامه یا از راه دور ازطریق پراکسی سرور |
نشان دادن مسیرها به کاربران از داخل سایت یا برنامههایتان به این معنی است که آنها نیازی به خروج از سایت شما ندارند، که این امر باعث میشود کاربران با صفحات دیگر حواسشان پرت نشود یا رقبا را روی نقشه نبینند. با Routes API، میتوانید مسیرهای بومسازگار را نیز درخواست کنید تا مصرف سوخت یا انرژی را برآورد کنید و تأثیر زیستمحیطی سفر را نشان دهید.
کلاس Route
در «کتابخانه مسیرها»، Maps JavaScript API همچنین دارای روشهایی مانند createPolylines()
و createWaypointAdvancedMarkers() است که به شما امکان میدهد نتایج را پردازش کنید و
آنها را روی نقشه نمایش دهید.
در زیر نمونهای از درخواست و نمایش مسیر روی نقشه آورده شده است. برای اطلاعات بیشتر درباره نمونه، به دریافت مسیر مراجعه کنید.
برای کسب اطلاعات بیشتر درباره این ویژگیهای Maps، سند Maps JavaScript API را بخوانید یا نگاهی به آزمایشگاه کد گامبهگام برای ساخت مکانیاب بیندازید.
کمک به کاربران برای رزرو قرار
وقتی کاربران «جزئیات مکان» شما را در پانل کناری مشاهده میکنند، میتوانید امکان رزرو کردن قرار را با کلیک کردن روی دکمهای که در شکل زیر نشان داده شده است بهراحتی ارائه دهید.
چند روش برای فعال کردن این ویژگی وجود دارد: (۱) استفاده از راهحل Quick Builder Locator Plus برای ارائه این عملکرد بهصورت آماده، و (۲) استفاده از نمایه کسبوکار. این بخش این گزینهها را با جزئیات شرح میدهد.
استفاده از «سازنده سریع Locator Plus»
میتوانید از راهکار Quick Builder Locator Plus برای وارد کردن سریع جزئیات کسبوکار از نمایه کسبوکار خود استفاده کنید. پساز وارد کردن به ابزار «سازنده سریع»، میتوانید پیوندهای جاسازیشده رزرو قرار را، درصورت دردسترس بودن، برای مکانهای کسبوکارتان بااستفاده از رزرو با Google فعال کنید. حتی اگر «نمایه کسبوکار» منسوب به «حساب Google» نداشته باشید، همچنان میتوانید از «سازنده سریع» برای جاسازی کردن پیوندهای رزرو برای کسبوکارهایی که قبلاً با ارائهدهندگان رزرو طرف سوم ازطریق «رزرو با Google»* فعال کردهاید استفاده کنید.
*«رزرو با Google» فقط در کشورها/ مناطق خاصی دردسترس است که کسبوکارها با ارائهدهنده رزرو پشتیبانیشدهای کار میکنند. اگر به «رزرو با Google» علاقهمند هستید، اما با شریک «رزرو با Google» کار نمیکنید، ارائهدهندهتان را راهنمایی کنید تا با تکمیل این فرم علاقهمندی، علاقهمندی خود را ارسال کند و اسناد ما را مرور کند تا ببیند چگونه میتواند شروع کند. اگر ازقبل با ارائهدهنده رزرو کار نمیکنید، میتوانید ارائهدهندگان واجدشرایط را در بخش «رزروها» در مدیر نمایه کسبوکار ببینید.
استفاده از «نمایه کسبوکار» برای فعال کردن رزرو قرار
وقتی حضور آنلاینتان را با نمایه کسبوکار مدیریت میکنید، مکانهای کسبوکاری که ایجاد میکنید با شناسههای مکان «پلاتفرم Google Maps» مرتبط میشوند تا عملکرد نقشهبرداری یکپارچه با دادههای کسبوکار فعال شود.
میاناهای برنامهسازی کاربردی «نمایه کسبوکار» به شما امکان میدهند کنشهایی مثل رزرو قرار ایجاد کنید که میتوانید آنها را بازیابی کنید و در برنامههایتان نمایش دهید، اما برای فعال کردن این ویژگی، باید چند مرحله دستی را که در زیر شرح داده شده است انجام دهید.
وقتی کاربران «جزئیات مکان» را برای یکی از مکانهایتان در پانل کناری مشاهده میکنند، میتوانید پیوندی برای آنها ارائه دهید تا قرار ملاقات بگذارند. این بخش نحوه انجام این کار را شرح میدهد.
-
برای مکان نوع
APPOINTMENT،ONLINE_APPOINTMENT، یاDINING_RESERVATION،placeActionLinkمیانای برنامهسازی کاربردی «نمایه کسبوکار» ایجاد کنید.placeActionLinkشیئی خواهد بود که برای پیوند قرار در پانل کناری استفاده میکنید. (اگر قبلاً پیوند کنش قرار ملاقات موردنظرتان را ایجاد کردهاید، به مرحله بعدی بروید.) در اینجا نمونهای از پاسخ یک عملیات موفقplaceActionLinks.createPOST آورده شده است:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
مکان «نمایه کسبوکار» مرتبط با شناسه مکان Google Maps Platform را پیدا کنید.
وقتی کاربران «جزئیات جا» را مشاهده میکنند، درواقع جزئیات شناسه جای «پلاتفرم Google Maps» را مشاهده میکنند. شناسه مکان با شناسه مکان «نمایه کسبوکار» مرتبط است، بنابراین باید شناسه مکان را براساس شناسه مکان نقشه پیدا کنید تا بتوانید پیوند رزرو قرار را که ایجاد کردهاید بازیابی و نمایش دهید. فراخوانیهای میانای برنامهسازی کاربردی «نمایه کسبوکار» زیر را انجام دهید:
- حسابهای پروژهتان را فهرست کنید.
- فهرست کردن همه مکانهای موجود در حساب.
- در مکانهای حساب،
LocationKeyحاوی شناسه مکان Google Maps Platform است که میتوانید آن را با شناسه مکان مکانی که مشاهده میشود مقایسه کنید.
-
با شناسه مکان، میتوانید پیوند کنش موردنظرتان را دریافت کنید. برای بازیابی قرار موجود
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" } ] } - یک
<div>در پانل کناری ایجاد کنید و آن را با دادههای مرتبط از شیءplaceActionLinkپر کنید، بهویژه URI برای پیوند رزرو قرار.
جایگزینهای دیگر برای افزودن پیوند قرار
اگر «نمایه کسبوکار» را مدیریت نمیکنید یا نمیخواهید از راهکار Quick Builder Locator Plus استفاده کنید، پلاتفرم رزرو قرار را برای اسناد مربوط به جاسازی ابزاره رزرو در وبسایت یا برنامه بررسی کنید. گزینه دیگر استفاده از Google Cloud است، مانند Cloud Spanner برای مدیریت موجودی (ویدیو).
درحال نمایش پیشنهادهای محلی
در پانل کناری «جزئیات جا» برای مکان، میتوانید پیشنهادهای محلی را برای کلیک کردن کاربران نشان دهید. Google My Business API به شما امکان میدهد «پستهایی» (مانند پیشنهادهای محلی) را که با مکانهایتان مرتبط هستند ایجاد و بازیابی کنید. شکل زیر نمونهای از پیشنهاد محلی را در پانل کناری «جزئیات مکان» نشان میدهد.
(نمودار معماری در بخش سازنده سریع فناوریهای دردسترس برای افزودن پیشنهادهای ویژه به مکانیاب را نشان میدهد.)
چون پیشنهادهای محلی با مکانها مرتبط هستند، باید شناسه مکان «نمایه کسبوکار» را که با شناسه مکان «پلاتفرم Google Maps» برای مکانی که کاربران مشاهده میکنند مرتبط است پیدا کنید.
وقتی شناسه مکان «نمایه کسبوکار» را داشته باشید، میتوانید پیشنهاد ویژه مربوطه را بهعنوان
localPost بازیابی کنید تا در پانل کناری «جزئیات جا» نمایش داده شود. مراحل مربوطه در اینجا آمده است:
- با Google My Business API،
هر پست پیشنهادی را که میخواهید
نمایش دهید، از نوع
OFFERایجاد کنید. -
مکان / شناسه مکان «نمایه کسبوکار» مرتبط با شناسه مکان را در نقشه پیدا کنید.
وقتی کاربران «جزئیات جا» را مشاهده میکنند، درواقع جزئیات شناسه جای «پلاتفرم Google Maps» را مشاهده میکنند. شناسه مکان با شناسه مکان «نمایه کسبوکار» مرتبط است، بنابراین باید شناسه مکان را براساس شناسه مکان نقشه پیدا کنید تا بتوانید پیوند پیشنهاد محلی را برای مکانتان بازیابی و نمایش دهید. فراخوانیهای میانای برنامهسازی کاربردی «نمایه کسبوکار» زیر را انجام دهید:
- حسابهای پروژهتان را فهرست کنید.
- فهرست کردن همه مکانها در حساب.
- در مکانهای حساب،
LocationKeyحاوی شناسه مکان Maps است که میتوانید آن را با شناسه مکان مکانی که درحال مشاهده است مقایسه کنید.
در زیر نمونهای از درخواست جزئیات مکان در میانای برنامهسازی کاربردی «نمایه کسبوکار» آورده شده است:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
پاسخ حاوی فیلد
locationKeyاست که شناسه مکان است و میتوانید از آن در درخواستهای «پلاتفرم Google Maps» استفاده کنید.برای دیدن پاسخ نمونه، ازهم باز کنید.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
اکنون که شناسه مکان را دارید، میتوانید پیشنهاد موردنظرتان را دریافت کنید. برای بازیابی «پست» پیشنهاد موجود،
localPostsموجود را برای مکان فهرست کنید و برایtopicTypeازOFFERفیلتر کنید تا محتوای پیشنهادی را که میخواهید استفاده کنید پیدا کنید.در اینجا یک درخواست نمونه برای فهرست کردن «پستهای محلی» فعال برای یک مکان آورده شده است:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
مثال زیر
OFFERlocalPostرا در پاسخ نشان میدهد.برای دیدن پاسخ نمونه، ازهم باز کنید.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], } -
<div>را در پانل کناری با دادههای مربوط از شیءlocalPostایجاد و پر کنید.
درحال سفارشیسازی کردن نقشه
میتوانید ظاهر و جزئیات نقشهتان را به چند روش تغییر دهید. برای مثال، میتوانید:
- نشانگرهای سفارشی خودتان را ایجاد کنید تا جایگزین سنجاقهای پیشفرض نقشه شوند.
- رنگ عوارض نقشه را تغییر دهید تا نمانامتان را منعکس کند.
- کنترل کنید کدام نقاط جالب (جاذبهها، غذا، اقامتگاه، و غیره) و با چه تراکمی نمایش داده شود، تا بتوانید توجه کاربر را به مکانهایتان جلب کنید و درعینحال نشانهای راهنمایی را که به کاربران کمک میکند به نزدیکترین مکان برسند برجسته کنید.
ایجاد نشانگرهای نقشه سفارشی
میتوانید نشانگرهای پیشرفته خود را با تغییر دادن رنگ پیشفرض پسزمینه، حاشیه، یا نویسه سنجاق (مثلاً برای نشان دادن اینکه مکانی باز است یا نه)، جایگزین کردن نشانگر با تصویر گرافیکی سفارشی مانند نشانواره نمانام خود، یا ساختن نشانگرهای HTML و CSS سفارشی سفارشیسازی کنید. پنجرههای اطلاعات میتوانند اطلاعات بیشتری مانند ساعت کاری، شماره تلفن، یا عکسها را به کاربران ارائه دهند.
در زیر نمونه نقشهای آمده است که از نشانگرهای گرافیکی سفارشی استفاده میکند. (کد منبع را در موضوع نشانگرهای گرافیکی سفارشی Maps JavaScript API ببینید.)
برای اطلاعات دقیق، به اسناد نشانگرهای پیشرفته برای جاوا اسکریپت (وب)، Android، و iOS مراجعه کنید.
درحال سبکبندی نقشه
«پلاتفرم Google Maps» به شما امکان میدهد نقشه خود را بهگونهای سبکبندی کنید که به کاربران کمک کند نزدیکترین مکان را پیدا کنند، در سریعترین زمان ممکن به آنجا برسند، و به شما کمک میکند نمانام خود را تقویت کنید. برای مثال، میتوانید رنگهای نقشه را تغییر دهید تا با نمانامسازی شما مطابقت داشته باشد، و میتوانید با کنترل کردن نقاط جالب که برای کاربران قابلمشاهده است، حواسپرتیها را در نقشه کاهش دهید. Google Maps Platform همچنین تعدادی الگوهای شروع نقشه ارائه میدهد که برخیاز آنها برای صنایع مختلف مانند سفر، لجستیک، املاک و مستغلات، و خردهفروشی بهینهسازی شدهاند.
میتوانید سبکهای نقشه را در صفحه سبکهای نقشه در پروژه خود در کنسول Google Cloud ایجاد یا اصلاح کنید.
برای دیدن پویانماییهای ایجاد سبک نقشه و سبکبندی در کنسول Cloud، ازهم باز کنید:
سبکهای نقشه صنعت
این پویانمایی سبکهای نقشه ازپیشتعریفشده مختص صنعت را نشان میدهد که میتوانید استفاده کنید. این سبکها نقطه شروع بهینهای برای هر نوع صنعت ارائه میدهند. برای مثال، سبک نقشه «خردهفروشی» نقاط جالب را در نقشه کاهش میدهد و به کاربران اجازه میدهد روی مکانهای شما و همچنین نشانهای راهنما تمرکز کنند تا به آنها کمک کند در سریعترین زمان ممکن و با اطمینان کامل به نزدیکترین مکان برسند.
کنترل نقاط موردعلاقه
این پویانمایی رنگ نشانگر را برای نقاط موردعلاقه تنظیم میکند و تراکم نقاط موردعلاقه را در سبک نقشه افزایش میدهد. هرچه تراکم بیشتر باشد، نشانگرهای نقطه موردعلاقه بیشتری در نقشه نشان داده میشود.
هر سبک نقشه شناسه خودش را دارد. پساز انتشار سبک در کنسول Cloud، به آن شناسه نقشه در کدتان ارجاع میدهید—یعنی میتوانید سبک نقشه را بهطور همزمان بدون بازسازی کد برنامهتان بهروز کنید. ظاهر جدید بهطور خودکار در برنامه موجود نشان داده میشود و در پلاتفرمهای مختلف استفاده میشود. نمونههای زیر نشان میدهد که چگونه بااستفاده از Maps JavaScript API، شناسه نقشه را به صفحه وب اضافه کنید.
با گنجاندن یک یا چند map_ids در نشانی وب اسکریپت،
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_locatorplus_v2_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' });
درباره گنجاندن سبکپردازی نقشه بااستفاده از فضای ابری در جاوا اسکریپت (وب)، Android، و iOS بیشتر بدانید.
کسب اطلاعات آماری استفاده با Analytics
بااستفاده از تجزیهوتحلیل، میتوانید اطلاعات آماری ارزشمندی درباره نحوه تعامل کاربران با مکانیابتان بهدست آورید. این بخش راهنماییهایی درباره پیکربندی و پایش Google Analytics و تجزیهوتحلیل «نمایه کسبوکار» برای پیگیری دادههای موردنیازتان ارائه میدهد. برای کاربران Quick Builder Locator Plus، داشبورد تجزیهوتحلیل به شما کمک میکند تا براساس دادههای ناشناسسازیشده، اطلاعات آماری را تحلیل و تولید کنید.
برای دسترسی به این گزارش، به بخش گزارشهای تعامل در کنسول Cloud بروید. برای جزئیات بیشتر درباره این گزارش، گزارشهای تعامل را ببینید.
چون Google Analytics ویژگیهای زیادی ارائه میدهد، اطلاعات جامع راهاندازی و استفاده را ارائه نمیدهیم. درعوض، شما را به اسناد کلیدی برای مطالعه و دستورالعملهای بیشتر ارجاع میدهیم و درعینحال ملاحظات کلیدی تجزیهوتحلیل را برای برنامه مکانیاب شما برجسته میکنیم.
راهاندازی Google Analytics
اگر ازقبل از Google Analytics با برنامهتان استفاده میکنید، میتوانید از این بخش رد شوید.
در زیر نمونهای از «برچسب سراسری» را میبینید که برای فعال کردن 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>
چه از Google Tag Manager استفاده کنید یا Google Analytics را مستقیماً به سایتتان اضافه کنید، نکته کلیدی این است که بدانید چگونه از پیادهسازی Google Analytics برای انجام کارهای زیر استفاده کنید:
- تعاملات کاربر را راهاندازی کنید، مانند کلیکهایی که میتوانند مستقل از بازدیدهای صفحه وبسایت اندازهگیری شوند (رویدادها).
- دادههای خام (سنجهها) را در گروهبندیهای معنادار (ابعاد یا ابعاد سفارشی) مشاهده کنید.
استفاده از رویدادهای سفارشی
در زیر نمونهای از تعریف رویداد سفارشی در مکانیاب شما آورده شده است:
gtag('event', 'location', { 'method': 'address' });
مهم است که event و method را بهاندازه کافی واضح نامگذاری کنید
تا بتوانید رویدادها را در گزارشدهی درک کنید. آنها را برای تعاملات خاصی که میخواهید اندازهگیری کنید راهاندازی کنید، مثلاً وقتی کاربر نشانیای را از فهرست کرکرهای «تکمیل خودکار» انتخاب میکند، که در شکل زیر نشان داده شده است.
میتوانید تماس ردیابی زیر را به Google Analytics ارسال کنید که از رویداد و روش تعریفشده شما استفاده میکند. (برای خوانایی بیشتر، هر پارامتر پُرسمان را در خطی جداگانه نشان میدهیم.)
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
شکل زیر نشان میدهد که آن فراخوانی Google Analytics چگونه در نمای «بازرسی» مرورگر، در برگه «شبکه» ظاهر میشود. (برای بزرگ کردن کلیک کنید).
با مشاهده نمای «بیدرنگ» در Google Analytics، میتوانید درستیسنجی کنید که برچسبهای رویداد سفارشی شما بهدرستی ضبط میشوند. برای مثال، رویداد «مکان» که قبلاً برای «تکمیل خودکار جا» راهاندازی شده است، همانطور که در شکلهای زیر نشان داده شده است، در Google Analytics ظاهر میشود.
یا میتوانید رویدادهای همزمان را بااستفاده از DebugView نظارت کنید، همانطور که در شکل زیر نشان داده شده است. توجه داشته باشید که برای دسترسی به گزارش کامل «رویدادها» در بخش تعامل > رویدادها در Google Analytics باید ۲۴ ساعت صبر کنید.
همچنین میتوانید استراتژیهایی را برای هدایت ترافیک بیشتر به مکانهای فیزیکی خود ازطریق برنامه مکانیاب توسعه دهید و اندازهگیری کنید. برای مثال، Google Analytics یک پیشنهاد بازدیدهای فروشگاهی در Analytics دارد که تجزیهوتحلیل بازدیدهای فروشگاهی فیزیکی (اندازهگیریشده توسط Google Ads) را به تجزیهوتحلیل مکانیاب شما پیوند میدهد. همچنین میتوانید استراتژیهای برنامه-به-مکان خودتان را توسعه دهید، مثلاً پیشنهادهای آنلاین قابلپسخرید در مکانهای فیزیکیتان.
سنجههای «نمایه کسبوکار»
علاوهبر پیگیری رویدادها، سنجهها، و ابعادی که به آنها علاقه دارید با Google Analytics، نمایه کسبوکار نیز سنجههای خودش را دارد. برای مثال، اگر پیوندهای رزرو قرار و پیشنهاد محلی را به مکانیابتان اضافه کنید، میتوانید سنجههای مربوط به آن بازدیدها و کلیکها را دریافت کنید.
نمونه درخواست زیر به میانای برنامهسازی کاربردی «نمایه کسبوکار» انواع مختلفی از سنجهها را درخواست میکند. برای ردیابی کلیکهای پیشنهاد، سنجههای LOCAL_POST_VIEWS_SEARCH و LOCAL_POST_ACTIONS_CALL_TO_ACTION مرتبطترین سنجهها خواهند بود.
برای دیدن درخواست نمونه، ازهم باز کنید.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}برای دیدن پاسخ نمونه، ازهم باز کنید.
{
"locationMetrics": [
{
"locationName": "accounts/111098884960528804666/locations/15899957830169237700",
"timeZone": "Asia/Singapore",
"metricValues": [
{
"metric": "QUERIES_DIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "82"
}
},
{
"metric": "QUERIES_INDIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1493"
}
},
{
"metric": "VIEWS_MAPS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1571"
}
},
{
"metric": "VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "631"
}
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "3"
}
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "42"
}
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "11"
}
}
]
}
]
}
پاسخ حاوی سنجهها است، بهویژه:
- ۱۵۷۱ بازدید از مکان در Google Maps
- ۶۳۱ بازدید از مکان در «جستجوی Google».
- ۳ درخواست برای «مسیرهای رانندگی» به مکان.
- ۴۲
LOCAL_POST_ACTIONS_CALL_TO_ACTIONکلیک روی پیشنهاد ویژه. - ۱۱ بازدید از «پستهای محلی» در «جستجوی Google».
گزینه دیگر برای سنجهها شامل استفاده از رزرو با Google برای ایجاد پیوندهای کنش است. وقتی کاربران روی پیوندهای کنش ایجادشده در «رزرو با Google» کلیک میکنند، میتوانید آن کنشها را در Google Analytics ثبت کنید، که به شما امکان میدهد تبدیلها را در Google Analytics ردگیری کنید. برای اطلاعات بیشتر، مستندات ردگیری تبدیل را ببینید.
صرفنظر از استراتژی سنجههایی که استفاده میکنید، اندازهگیری چیزی فراتر از دیدن عملکردتان درمقابل شاخصهای کلیدی عملکرد است. این اعداد همچنین به شما کمک میکنند تا بفهمید چگونه این بهبودهای مکانیاب بر کسبوکار شما تأثیر میگذارند. علاوهبراین، میتوانید سنجههای Google Analytics را در مکانیابتان با سنجههای «نمایه کسبوکار» مقایسه کنید. برای مثال، با مقایسه این سنجهها میتوانید ببینید چند مشتری از مکانیاب شما و Google Maps مسیر دریافت میکنند تا از مکانهای فیزیکی شما بازدید کنند.
بهبود Locator Plus
بسته به نیازهای کسبوکار یا کاربران، میتوانید تجربه کاربر را بیشتر بهبود دهید.
درحال ارسال مسیرها به تلفن همراه
برای اینکه کاربران راحتتر به مکان برسند، میتوانید پیوند مسیر را برایشان پیامک یا ایمیل کنید. وقتی روی آن کلیک کنند، برنامه Google Maps در تلفنشان راهاندازی میشود (اگر نصب شده باشد)، یا maps.google.com در مرورگر وب دستگاهشان بار میشود. هر دوی این تجربهها به کاربر امکان میدهند از ناوبری گامبهگام، ازجمله راهنمای گفتاری، برای رسیدن به مقصد استفاده کند.
از
نشانیهای وب Maps برای ساختن نشانی وب مسیرها مانند نشانی زیر استفاده کنید،
با نام مکان کدگذاریشده با نشانی وب بهعنوان پارامتر destination و شناسه مکان بهعنوان
پارامتر destination_place_id. ساختن یا استفاده از نشانیهای وب Maps هزینهای ندارد، بنابراین نیازی نیست کلید API را در نشانی وب اضافه کنید.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
میتوانید بهصورت اختیاری یک پارامتر پُرسمان origin را بااستفاده از همان قالب نشانی مقصد ارائه دهید. اما با حذف آن، مسیرها از مکان فعلی کاربر شروع میشود که ممکن است با جایی که از برنامه Locator Plus شما استفاده میکردند متفاوت باشد.
نشانیهای وب Maps
گزینههای پارامتر پرسمان اضافی، مانند travelmode و
dir_action=navigate را برای راهاندازی مسیرها با ناوبری روشن ارائه میدهند.
این پیوند کلیککردنی، که نشانی وب نمونه بالا را گسترش میدهد، origin
را بهعنوان استادیوم فوتبال لندن تنظیم میکند و از travelmode=transit برای ارائه مسیرهای حملونقل عمومی
به مقصد استفاده میکند.
برای ارسال پیامک یا ایمیل حاوی این نشانی وب، توصیه میکنیم از برنامه شخص ثالثی مثل twilio استفاده کنید. اگر از App Engine استفاده میکنید، میتوانید از شرکتهای شخص ثالث برای ارسال پیامک یا ایمیل استفاده کنید. برای اطلاعات بیشتر، به ارسال پیام با سرویسهای شخص ثالث مراجعه کنید.
نمایش «نمای خیابان» برای کمک به کاربران در تجسم مکانها
برای بسیاری از مکانها در جهان، میتوان از «نمای خیابان» برای نمایش نمای بیرونی یک مکان استفاده کرد و به کاربران تصویری از مکان را قبلاز رسیدن به آنجا ارائه داد. میتوانید «نمای خیابان» را بهصورت تعاملی (وب) یا ایستا (میانای برنامهسازی کاربردی) ارائه دهید، بسته به اینکه میخواهید کاربران بتوانند در منطقه بهصورت ۳۶۰ درجه «اطراف را نگاه کنند» یا نه. «نمای خیابان» برای Android و iOS نیز دردسترس است.
تعیین مکان کاربر با موقعیت جغرافیایی
در بیشتر موارد، میتوانید مکان کاربر را بااستفاده از خدمات مکانمبنای تعبیهشده در دستگاه یا مرورگر او بهطور دقیق مشخص کنید. نمونهای از استفاده از ویژگی «موقعیت جغرافیایی HTML5» مرورگر برای نمایش مکان جغرافیایی کاربر یا دستگاه در Google Map ارائه میدهیم و اسنادی درباره درخواست اجازهها و دریافت مکان در Android و iOS وجود دارد. بااینحال، ممکن است شرایطی وجود داشته باشد که بخواهید از مکانیاب جایگزین استفاده کنید؛ برای مثال، اگر خدمات مکان دستگاه غیرفعال باشد یا نگران باشید که مکان دستگاه جعل شود.
Geolocation API یک میانای برنامهسازی کاربردی سمت سرور است که مکان و شعاع دقت را براساس اطلاعات مربوط به دکلهای سلولی و گرههای Wi-Fi که کارخواه میتواند شناسایی کند برمیگرداند. میتوانید از «مکان جغرافیایی» بهعنوان سازوکار پشتیبان برای تعیین مکان کاربر استفاده کنید، یا میتوانید از آن برای بررسی متقابل مکان گزارششده توسط دستگاه استفاده کنید.
ترکیب کردن دادههای مکان سفارشی با «جزئیات جا»
در بخش قبلی ارائه جزئیات جا، استفاده از «جزئیات جا» را برای ارائه سطح غنیای از اطلاعات به کاربران درباره مکانهایتان، مانند ساعت کاری، عکسها، و مرورها پوشش دادیم.
مفید است که قیمتگذاری و سطوح SKU فیلدهای داده مختلف را در Places API (جدید) درک کنید. برای مدیریت هزینههایتان، یک راهبرد این است که اطلاعاتی را که ازقبل درباره مکانهایتان دارید با اطلاعات جدید Google Maps مثل بسته بودن موقت، ساعت کاری تعطیلات، و ردهبندیها، عکسها، و مرورهای کاربران ترکیب کنید. اگر ازقبل اطلاعات تماس مکانهایتان را دارید، نیازی نیست آن فیلدها را از «جزئیات جا» درخواست کنید و میتوانید ماسک فیلدتان را محدود کنید تا فقط فیلدهایی را که میخواهید نمایش داده شود واکشی کند.
ممکن است دادههای مکان خودتان را داشته باشید که بخواهید بهجای «جزئیات مکان» استفاده کنید یا آن را تکمیل کنید. codelab برای مکانیاب پشته کامل نمونهای از استفاده از GeoJSON با پایگاه داده برای ذخیره و بازیابی جزئیات مکان خودتان ارائه میدهد.