**تمدید شد** 30درصد تخفیف سورس فروشگاهی مشابه دیجی کالا + اپلیکیشن اندروید تا پایان تابستان (دوشنبه) - کد تخفیف : newdgk
با تخفیف میخرم

طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی سایت

افزودن گوگل مپ به سایت در ۵دقیقه

افزودن گوگل مپ به سایت در 5دقیقه

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

  1. به سایت گوگل مپ بروید .
  2. منطقه (Location) مورد نظر را وارد و جستجو کنید

افزودن گوگل مپ به سایت در 5 دقیقه

  1. Location دقیق را بر روی گوگل مپ علامت گذاری کنید

افزودن گوگل مپ به سایت در 5 دقیقه

  1. یک علامت بر روی مکانی که انتخاب کردید ظاهر می شود و همچنین یک متن پیغام زیر نقشه به نمایش در میاد.
  2. در این متن پیغام ، شما جزئیات آدرس ، طول و عرض جغرافیایی را می بینید .

افزودن گوگل مپ به سایت در 5 دقیقه

  1. طول و عرض جغرافیایی را برای افزودن گوگل مپ به سایت نیاز داریم

افزودن گوگل مپ به سایت در 5 دقیقه

 

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

جاواسکریپت :

در کد جاوا اسکریپت زیر ، شما کافیست طول و عرض جغرافیایی مکان مورد نظر را در متد LatLng() قرار بدید.

HTML :

به کد<div id=”map”></div>  برای نمایش نقشه نیاز دارید . تگ HTML دیگر برای نمایش لینک مستقیم مکان بر روی گوگل مپ استفاده شده است.

CSS :

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

حتما بخوانید  نمایش مسیر راه نقشه در جاواسکریپت

افزودن گوگل مپ به سایت در 5 دقیقه

دیدید با مقاله افزودن گوگل مپ به سایت در ۵ دقیقه به چه راحتی تونستیم نقشه مکان فعالیت ، شرکت ، دفترکار ، کارگاه و … را بسازیم و الان می توانید این نقشه را به صفحه وب یا مثلا صفحه تماس با ما ، درباره ما اضافه کنید. موفق و پیروز باشید

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

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

  1. shima ۱۶ دی ۱۳۹۸

    سلام ممنون از سایت خوبتون من در یک سایت باید تمام مکانهای مهم نزدیک ساختمان مسکونی را نشان بدم مثل رستورانها یا مراکز تفریحی با کلیک روی گزینه مورد نظر.جکار باید انجام بدم؟لطفا راهنمایی کنید

    ۰

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

      سلام. خوشحالیم که مفید واقع شده.
      بله میتونید و باید داکیومنت api گوگل مپ رو کامل مطالعه و از کدهای آماده و مثال آن استفاده کنید.
      https://developers.google.com/maps/documentation
      موفق باشید.

      ۰

      پاسخ
  2. امیر ۱۹ آبان ۱۳۹۷

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

    ۰

    پاسخ
  3. امیر ۱۹ آبان ۱۳۹۷

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

    ۰

    پاسخ
    1. حسن شفیعی ۱۹ آبان ۱۳۹۷

      سلام . ممنونم. بله به راحتی می توانید این قابلیت را پیاده سازی و محل انتخابی کاربر را ذخیره کنید.

      لطفا لینک زیر را مطالعه کنید چرا که کدهای جاوااسکریپت لازم برای این کار قرار داده شده
      https://stackoverflow.com/questions/31342426/google-maps-embed-in-html-form-and-save-user-selected-location-in-mysql-database

      موفق باشید.

      ۱+

      پاسخ
  4. alireza hamzeloo ۷ آبان ۱۳۹۷

    سلام پالان دیگه امکان استفاده از این سرویس ظاهرا نیست بدلیل تحریم های آمریکا . ایا راه حلی وجود دارد که در ایران بشه از این سرویس استفاده کرد . سرورها در ایران قراردارند؟

    ۰

    پاسخ
    1. حسن شفیعی ۷ آبان ۱۳۹۷

      سلام . اگر سرورهای سایت شما در ایران قرار دارند متاسفانه کاری نمیشه انجام داد فقط میتونید جستجو کنید اگر سایت واسطه ای api ای برای اتصال به گوگل مپ را داشته باشد به براحتی میتونید از آن api واسطه بهره ببرید.
      موفق باشید.

      ۱+

      پاسخ
  5. hosienmaleki ۱۰ آبان ۱۳۹۶

    لطفا در مورد هدفمنی این سرویس بیشتر
    توضیح دهید

    ۰

    پاسخ
    1. حسن شفیعی ۲۱ آبان ۱۳۹۶

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

      ۰

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