علامت گذاری مکان روی Google Maps

علامت گذاری مکان روی Google Maps

Api جاوااسکریپت گوگل مپ به ما داده های جغرافیایی را بر اساس درخواست ارسال شده از سمت اسکریپت سمت کاربر (client-side) را می دهد.

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

در این مثال از علامت گذاری مکان بر روی Google Maps , من مکان ها را از دیتابیس country که شمال شماره نام کشور ها است می خوانم . و در یک حلقه مقادیر طول و عرض جغرافیایی را توسط سرویس GeoCoding گوگل مپ دریافت می کنم.

با استفاده از این موقعیت های جغرافیایی , علامت را برای مشخص کردن کشورها بر روی نقشه اضافه می کنیم.

علامت گذاری مکان روی Google Maps

خواندن نام کشور ها از دیتابیس

کد php زیر با استفاده از کلاس DBController به دیتابیس متصل و نام کشورها را خوانده و در یک آرایه ذخیره می کند.

این آرایه برای دریافت موقعیت جغرافیایی مکان های مورد نظر به منظور علامت گذاری مکان بر روی Google Maps استفاده می شود.

کد جاوااسکریپت برای افزودن علامت بر روی Google Map

کد javascript زیر برای دریافت موقعیت جغرافیایی مکان با استفاده نام کشور های خوانده شده از دیتابیس استفاده شده است.

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

سپس, این اطلاعات برای مشخص کردن مکان کشور با افزودن علامت بر روی نقشه استفاده کردیم.

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

خروجی : علامت گذاری مکان بر روی Google Maps

علامت گذاری مکان روی Google Maps

این علامت گذاری بر روی نقشه فقط مختص کشور نیست و در واقع با داشتن اطلاعات جغرافیایی هر مکان می تواند هر منطقه ای رو بر روی نقشه ای که در بخش تماس با مای خود , محل برگزاری سمینار , کلاس و همچنین شرکت و بخش های گردشگری نمایش بدید.

 

امیدوارم از آموزش علامت گذاری مکان روی Google Maps نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۷)

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

  1. گل روز ۳۰ خرداد ۱۳۹۹

    فرديس

    پاسخ
  2. عرفان زیده سرایی ۷ تیر ۱۳۹۷

    سلام؛ لطفاً فایل دیتابیس رو قرار بدید. چون بدون اون امکان تست نداره. تشکر.

    پاسخ
    1. حسن شفیعی ۸ تیر ۱۳۹۷

      سلام . جدول مورد نظر داده خاصی نداره کافیه نام کشور ها رو داخل یک جدول به نام tbl_country تحت ستون country ذخیره کنید همین.

      فایل دیتابیس اضافه شد.

      موفق باشید.

      پاسخ
      1. عرفان زیده سرایی ۱۷ تیر ۱۳۹۷

        سلام مجدد. از فایل دیتابیس استفاده کردم اما مشکلی که الان به وجود اومده اینه که خطای Oops! Something went wrong.
        This page didn’t load Google Maps correctly. See the JavaScript console for technical details. میده اسکریپت. ظاهرا مشکل از API Code هست. رفتم کد جدید بگیرم پولی شده ظاهرا شماره حساب و شماره کارت میخواد. مشکل رو چطور میشه حل کرد عزیز.

        پاسخ
      2. حسن شفیعی ۱۷ تیر ۱۳۹۷

        سلام . کاره خاصی نمیشه کرد باید API رو تهیه کنید.
        موفق باشید.

        پاسخ
      3. عرفان زیده سرایی ۱۷ تیر ۱۳۹۷

        خب این مشکل هم حل شد.مشکلی دیگه ای که دارم اینه که بجای اسم کشور یا شهر میخوام طول و عرض جغرافیایی رو بدم تا مسیر رو نشون میده.چیکار باید بکنم مهندس؟

        پاسخ
      4. حسن شفیعی ۱۷ تیر ۱۳۹۷

        خیلی هم عالی این مثال رو چک کنید دقیقا موردی که میخوایین رو خود داکیومنت api گوگل مپ نمایش داده که میتونید استفاده کنید.

        https://developers.google.com/maps/documentation/javascript/markers

        موفق باشید.

        پاسخ
دوره های آموزشی