آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 1) - مقدمه

‏  3 دقیقه
۰۹ تیر ۱۳۹۵

google-maps

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

این دوره خیلی پیش نیاز نداره ولی اگر با Javascript آشنایی داشته باشید و قبلا با Google maps کار کرده باشید، خیلی بهتر مطالب رو درک خواهید کرد. برای نمونه و دیدن یک مثال از Google Maps یک سری کد رو قرار میدیم و خروجی اون رو به شما نشون میدیم، تا با اون بیشتر آشنا بشید.

<!DOCTYPE html>
<html>

<head>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
    function loadMap() {

        var mapOptions = {
            center: new google.maps.LatLng(20.593684, 78.96288),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("sample"), mapOptions);
    }
    </script>
</head>

<body onload="loadMap()">
    <div id="sample" style="width:570px; height:580px;"></div>
</body>

</html>

خروجی کد بالا بصورت زیر خواهد بود:google map intro

نقشه گوگل قابلیتهایی زیادی داره که به چنتا از اونا اشاره میکنیم:

  • جستجو مکانی خاص و یا مشخص کردن مسیر نقطه ای به نقطه دیگر
  • میتونین خیابان‌ها و محل‌های مختلف رو ببینید و از عکسهایی که از سراسر نقاط جهان در اون وجود داره استفاده کنید
  • دریافت اطلاعاتی خاص همچون اطلاعات ترافیکی در یک نقطه خاص (اطلاع ندارم که این مورد در ایران هم پشتیبانی میشه یا خیر)

همونطور که در ابتدا هم گفته شد، گوگل یک API در اختیارمون قرار میده که با استفاده از اون میتونیم تغییرات مدنظرمون رو بر روی نقشه اعمال کنیم و زمانی که به نقشه مورد نظرمون رسیدیم اون رو در وبسایت خودمون قرار میدیم.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

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

موفق باشید

یا علی

Source

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

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

رضا محمدی

سلام
یه سوال در مورد google map
آیا میشه فاصله دو نقطه را پس از بدست آوردن روی نقشه در یک TextBox نمایش داد؟

محمد اسفندیاری

سلام
دو لینک زیر رو مطالعه فرمائید:
لینک 1
لینک 2

ndr053

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

محمد اسفندیاری

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

Nima Arian

فعلا لایک تا ببینم تو قسمت دوم چکار میکنی امیدوارم مثل مطالب قبلیت اونا هم لایک 😉

محمد اسفندیاری

ممنون
امیدوارم که بدردتون بخوره
موفق باشید