مفاهیم پایه برای طراحی نقشه گوگل (تلفن همراه)

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

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

طراحی برای دستگاه های تلفن همراه

نقشه Google Maps API v3 برای بارگذاری سریع بر روی دستگاه های تلفن همراه طراحی شده است.

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

اگر شما مایلید که برنامه هاتون بروی تلفن همراه کار کنند ، ما به شما پیشنهاد میکنیم که:

1 –  تگی را که شامل نقشه شما میشود با عرض و ارتفاع %100 تنظیم کنید. به یاد داشته باشید که برخی از مرورگرهای قدیمی هنوز این مقادیر را به خوبی نمایش نمی دهند.

2 –  شما می توانید دستگاههای اندروید و آیفون  رو با navigator.userAgen تعریف کنید. ویژگی های این دستور را میتوانید در سند زیر ببینید:

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

function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
 
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

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

3 – دستگاه های اندروید و ios  پیرو تگ <meta>  زیر هستند:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

با شرکت طراحی پوسته وردپرس آنفایو حرفه ای شوید

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

مرورگرها به این تگ <meta>  بالا نیاز دارند.

برای کسب اطلاعات بیشتر در مورد طراحی نقشه برای آی فون، به صفحه  Apple’s Developer documentation مراجعه کنید.

برای کسب اطلاعات بیشتر در مورد طراحی نقشه برای اندروید، به صفحه  Android documentation  مراجعه کنید.

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