آکادمی آموزش آی تی :: بدون صرف وقت و هزینه ، رایگان و به صورت آنلاین یاد بگیرید !

آموزش کار با گوگل مپ ( مقدمه و سرآغاز کار )

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

 

گوگل مپ و API چیست :

گوگل مپ : (Google Maps) یا سرویس نقشه ی آنلاین گوگل یکی از دهها خدمات رایگان گوگل در وب است .

API : به معنی رابط برنامه نویسی کاربردی در واقع ابزار هایی است که به برنامه نویسان کمک می کنند تا از کدهای در دسترس یک سرویس دیگر به راحتی استفاده کنند. به عبارتی برنامه نویس برای استفاده از یک سرویس احتیاجی به بازنویسی کل آن سرویس ندارد و از کدهای در دسترس قرار داده شده آن سرویس استفاده می کند .

 

مرحله ۱ : ایجاد یک سند HTML

ابتدا یک سند HTML ایجاد کنید .

 

مرحله ۲ : اضافه کردن API گوگل مپ

با استفاده از کد اسکریپت زیر در قسمت head شما میتوانید API گوگل مپ را به راحتی اضافه کنید .

 

مرحله ۳ : اضافه کردن تگ div

در مکانی که دوست دارید نقشه به نمایش گذاشته شود یک تک div با خصوصیات زیر بسازید .

 

مرحله ۴ : اضافه کردن نقشه

ابتدا باید سه خصوصیت اصلی برای یک نقشه را تعیین کنیم :

۱ . مکان نقشه

۲ . مقدار زوم در نقشه

۳ . نحوه نمایش نقشه

حال یک تگ <script></script> در قسمت head بسازید . و تابع زیر را در بین این دو تگ قرار بدهید :

حال یک شی برای نقشه ساخته و در بین این تابع قرار دهید :

 

مرحله ۵ : نمایش نقشه

در نهایت ، کد زیر را در آخر تگ <script> قرار دهید تا نقشه لود شود .

 

مثال کلی

 

خروجی کد بالا :

 


دیدگاه خود را بیان کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منوی سایت