آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 14) - کار با Info Windows

- visibility ٠ mode_comment

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

علاوه بر marker یا نشانه، چند ضلعی، دایره، مستطیل و بقیه اشکال موجود، ما همچنین میتونیم باکسها یا پنجره های اطلاعاتی یا Info Windows رو بر روی نقشه نمایش بدیم و با استفاده از اون، متنی رو به کاربر نمایش بدیم. این مطلب به شما آموزش میده که چطور از Info Windows استفاده کنید و نقشتون رو پیشرفته تر کنید.

اضافه کردن یک Window

Info Windows برای افزودن هر گونه متن و اطلاعاتی به نقشه مورد استفاده قرار میگیره. برای مثال، اگر شما بخواید اطلاعاتی در مورد یک نقطه خاص بر روی نقشه قرار بدید، شما میتونین از Info Window استفاده کنید. بطور معمول و عمدتا Info Window به نشانه یا Marker متصل و ربط داده میشه. شما میتونین برای ساختن یک Info Window یک نمونه جدید از شئ google.maps.InfoWindow رو بسازید. این مورد ویژگی های زیر رو پوشش میده:

  • Content : با استفاده از این ویژگی میتونین رشته متنی که قصد دارید در Window نمایش داده بشه رو مشخص کنید.
  • position : با استفاده از این ویژگی میتونین مختصات جغرافیایی نقطه ای که میخاید Window در اونجا نمایش داده بشه رو مشخص کنید.
  • maxWidth : بصورت پیش فرض Widnow به اندازه ای طولش زیاد میشه که تمام محتویاتش رو نمایش بده، اما شما میتونین برای اون یک ماکزیمم مشخص کنید که از اون بیشتر نشه.

مثال زیر رو ببینید:

خروجی:info window google maps

همچنین شما میتونین یک Info Window رو به یک نشانه یا Marker نسبت بدین و هر کاری که با Marker صورت بگیره، Info Window هم رفتار متناسب با اون نمایش میده. برای مثال کد زیر رو ببینید:

خروجی بصورت زیر هست:add window to marker google maps

همونطور که دیدید با درگ کردن نشانه، Window نیز همراه با اون جابجا میشه. همونطور که دیدید در ویژگی content میتونیم کدهای HTML هم وارد کنیم و درون Window نمایش بدیم. شما میتونین خودتون کد CSS هم قرار بدین و به این کدها استایل بدین. در نهایت با استفاده از کد زیر Window را به Marker متصل کردیم:

همونطور که دیدید با استفاده از open، باکس infoWindow ساخته شده رو به نشانه موجود بر روی نقشه نسبت دادیم. چون که این کار رو انجام دادیم و اون نشانه خودش مختصات داره، دیگه لازم نیس که برای Window خودمون از ویژگی position استفاده کنیم.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.