این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

Places UI Kit چیست و چگونه می توانید از آن برای ایجاد راه حل های جذاب استفاده کنید؟

مقدمه

برای میلیون‌ها کاربر در سراسر جهان، Google Maps منبع اصلی برای اطلاعات دقیق و به‌روز مکان‌ها است. پایگاه داده غنی Google با بیش از 250 میلیون مکان در سراسر جهان، از جمله نظرات کاربران، عکس ها و رتبه بندی ها، سطح بی نظیری از جزئیات و اعتماد را ارائه می دهد. برای ارائه داده های جدید و واقعی، ما هر روز 100 میلیون به روز رسانی نقشه را انجام می دهیم.

Places UI Kit یک کتابخانه مؤلفه مقرون به صرفه و آماده برای استفاده است و با اطلاعات گسترده Google Maps در مورد مکان ها پشتیبانی می شود. این امکان را به شما می‌دهد تا تجربه مکان‌های مورد اعتماد و آشنای Google را با موارد استفاده جلویی خود بر روی نقشه مورد نظر خود ادغام کنید.

اجزاء

Places UI Kit مجموعه‌ای از اجزای رابط کاربری مجزا را ارائه می‌کند که می‌توانند به طور مستقل یا با هم برای ایجاد یک تجربه Places یکپارچه استفاده شوند.

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

مزایای کلیدی Places UI Kit

سهولت استفاده: تجربه کاربری قابل اعتماد Google برای Places را با حداقل کد در برنامه های خود بگنجانید.
استفاده در هر نقشه: برای اولین بار، می توانید از محتوای Places در نقشه غیر Google استفاده کنید.
رابط کاربری آشنا: مؤلفه ها یک رابط کاربری ارائه می دهند که با تجربه Google Maps سازگار است و آن را برای کاربران بصری می کند.
سفارشی سازی: Places UI Kit گزینه های سفارشی سازی بصری گسترده ای را بدون هزینه اضافی ارائه می دهد. شما می توانید از انواع تنظیمات و ویژگی های CSS سفارشی برای پیکربندی عناصر نمایش استفاده کنید.
مقرون به صرفه: کیت UI Places می تواند راه حل مقرون به صرفه تری در مقایسه با استفاده مستقیم از Places API باشد.

موارد استفاده در دنیای واقعی

کیت UI Places را می توان در برنامه های مختلف برای بهبود تجربه کاربر استفاده کرد.

برنامه‌های اکتشاف محلی: یک برنامه «کارهایی که باید انجام شود» می‌تواند از مؤلفه جستجوی مکان برای نمایش فهرستی از رستوران‌ها، کافه‌ها یا جاذبه‌های اطراف استفاده کند. هنگامی که کاربر مکانی را از لیست انتخاب می کند، جزء جزئیات مکان می تواند برای نمایش اطلاعات بیشتر در مورد آن مکان استفاده شود.
برنامه های برنامه ریزی سفر: یک برنامه سفر می تواند از جستجوی مکان استفاده کند تا به کاربران اجازه دهد هتل ها یا نقاط مورد علاقه در یک شهر خاص را جستجو کنند. سپس جزء جزئیات مکان می‌تواند عکس‌ها، رتبه‌بندی‌ها و نظرات را برای هر مکان نشان دهد تا به برنامه‌ریزی کمک کند.
درگاه‌های جستجوی املاک و املاک: یک برنامه کاربردی املاک می‌تواند از مؤلفه جستجوی مکان برای نشان دادن دسته‌های مختلف مکان‌های اطراف استفاده کند تا به خریدار یا اجاره‌کننده بالقوه خانه کمک کند تا قبل از برنامه‌ریزی بازدید، سبک زندگی محله را درک کند.
پیام‌رسانی و برنامه‌های رسانه‌های اجتماعی: یک برنامه پیام‌رسانی و رسانه‌های اجتماعی می‌تواند از جستجوی مکان برای جستجو و پیشنهاد مکان‌های نزدیک استفاده کند تا به کاربران کمک کند به راحتی مکان ملاقات را پیدا کنند. هنگامی که کاربران مکان‌ها را به اشتراک می‌گذارند، می‌توان از مؤلفه جزئیات مکان برای نمایش اطلاعات مکان‌های غنی استفاده کرد. با استفاده از دکمه از پیش ساخته شده Google Maps، کاربران به راحتی و با دقت می توانند مکان های بیشتر و اطلاعات سفر را در Google Maps کاوش کنند.

سفارشی سازی

غنای محتوا و سبک اجزای Places UI Kit را می توان مطابق با نیازهای شما سفارشی کرد.

استفاده از ویژگی‌های CSS سفارشی، برای مثال ویژگی‌های CSS برای Place Details Component ، به شما این امکان را می‌دهد که ظاهر و احساس اجزا را متناسب با طراحی برنامه خود تنظیم کنید. می توانید رنگ ها، فونت ها و سایر جنبه های بصری را سفارشی کنید. رعایت الزامات انتساب هنگام ایجاد تغییرات بصری بسیار مهم است. برای مثال، می‌توانید رنگ اصلی مورد استفاده برای پیوندها و تعداد بازبینی‌ها را با ویژگی --gmp-mat-color-primary CSS تغییر دهید.

شما می توانید محتوای مکانی خاص نمایش داده شده را با استفاده از عنصر gmp-place-content-config تو در تو برای انتخاب و پیکربندی محتوا، یا به سادگی با استفاده از gmp-place-all-content برای نمایش تمام محتوای موجود، کنترل کنید.

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

راهنمای اجرا

Places UI Kit از طریق Maps JavaScript و Places SDK برای Android و iOS در دسترس است.

شروع به کار

برای شروع استفاده از Places UI Kit، باید این مراحل را دنبال کنید:

پروژه Google Cloud خود را راه اندازی کنید : برای استفاده از Places UI Kit به یک پروژه Cloud با حساب صورتحساب نیاز دارید.
Enable the Places UI Kit : باید Places UI Kit را برای پروژه خود فعال کنید.
یک کلید API دریافت کنید : برای احراز هویت درخواست های شما به یک کلید API نیاز است.

برای جزئیات بیشتر پلتفرم خاص، راهنمای شروع به کار Places UI Kit برای جاوا اسکریپت ، اندروید و iOS را بررسی کنید.

مثال پیاده سازی

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

در زیر قطعه کدها آمده است. می توانید نسخه آزمایشی و کد کامل را در این مخزن GitHub پیدا کنید.

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

کتابخانه های مورد نیاز را در HTML بارگیری کنید.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

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

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

مولفه جستجوی مکان را اضافه کنید. جزء جستجوی مکان طرح‌بندی‌های افقی و عمودی را ارائه می‌کند. در این مثال از طرح افقی استفاده می کنیم. ویژگی "انتخاب پذیر" امکان کلیک کردن مورد لیست نتایج جستجو را فراهم می کند (رویداد انتخاب gmp با کلیک کردن فعال می شود).

در عنصر gmp-place-search، دو عنصر فرزند اضافه می کنیم:

gmp-place-all-content برای نمایش تمام محتوای موجود استفاده می شود
gmp-place-text-search-request برای پیکربندی عنصر جستجوی مکان استفاده می شود.

در این مثال تنظیمات را در جاوا اسکریپت تنظیم می کنیم

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

در مرحله بعد، مولفه Place Details را اضافه کنید، که در طرح‌بندی‌های فشرده و کامل موجود است و هر کدام از جهت‌های عمودی و افقی پشتیبانی می‌کنند. این مثال از طرح افقی فشرده استفاده می کند. مانند مؤلفه جستجوی مکان، دو عنصر فرزند اضافه می کنیم:

gmp-place-all-content نشان دهنده نمایش تمام محتوای موجود است
gmp-place-details-place-request برای انتخاب یک مکان استفاده می شود.

در این مثال مکان را در جاوا اسکریپت تنظیم می کنیم

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

در جاوا اسکریپت، کتابخانه هایی را که برای این مثال نیاز داریم وارد کنید. کتابخانه Places کتابخانه Places UI Kit را برای جاوا اسکریپت وارد می کند.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

ایجاد نقشه های پویا

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

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

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

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

حتماً نسخه آزمایشی و کد کامل موجود در این مخزن GitHub را بررسی کنید.

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

مشارکت کنندگان

نویسندگان اصلی:

ترزا کین | مهندس راه حل های پلتفرم نقشه های گوگل

Places UI Kit چیست و چگونه می توانید از آن برای ایجاد راه حل های جذاب استفاده کنید؟ با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.