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

بررسی اجمالی

وب iOS API

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

هم اکنون آن را بسازید!

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

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

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

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

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

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

فعال کردن API ها

برای پیاده سازی این شیوه ها، باید API های زیر را در Google Cloud Console فعال کنید: برای اطلاعات بیشتر درباره راه‌اندازی، شروع به کار با Google Maps Platform را ببینید.

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

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

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

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

یا راه‌حل Quick Builder Locator Plus را برای ساخت سریع نقشه، از جمله وارد کردن آسان جزئیات کسب‌وکار از فهرست‌های نمایه کسب‌وکار ، جاسازی پیوندهای رزرو قرار، و استقرار در Google Cloud Storage، کاوش کنید.

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

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

یا راه‌حل Quick Builder Locator Plus را برای ساخت سریع نقشه، از جمله وارد کردن آسان جزئیات کسب‌وکار از فهرست‌های نمایه کسب‌وکار ، جاسازی پیوندهای رزرو قرار، و استقرار در Google Cloud Storage، کاوش کنید.

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

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

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

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

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

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

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

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

با استفاده از پیاده سازی Dynamic Maps خودتان

این مثال از: Maps JavaScript API استفاده می کند همچنین موجود: اندروید | iOS

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

ابتدا باید Maps JavaScript API را در صفحه قرار دهید. این کار از طریق پیوند دادن اسکریپت زیر در صفحه HTML شما انجام می شود.

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

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

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

<div id="map"></div>

مرحله بعدی این است که عملکرد اصلی نقشه خود را تنظیم کنید. این کار در تابع اسکریپت initMap مشخص شده در URL اسکریپت انجام می شود. در این اسکریپت که در مثال زیر نشان داده شده است، می‌توانید مکان اولیه، نوع نقشه و کنترل‌هایی که روی نقشه برای کاربران شما در دسترس خواهد بود را تنظیم کنید. توجه داشته باشید که getElementById() به شناسه div "map" در بالا ارجاع می دهد.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    zoomControl: false
  });
}

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

گرفتن شناسه مکان

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

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

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

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

جغرافیایی مکان های شما

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

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

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

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

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

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

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

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 استفاده کنید. در اینجا نمونه ای از خوشه بندی نشانگر در نمونه مکان یاب فروشگاه جاوا اسکریپت GitHub آورده شده است .

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

این مثال از: Maps JavaScript API استفاده می کند همچنین موجود است: API | اندروید | iOS

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

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

برای دیدن ویدیوها برای درخواست جزئیات مکان، بزرگ کنید:

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

بسته شدن را بررسی کنید

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

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

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

نمایش مکان ها از نمای 45 درجه

این مثال از: Maps JavaScript API استفاده می کند همچنین موجود: اندروید | iOS

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

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

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

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

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

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

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

  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"],
      componentRestrictions: {'country': ['gb']},
      fields: ['place_id', 'geometry', 'formatted_address'] }
  );
  // When the user selects an address from the drop-down
  // zoom to the select location and add a marker.
  autocomplete.addListener("place_changed", 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

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

این مثال از: Distance Matrix API استفاده می کند همچنین موجود است: سرویس ماتریس فاصله، API جاوا اسکریپت Maps

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

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

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

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

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

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

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

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

محل فاصله مستقیم جاده در ترافیک / زمان
مکان A 3.32 کیلومتر 4.5 کیلومتر در 15 دقیقه
مکان B 3.20 کیلومتر 5.0 کیلومتر در 17 دقیقه
مکان C 4.84 کیلومتر 6.9 کیلومتر در 23 دقیقه

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

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

این مثال از: Maps JavaScript API Directions Service استفاده می کند همچنین در دسترس است: خدمات وب Directions API برای استفاده در Android و iOS، مستقیماً از برنامه یا از راه دور از طریق یک پروکسی سرور

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. برای مکان از نوع APPOINTMENT ، ONLINE_APPOINTMENT ، یا DINING_RESERVATION ، یک APIs Profile Business placeActionLink ایجاد کنید. placeActionLink شیئی است که برای پیوند قرار در پانل کناری استفاده می کنید. (اگر قبلاً پیوند اقدام قرار ملاقات مورد نظر خود را ایجاد کرده اید، به مرحله بعدی بروید.) در اینجا یک نمونه پاسخ از یک عملیات موفق placeActionLinks.create POST آورده شده است:

    {
    "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. مکان نمایه کسب‌وکار مرتبط با شناسه مکان پلتفرم Google Maps را پیدا کنید.

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

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

  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 پیوند رزرو قرار، ایجاد و پر کنید.

جایگزین های دیگر برای افزودن پیوندهای قرار ملاقات

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

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

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

( نمودار معماری در بخش قبل فناوری های موجود برای افزودن پیشنهادات به مکان یاب شما را نشان می دهد.)

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

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

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

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

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

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

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

  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 ایجاد و پر کنید.

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

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

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

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

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

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

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

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

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

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

برای دیدن انیمیشن‌های ایجاد سبک نقشه و استایل‌سازی در کنسول Cloud بزرگ کنید:

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

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

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

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

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

در صفحه Map Style، ماوس روی Create New Map Style کلیک می کند. در صفحه New Map Style، در قسمت Create Your Own Style، دکمه رادیویی Google Map انتخاب شده است. ماوس روی دکمه رادیویی Atlas برای سبک Atlas کلیک می کند، سپس روی Open in Style Editor کلیک می کند. در ویرایشگر سبک، ماوس روی ویژگی Points of Interest کلیک می کند، سپس روی عنصر Icon کلیک می کند و رنگ را قرمز می کند. سپس ماوس چک باکس POI Density را انتخاب می کند و کنترل تراکم را برای حداکثر چگالی به سمت راست می کشاند. با افزایش تراکم، نشانگرهای قرمز رنگ بیشتری در پیش نمایش نقشه ظاهر می شوند. سپس ماوس به سمت دکمه ذخیره حرکت می کند.

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

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

<script
 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_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'
});

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

به دست آوردن بینش استفاده با تجزیه و تحلیل

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

Locator Plus Analytics
داشبورد تجزیه و تحلیل مکان یاب فروشگاه معیارهای عملکرد را در اختیار شما قرار می دهد

برای دسترسی به این گزارش، به بخش گزارش‌های تعامل در Cloud Console بروید. برای جزئیات بیشتر درباره این گزارش، به گزارش های تعامل مراجعه کنید.

با توجه به قدرت و انعطاف 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>

چه از گوگل تگ منیجر استفاده کنید و چه گوگل آنالیتیکس را مستقیماً به سایت خود اضافه کنید، نکته کلیدی این است که بدانید چگونه از پیاده سازی گوگل آنالیتیکس خود برای انجام کارهای زیر استفاده کنید:

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

استفاده از رویدادهای سفارشی

در زیر نمونه ای از تعریف یک رویداد سفارشی در مکان یاب شما آورده شده است:

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 Analtics در نمای بازرسی مرورگر، در تب Network ظاهر می‌شود. (برای بزرگنمایی کلیک کنید).

می‌توانید با مشاهده نمای «زمان واقعی» در Google Analytics تأیید کنید که برچسب‌های رویداد سفارشی شما به درستی ثبت می‌شوند. برای مثال، رویداد «مکان» که قبلاً برای تکمیل خودکار مکان تنظیم شده بود، در Google Analytics ظاهر می‌شود، همانطور که در شکل‌های زیر نشان داده شده است.

از طرف دیگر، همانطور که در شکل زیر نشان داده شده است، می توانید با استفاده از DebugView رویدادهای بلادرنگ را نظارت کنید. توجه داشته باشید که قبل از دسترسی به گزارش کامل رویدادها در بخش Engagement > Events Google Analytics باید 24 ساعت صبر کنید.

همچنین می‌توانید از برنامه مکان یاب خود، استراتژی‌هایی را برای هدایت ترافیک بیشتر به مکان‌های فیزیکی خود ایجاد و اندازه‌گیری کنید. به عنوان مثال، Google Analytics یک پیشنهاد بازدید از فروشگاه در آنالیتیکس دارد که تجزیه و تحلیل بازدیدهای فیزیکی از فروشگاه (اندازه گیری شده توسط Google Ads) را به تجزیه و تحلیل مکان یاب شما پیوند می دهد. شما همچنین می توانید استراتژی های برنامه به مکان خود را توسعه دهید، مانند پیشنهادات آنلاین قابل بازخرید در مکان های فیزیکی خود.

معیارهای نمایه کسب و کار

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

نمونه درخواست زیر به APIهای نمایه کسب‌وکار چندین نوع معیار را می‌خواهد. برای ردیابی کلیک های پیشنهادی، معیارهای 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"
                   }
               }
           ]
       }
   ]
}

پاسخ شامل معیارهایی است که مهمترین آنها عبارتند از:

  • 1571 بازدید از مکان در نقشه های گوگل
  • 631 بازدید از مکان در جستجوی گوگل.
  • 3 درخواست برای مسیرهای رانندگی به محل.
  • 42 کلیک پیشنهادی LOCAL_POST_ACTIONS_CALL_TO_ACTION .
  • 11 بازدید از پست های محلی در جستجوی گوگل.

یکی دیگر از گزینه های معیار استفاده از Reserve with Google برای ایجاد پیوندهای اقدام است. هنگامی که کاربران روی پیوندهای اقدام ایجاد شده در Reserve with Google کلیک می کنند، می توانید آن اقدامات را به Google Analytics وارد کنید، که به شما امکان می دهد تبدیل ها را در Google Analytics پیگیری کنید. برای اطلاعات بیشتر به اسناد ردیابی تبدیل مراجعه کنید.

صرف نظر از استراتژی متریکی که استفاده می کنید، اندازه گیری بیشتر از دیدن عملکرد شما در برابر KPI هایتان است. اعداد همچنین به شما کمک می‌کنند تا تأثیری را که این پیشرفت‌های مکان یاب بر کسب‌وکارتان دارند، درک کنید. علاوه بر این، می توانید معیارهای Google Analytics را در مکان یاب خود با معیارهای نمایه کسب و کار مقایسه کنید. به عنوان مثال، با مقایسه این معیارها، می‌توانید ببینید که چه تعداد مشتری از مکان یاب شما و نقشه‌های Google برای بازدید از مکان‌های فیزیکی شما راهنمایی می‌گیرند.

تقویت مکان یاب پلاس

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

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

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

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

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

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

این پیوند قابل کلیک ، که نشانی اینترنتی مثال بالا را گسترش می دهد، origin را به عنوان استادیوم فوتبال لندن تعیین می کند و از travelmode=transit برای ارائه مسیرهای حمل و نقل عمومی به مقصد استفاده می کند.

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

نمایش نمای خیابان برای کمک به کاربران در تجسم مکان‌ها

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

تعیین مکان کاربر با موقعیت جغرافیایی

در بیشتر موارد، می‌توانید موقعیت مکانی کاربر را با استفاده از سرویس‌های موقعیت یابی که در دستگاه‌ها یا مرورگرهای آنها تعبیه شده است مشخص کنید. ما نمونه‌ای از استفاده از ویژگی HTML5 Geolocation یک مرورگر برای نمایش موقعیت جغرافیایی یک کاربر یا دستگاه بر روی نقشه Google ارائه می‌کنیم، و اسنادی در مورد درخواست مجوزها و به دست آوردن موقعیت مکانی در Android و iOS وجود دارد. با این حال، ممکن است شرایطی وجود داشته باشد که شما یک مکان یاب جایگزین بخواهید. به عنوان مثال، اگر خدمات مکان دستگاه غیرفعال شده باشد یا نگرانی در مورد جعلی بودن مکان دستگاه دارید.

Geolocation API یک API سمت سرور است که یک مکان و شعاع دقت را بر اساس اطلاعات مربوط به برج‌های سلولی و گره‌های Wi-Fi که مشتری می‌تواند شناسایی کند، برمی‌گرداند. می توانید از موقعیت جغرافیایی به عنوان مکانیزم پشتیبان برای تعیین مکان کاربر استفاده کنید، یا می توانید از آن برای بررسی متقاطع مکان گزارش شده توسط دستگاه استفاده کنید.

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

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

درک هزینه فیلدهای مختلف داده در جزئیات مکان، که به عنوان داده های پایه، تماس و جو طبقه بندی می شوند، مفید است. برای مدیریت هزینه‌های خود، یک استراتژی این است که اطلاعاتی را که قبلاً درباره مکان‌هایتان دارید با اطلاعات تازه (معمولاً داده‌های اولیه و تماس) از Google Maps مانند بسته شدن موقت، ساعات تعطیلات، و رتبه‌بندی‌ها، عکس‌ها و نظرات کاربران ترکیب کنید. اگر از قبل اطلاعات تماس مکان‌هایتان را دارید، نیازی به درخواست آن فیلدها از جزئیات مکان ندارید و می‌توانید بسته به آنچه می‌خواهید نمایش دهید، درخواست خود را محدود کنید تا فقط فیلدهای Basic یا Atmosphere Data را واکشی کند.

ممکن است اطلاعات مکان خود را برای تکمیل یا استفاده به جای جزئیات مکان داشته باشید. Codelab برای مکان یاب تمام پشته مثالی از استفاده از GeoJSON با یک پایگاه داده برای ذخیره و بازیابی جزئیات مکان شما ارائه می دهد.