نقشه ها

نقشه Iframe

نقشه های اولیه iframe را می توان از آن جاسازی کرد نقشه s.google.com. به طور پیش‌فرض، نقشه iframe 100% عرض ظرفی را که در داخل آن قرار داده شده است، می‌پوشاند.

توجه: سفارشی کردن ظاهر نقشه ها در جاسازی iframe در دسترس نیست.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d402586.84704648267!2d144.77295768221077!3d-37.972234234374575!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad646b5d2ba4df7%3A0x4045675218ccd90!2sMelbourne+VIC!5e0!3m2!1sen!2sau!4v1472532711928" ></iframe>

API های گوگل مپ

برای نقشه ای با گزینه های سبک بیشتر، نقشه Google Maps API را انتخاب کنید. این نقشه از شما می‌خواهد که کلید API توسعه‌دهنده خود را از Google داشته باشید، اما گزینه‌های جذاب‌تری را برای نقشه‌های جاسازی شده باز می‌کند.

تعدادی گزینه ویژگی داده برای سفارشی کردن رفتار نقشه وجود دارد:

• data-maps-api-key="ApIKeYtExt1234" - کلید Maps API شما، برای استفاده از نقشه Google JS API مورد نیاز است.
• data-address="123 Address Place, Townsville" - یک آدرس متنی ساده قابل قبول توسط Google Maps با حداکثر 10 آدرس که با نقطه ویرگول از هم جدا شده اند.
• data-zoom-controls="RIGHT_BOTTOM" - کنترل های زوم را می توان با استفاده از هر موقعیتی که در فهرست ذکر شده است قرار داد مستندات API های گوگل مپ.
• data-map-zoom="NUM" - سطح زوم را بین 1 تا 12 تنظیم می کند.
• data-map-style="JSON"- اعمال هر سبک از Snazzy Maps یا یا مال خودت را بساز.
• data-marker-title="Title Text" - زمانی که کاربر روی نشانگر نقشه قرار می‌گیرد، متن ظاهر می‌شود.

<div class="map-container" data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M" data-address="123 Rathdowne street, Carlton Victoria" data-marker-title="Stack"></div>

این یک مرور کلی است. برای اطلاعات بیشتر، اسناد کامل را کاوش کنید ↗.