تخفیف ویژه
سبد خرید

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 2) - راه اندازی اولین نقشه

  آموزش
‏  4 دقیقه
۱۰ تیر ۱۳۹۵

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

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

مرحله 1 : ساخت صفحه HTML

در ابتدا یک فایل با نام مثلا index.html بسازید و کدهای ساده زیر رو درون اون قرار بدین:

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

مرحله 2 : API جاوااسکریپتی مربوط به گوگل رو وارد کنید

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

همونطور که میبینید با استفاده از تگ Script این کار رو انجام دادیم و آدرس مربوطه رو وارد کردیم.

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

برای اینکه نقشه رو درون سایتمون قرار بدیم، در ابتدا باید جای اون رو مشخص کنیم و بگیم که کجا میخاد نمایش داده بشه. برای اینکار در ابتدا باید یک container بسازید. معلوما این Container همون تگ div هست که نقشه درونش قرار میگیره.

<div id = "sample" style = "width:900px; height:580px;"></div>

میبینید که id اون رو برابر با sample قرار دادیم و با استفاده از ویژگی style برای اون طول و ارتفاع رو مشخص کردیم.

مرحله 4 : تنظیمات نقشه

قبل از قرار دادن نقشه، باید یک شئ بنام mapOptions بسازیم و تنظیمات نقشه مورد نظرمون رو درون اون قرار بدیم. یک نقشه سه مورد کلی و عمده برای تنظیم کردن داره که عبارتند از:

  • centre : برای مقدار این ویژگی، باید مختصات اون مکانی که قصد دارید در وسط نقشه نمایش داده بشه رو مشخص کنید. برای وارد کردن مختصات مورد نظرمون باید یک شئ از نوع LatLng بسازیم و عرض و طول جغرافیایی رو برای اون مشخص کنیم.
  • Zoom : برای این ویژگی باید میزان بزرگنمایی نقشه رو قرار بدین
  • maptypeid : برای این ویژگی باید نوع اون نقشه ای که قصد داریم در سایتمون قرار بگیره رو مشخص کنیم. مقدار پیش فرض برای این ویژگی، ROADMAP هست که نمایی از جاده‌ها و خیابان‌ها در ناحیه انتخابی شما رو نمایش میده.

در جلسه بعد بیشتر در مورد هر کدوم توضیح میدیم و برای هر کدوم مثالی میاریم.

حالا وقتشه که این موارد رو مقدار دهی کنیم. در ابتدا یک تابع بنام loadMap میسازیم و شئ بیان شده رو در اون قرار میدیم:

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.609993, 83.221436), 
      zoom:12, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

میبینید که سه ویژگی مورد نظر رو مقدار دهی کردیم.

مرحله 5 : ساخت شئ اصلی نقشه

برای ساخت نقشه شما باید ابتدا از شئ google.maps.Map یک نمونه با استفاده از عملگر new بسازید. برای اینکار باید دو ورودی رو به اون وارد کنید. ورودی اول همون Container هست که قرار هست نقشه درون اون قرار بگیره. ورودی دوم هم همون شئ mapOptions هست که تنظیمات نقشه رو مشخص میکنه.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

مرحله 6 : لود کردن نقشه

در پایان شما باید نقشه مورد نظرتون رو لود کنید. برای اینکار ما مشخص میکنیم که زمانی که سایتمون بصورت کامل لود شد، تابع loadMap که ساختیم اجرا بشه. برای اینکار از Event‌ها استفاده میکنیم:

google.maps.event.addDomListener(window, 'load', loadMap);

میبینید که بعنوان ورودی سوم، نام همون تابعی که قصد اجرا شدنش رو داریم وارد کردیم.

کل کدها در نهایت بصورت زیر خواهد شد:

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر هست:google map load

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

hassani

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

محمد اسفندیاری

ممنون از نظرتون
امیدوارم در ادامه هم چیزای دیگه ای یاد بگیرید
موفق باشید

mb -

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

محمد اسفندیاری

لطف داری داداش
موفق باشید

hamed_z2001

خیلی ممنون,عالی بود …
فقط یک سوال,تو این اموزشها درباره api های گوگل و مپ و دستکاری نقشه و ساخت سفارشی نقشه مثلا عوض کردن ایکونهای لوکیتر و …هم توضیح میدید؟؟

محمد اسفندیاری

بله دوست عزیز بصورت کامل توضیح داده میشه
صبور باشید

hamed_z2001

خیلی خیلی ممنون … این مطلب به شدت مورد نیاز طراحان وبه و کمبود این آموزش در بین وب فارسی به شدت احساس میشد…
بیصبرانه منتظر ادامه آموزشها هستم

موفق و پیروز باشید

محمد اسفندیاری

خواهش میکنم
موفق باشید

Nima Arian

عالی فقط دوتا سوال :
اول اینکه چه طور نقشه منطقه مورد نظر خودمون رو باید اینجا قرار بدیم؟
و اینکه خروجی هاتون رو چه طوری به این شکل قرار میدین؟
ممنون

محمد اسفندیاری

سوال اول: در جلسات بعدی در این مورد صحبت میکنیم، فقط فعلا در این حد بدونید که باید طول و عرض جغرافیایی رو با استفاده از LatLng تغییر بدین
سوال دوم: با استفاده از یک نرم افزار که تصویر GIF درست میکنه….از اینجا میتونین دانلودش کنید
https://screentogif.codeplex.com/
موفق باشید