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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن پایانی

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

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

آموزش آتی

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

مهشاد انصاری کارشناسی ارشد کامپیوتر گرایش نرم افزار است و در زمینه توسعه ی وب سایت و برنامه نویسی #C فعالیت دارد

برو بریم

اگر می‌خواهید از آخرین و محبوب‌ترین مقالات ما در ایمیل خود مطلع شوید، همین الان ایمیل خود را در کادر زیر وارد کنید

تعداد علاقه‌مندانی که تاکنون عضو خبرنامه ما شده‌اند

۱۵۸۰

مقاله های مرتبط :

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

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

۸ دیدگاه برای این مطلب ثبت شده است

  1. اصغر مختاری
    ۱۰:۰۶ ۱۳۹۶/۱۰/۰۳

    سلام
    کاش بجای علامت گذاری روی نقشه گوگل ، طریقه علامت گذاری روی نقشه های بومی مثل پارسی جو را می گذاشتید؟
    باتشکر

    • مهشاد انصاری
      ۲:۴۴ ۱۳۹۶/۱۰/۰۵

      درود
      در نوشته های آتی انواع سرویس های نقشه ای و علامت گذاری بر روی آنها آموزش داده خواهد شد.با ما همراه باشید….

  2. مهدی کیخایی
    ۱۱:۰۶ ۱۳۹۶/۱۰/۰۴

    با سلام
    و تشکر از مطالب آموزشی بسیار خوب شما

    • مهشاد انصاری
      ۱۲:۲۴ ۱۳۹۶/۱۰/۲۶

      خوشحالیم که آموزش های ما برای شما موثر واقع شده است.

  3. ابراهیم زارع
    ۱۱:۱۷ ۱۳۹۶/۱۰/۱۱

    ممنون از توضیحات خوب و کاربردیتون
    اگه در مورد نقشه های بومی هم بیشتر مطلب بزارید خوبه

    • مهشاد انصاری
      ۱۲:۳۱ ۱۳۹۶/۱۰/۲۶

      درود
      در نوشته های آتی انواع سرویس های نقشه ای و علامت گذاری بر روی آنها آموزش داده خواهد شد.با ما همراه باشید….

  4. مهدی
    ۱۲:۵۵ ۱۳۹۷/۰۴/۲۹

    ممنون
    علامتگذاری روی نقشه های osm و پر کردن یک فرم توسط کاربر روی مکان علامتگذاری شده و ذخیره در پایگاه داده را توضیح دهید. با تشکر

    • زهرا ابراهیمی
      ۵:۴۲ ۱۳۹۷/۰۴/۳۰

      درود بر شما. چنین آموزشی را در دستور کار قرار خواهیم داد و به زودی در سایت منتشر خواهیم کرد.