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

آیا می خواهید مکان مورد نظرتان را روی گوگل مپ ثبت کنید؟

اگر می خواهید یاد بگیرید چطور مغازه، فروشگاه، کسب و کار یا محل مورد نظر خود را در گوگل مپ ثبت کنید، روی تصویر زیر کلیک کنید.

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

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

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

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

نقشه ها زبان گویایی هستند که پاسخ بسیاری از پرسش های ما را در یک نگاه، پاسخ می دهند. از قدیم که نقشه های چاپی بر روی دیوار چسبانده می شدند، لازم می شد تا قسمتی از آن را علامت گذاری کنند. لذا معمولا با ابزارهایی مثل یک برچسب، پونز یا 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 و پر کردن یک فرم توسط کاربر روی مکان علامتگذاری شده و ذخیره در پایگاه داده را توضیح دهید. با تشکر

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

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