جزئیات شیء نقشه گوگل
در آموزش قبلی ” استفاده از نقشه گوگل در سایت بخش چهارم ” با عوامل رابط های کاربری در نقشه گوگل آشنا شدید.
در این آموزش قصد داریم به جزئیات شیء نقشه گوگل بپردازیم. با طراحی قالب وردپرس آنفایو همراه باشید.
آموزش نقشه گوگل
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
در کد بالا کلاس جاوا اسکریپت نشان میدهد که نقشه دارای کلاس “map” است. اشیاء این کلاس یک نقشه را روی صفحه تعریف میکنند.
نکته : اگر بخواهید میتوانید بیشتر از یکی از این کلاسها را تعریف کنید. هر کدام از این اشیاء را میتوانید به عنوان یک نقشه جداگانه روی صفحه استفاده کنید.
همینطور که در کد های بالا مشاهده میکنید یک نمونه از این کلاس ها را با عملگر new جاوا اسکریپت ایجاد کردیم. هنگامی که شما یک نمونه از این نقشه را ایجاد میکنید شیء، یک تگ DIV را روی صفحه برای نمایش نقشه اختصاص میدهد.
تمام تگ های HTML فرزندان شیء document جاوا اسکریپت هستند و ما با استفاده از همین متن document.getElementbyID یک ارجاع برای تگ DIV مورد نظرمان ایجاد میکنیم.
این تکه کد یک متغیر به نام “map” ایجاد کرده و آن را به یک شیء MAP جدید انتصاب میدهد.همچنین در ادامه تنظیمات تعریف شده با شیء لفظی mapoptions را ارسال خواهد کرد.
این تنظیمات (mapoptions) برای مقدار دهی اولیه خصوصیات نقشه گوگل استفاده خواهد شد.
در بخش زیر تابع map() به عنوان یک سازنده تعریف شده است.
| ساختار | توضیحات |
|---|---|
Map(mapDiv:Node, opts?:MapOptions ) |
درج نقشه در یکی از تگ ها (معمولا تگ DIV ) |
بارگیری نقشه
در زمان بارگیری یک نقشه گوگل در صفحه وب مطمئنا ساخت تمامی عامل های رابط کاربری (DOM) به پایان رسیده است و همه تصاویر خارجی و اسکریپت ها کاملا دریافت شده و در شیء document گنجانده شده اند.
برای اینکه مطمئن شوید نقشه مورد نظرتان بعد از لود کامل صفحه در صفحه قرارداده شده است ما تابعی که ایجاد شده است (map) را با تابع onload تگ body اجرا میکنیم.
انجام این کار از موارد غیر قابل پیشبینی بطور محسوسی پیشگیری خواهد کرد و همچنین به ما کنترل بیشتری بر چگونگی و نحوه ترسیم نقشه خواهد داد.
api جاوا اسکریپت نقشه گوگل یکسری رویداد هایی که میتواند در تغییر موقعیت و کنترل نقشه گوگل استفاده شود را تهیه میکند. برای اطلاعات بیشتر Map Events را مشاهده نمایید.
<pre>google.maps.event.addDomListener(window, 'load', initialize);</pre>
همچنین شما میتوانید از خاصیت onload تگ body بدین شکل استفاده کنید.
<pre> <body onload="initialize()"></pre>
عیب یابی
اگر کد های شما کار نکرد:
۱- نحوه تایپ کردنتان را بررسی کنیدچون زبان جاوا اسکریپت به حروف کوچک و بزرگ حساس است.
۲- اصول اولیه را بررسی کنید، بیشتر مشکلات هنگام مقدار دهی اولیه تنظیمات روی میدهند. برای مثال چک کنید که حتما تنظیمات zoom , center را در تنظیمات نقشه تان تعیین کرده باشید.
۳- مطمئن شوید که DIV مورد نظر تان دارای ارتفاع است. بصورت پیشفرض DIV ها با ارتفاع صفر ایجاد میشوند و به همین دلیل نیز غیر قابل نمایش خواهند بود.
۴- از یک کامپایلر و عیب یاب جاوااسکریپت برای کمک به حل مشکلات ایجاد شده استفاده نمایید.
۵- سوالات پرسیده شده در stack overflow نیز میتواند منبع بسیار خوبی برای رفع مشکلات شما باشد.
در ادامه آموزش های تخصصی شرکت طراحی قالب وردپرس آنفایو به بررسی محدودیت های استفاده از نقشه گوگل خواهیم پرداخت.
با طراحی وب سایت آنفایو همراه باشید.
