عوامل رابط های کاربری در نقشه گوگل

در آموزش قبلی ” استفاده از نقشه گوگل در سایت بخش سوم ” با نحوه استفاده از کتابخانه های نقشه گوگل آشنا شدید.

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

<div id="map-canvas" style="width: 100%; height: 100%"></div>

برای نمایش یک نقشه روی صفحه ما باید مکانی را روی صفحه وب مان در نظر بگیریم. معمولا این کار را با ایجاد یک تگ DIV انجام میدهیم تا موقعت مورد نظر برای رابط های کاربری نقشه گوگل و نمایش آن روی صفحه وب فراهم شود.

در مثال بالایک DIV با آی دی map-canvas تعیین و اندازه عرض و ارتفاع آن را با صفت STYLE مقدار دهی کردیم.

نکته قابل توجه این است که اندازه این تگ را ۱۰۰% در نظر گرفتیم ، دلیل این کار این است که DIV روی دستگاه های موبایل پهن و فیت صفحه شود. شما میتوانید با توجه به مرورگر و نوع کدنویسی تان این مقدار را تغییر داده و یا به آن مقدار padding اضافه نمایید.

نکته: نقشه همیشه اندازه تگ والد خود را دریافت میکند، پس دقت کنید که DIV والد شما حتما دارای عرض و ارتفاع مشخص باشد.

تنظیمات نقشه

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};

برای مقدار دهی اولیه نقشه ابتدا ما شیء map options را با متغیر هایی از تنظیمات نقشه گوگل ایجاد میکنیم.

دقت کنید که این شیء هنوز ایجاد نشده است ، به جای آن یک شیء لفظی  ایجاد شده است. در اینجا ۲ متغیر برای تمامی نقشه ها لازم است که تعریف و مقدار دهی شوند.

۱- center

۲- zoom

var mapOptions = {};

عرض و طول جغرافیایی

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

center: new google.maps.LatLng(-34.397, 150.644)

شیء لفظی latLng

هر بار که میخواهید یک نقطه ژئو گرافیکی (مختصات عرض و ارتفاع جغرافیایی نقشه) مشابه را تعیین کنید میتوانید به جای ایجاد google.maps.latLng جدید از شیء لفظی latLng استفاده کنید.

شیء لفظی latLng در ورژن های ۳.۱۶ به بعد نقشه گوگل پشتیبانی میشود. این یک راه ساده برای اضافه کردن یک نقطه است. این نقطه میتواند در بسیاری از قسمت های یک API نقشه گوگل استفاده شود.

هنگامی گه شما یک شیء را درج یا فراخوانی میکنید یک متد از یک شیء لفظی latLng را استفاده میکنید. API جاوا اسکریپت نقشه گوگل آن را در پشت صحنه با google.maps.latLng جدید جایگزین میکند.

مثال قبل در چند خط بالا را ببینید:

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

center: new google.maps.LatLng(-34.397, 150.644)
center: {lat: -34.397, lng: 150.644}
center: {lng: 150.644, lat: -34.397}

مراحل بزرگنمایی

رزولوشن اولیه در هر کدام از نقشه های گوگل توسط خاصیت zoom تعیین میشود. هنگامی که zoom برابر با ۰ باشد تمام کره زمین دیده خواهد شد و مقدار بزرگنمایی به حداقل خواهد رسید و مسلما مقدار بیشتر زوم باعث بزرگنمایی بیشتر نقشه خواهد شد. حداکثر ۱۸

zoom: 8

ارائه یک نقشه از کل زمین به عنوان یک تصویر واحد نیاز به به یک نقشه بسیار بزرگ دارد یک نقشه کوچک با زرولوشن پایین نیز همینطور است.
در نتیجه : تصاویر نقشه ها توسط گوگل و API های آن مانند کاشی جدا میشوند. تصویر نقشه در زوم پایین یکسری از تکه های نقشه های کوچک است که در ابعاد بسیار بزرگی از زمین کنار هم چیده شده اند، همچنین در زوم های بالا تکه های نقشه ها بصورت کاشی کاری در ابعاد کوچکتری از محدوده نمایش داده خواهند شد.
۳ تصویر زیر نمای قابل مشاهده از شرکت طراحی وب سایت آنفایو در بزرگنمایی ۰ و ۷ و ۱۸ میباشد.

آموزش نقشه گوگل

آموزش نقشه گوگل

آموزش نقشه گوگل

آموزش نقشه گوگل

آموزش نقشه گوگل

آموزش نقشه گوگل

برای اطلاعات بیشتر در مورد چگونگی کارکرد API گوگل روی لود کردن نقشه ها بصورت کاشی کاری با زوم فعلی نقشه  Tile Coordinates را در مستندات گوگل ببینید.

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

با طراحی وب سایت آنفایو همراه باشید.