استفاده از نقشه گوگل (Google maps) در صفحات وب

برنامه ساده Hello World برای نشان دادن نحوه استفاده از نقشه گوگل در یک صفحه وب، از طریق نسخه 3 از API جاوا اسکریپت نقشه های گوگل (Google Maps Javascript API v3).

در این مقاله، به شما نشان خواهیم داد چگونه نقشه ای را با نقطه مرکزی “تهران، ایران” نمایش داده و از یک “نشانگر (marker)” برای شناسایی مکان بر روی نقشه استفاده کنید.

مثال کامل …

توضیحات زیر را ببیینید.

 

1- نقشه گوگل را در کجای صفحه وب نشان دهیم؟

در این مثال نقشه گوگل در المانی با شناسه “map_container” نمایش داده می شود، که می تواند هر اسم دیگری داشته باشد.

 

2- بارگذاری API نقشه گوگل

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

 نکته: سنسور (به طور معمول، سنسور تلفن همراه) برای تعیین محل کاربر استفاده می شود.

3- طول و عرض جغرافیایی

هر مکان بر روی زمین را با طول و عرض جغرافیایی و یا به اصطلاح “مختصات جغرافیایی” می توان نشان داد.

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

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

 var latlng = new google.maps.LatLng(Latitude, Longitude)

 

ژئوکدینک فرآیند تبدیل آدرس به “طول و عرض جغرافیایی” به عنوان ژئوکدینک شناخته شده است.

 

 

4- پیکربندی تنظیمات گوگل نقشه

مقادیر تنظیمی به خودی خود گویا هستند.

 

نمایش نقشه های گوگل در المان  HTML با شناسه “map_container”:

 

یک نشانگر (marker) ایجاد کرده و موقعیت آن را صفحه نمایش و جعبه پیام از پیش تعریف شده که در زمان قرارگرفتن ماوس بر روی آن نمایش می یابد را تنظیم کنید.

 

5- بارگذاری نقشه های گوگل

مرحله آخر، فقط تابع را از طریق رویداد onload بدنه صفحه بارگذاری کنید.

 6- نتیجه: gm thumb1 استفاده از نقشه گوگل (Google maps) در صفحات وب

3 نظر

  1. محمود غریبی

    دوستان بخدا این کارها خیلی سادست ، مثلا من نمونه ای رو براتون ذکر میکنم ، شما تنها کافیه طول و عرض جغرافیای مورد نظرتون رو داشته باشین ، نمونه ای که من میزارم یک صفحه ی کامل هست ، ابتدا در Notepad ذخیره کنید و بعدش با فرمت html ذخیره کنید. نگاهی به سورس بنذازین متوجه خواهید شد که کجاها رو باید دست بزنید. :

    The Google Map

    $(function() {
    $(“#map”).gMap({ markers: [{ latitude: 36.639469,
    longitude: 52.905788,
    html: ” من اینجا هستم ! “,
    }],
    zoom: 15 });
    });

    پاسخ
  2. سعید تهرانی

    سلام اولا ممنون که زحمت کشیدید و این سایتو راه اندازی کردید.
    ولی این همه نوشته های روی هم که جز باعث سردرگمی خواننده میشود چه مفهومی دارد؟!
    اگر ممکن است یک مثال عملیاتی که بتوانیم هم آموزش ببینیم و هم کاربردی باشد بسیار مفید تر خواهد بود.
    خدا قوت شما را افزایش دهد

    پاسخ
    1. ادمین

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

      پاسخ

نظر بدهید

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