فایل pdf آموزش علامت گذاری روی نقشه
فیلم آموزش علامت گذاری روی نقشه


علامت گذاری روی نقشه گوگل


نمایش مکان مورد نظر روی نقشه گوگل

در آموزش پیشین به شما چگونگی نمایش نقشه گوگل در وب سایت را به صورت عملی با استفاده از Google Map API آموزش دادیم. در این نوشته می خواهیم به شما چگونگی علامت گذاری بر روی نقشه گوگل را آموزش دهیم.

این نوشته از مجموعه آموزش های آکادمی WEB GIS است. برای مشاهده آموزش های پیشین و دانلود فیلم و PDF آن ها، می توانید به صفحه آکادمی WEB GIS مراجعه نمایید.

ورود به آکادمی Web GIS

آموزش علامت گذاری روی نقشه گوگل

نقشه ها زبان گویایی هستند که پاسخ بسیاری از پرسش های ما را در یک نگاه، پاسخ می دهند. از قدیم که نقشه های چاپی بر روی دیوار چسبانده می شدند، لازم می شد تا قسمتی از آن را علامت گذاری کنند. لذا معمولا با ابزارهایی مثل یک برچسب، پونز یا Pin، این کار را انجام می دادند. با گسترش فناوری و ورود نقشه های دیجیتال یا نقشه های پویا به این عرصه، علامت گذاری روی نقشه ها نیز مطرح بود. لذا از ابزارهایی به نام Marker برای علامت گذاری نقشه استفاده می شود.

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

  • گام اول: ایجاد پنجره اطلاعات

  • گام دوم: اضافه کردن علامت

  • گام سوم: بازکردن پنجره اطلاعات با کلیک بر روی علامت

همه ی کدهای این آموزش در فایل map.js اضافه خواهند شد.

پیشنهاد می کنیم  آموزش PostGIS: افزونه مکانی PostgreSQL

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

گام اول: ایجاد پنجره اطلاعات

ابتدا پنجره ای را که می خواهیم با کلیک بر روی مارکر نمایش داده شود را تعریف می کنیم و محتوای این پنجره را مشخص می کنیم. محتوا می تواند یک متن و یا کد html باشد.
پنجره اطلاعات را در متغیر infowindow تعریف می کنیم و برای تعریف آن از متد google.maps.infowindow استفاده می کنیم.

علامت گذاری روی نقشه

گام دوم: اضافه کردن علامت

برای ایجاد مارکری که می خواهیم بر روی نقشه نمایش دهیم از متد google.maps.marker استفاده می کنیم. موقعیت مارکر را با مشخصه position ، عنوان مارکر با مشخصه title و نقشه مربوطه را با مشخصه map معرفی می کنیم.

علامت گذاری روی نقشه

گام سوم: نمایش پنجره اطلاعات با کلیک بر علامت

برای نمایش پنجره اطلاعات با کلیک بر روی مارکر، کد زیر را در فایل map.js اضافه می کنیم.

علامت گذاری روی نقشه

در واقع تعریف می کنیم که با کلیک بر روی مارکر، تابعی فراخوانی شود که پنجره infowindow را نمایش می دهد.

تغییرات را ذخیره می کنیم و از پروژه خروجی می گیریم. همانطور که در تصویر زیر مشاهده می کنید در مرکز نقشه، یک مارکر اضافه شده است و با کلیک بر روی مارکر، پنجره اطلاعات به صورت یک Popup نمایان می شود.

علامت گذاری روی نقشه

فیلم آموزش علامت گذاری بر نقشه گوگل با Google Map API

این نوشته آموزشی دارای فیلم رایگان می باشد. به شما پیشنهاد می کنیم فیلم آموزش علامت گذاری بر نقشه گوگل با Google Map API را دانلود نمایید و به صورت گام به گام آموزش ها را دنبال کنید.

علامت گذاری روی نقشه
علامت گذاری بر نقشه گوگل با google map api

سخن پایانی

تا این جا به شما آموزش دادیم چگونه یک وب سایت ساده ایجاد کنید و در ۱۰ دقیقه یک نقشه در وب سایت قرار دهید و برای حرکت به سمت نقشه پویا، در ۱۰ دقیقه یک مارکر بر روی نقشه نمایش دهید که کاربر می تواند بر روی آن کلیک کرده و اطلاعات بیشتری را مشاهده نماید.

پیشنهاد می کنیم  برنامه نویسی اندروید: نصب و راه اندازی Android Studio

تمامی این کارها را با استفاده از Google Map API انجام دادیم. برای آن که بتوانید یک نقشه پویا حرفه ای ایجاد کنید، روش های مختلفی وجود دارد. شما می بایست از ابزارهای نمایش نقشه در وب استفاده کنید. ابزار ما در این دو آموزش، Google Map API بود. اگر بخواهید با نقشه ها به صورت حرفه ای کار کنید، آن گاه به سمت یک سیستم اطلاعات جغرافیایی یا GIS حرکت خواهید کرد. اگر با GIS آشنا نیستید، سایت GISPlus مرجع خوبی است تا شما را با دنیای GIS آشنا سازد. به شما پیشنهاد می کنیم نوشته سیستم اطلاعات مکانی چیست را بخوانید تا با GIS بیشتر آشنا شوید.

آموزش آتی

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

عضویت رایگان در آکادمی Web GIS

می­ توانید کانال تلگرام GISPlus و یا صفحه اینستاگرام GISPlus را پیگیری نمایید، تا از آخرین نوشته ها، آگاه باشید.

آموزش Web GIS

پیشنهاد ما برای خواندن

  • نمایش نقشه گوگل در وب سایت
  • سامانه اطلاعات مکانی چیست
  • Web GIS چیست؟
مهشاد انصاری
مهشاد انصاری کارشناسی ارشد کامپیوتر گرایش نرم افزار است و در زمینه توسعه ی
وب سایت و برنامه نویسی #C فعالیت دارد