شروع به کار

در این آموزش، خودتان را در ایجاد اولین برنامه جاوااسکریپت بااستفاده از «نقشه‌های سه‌بعدی» در «جاوااسکریپت Maps» راهنمایی خواهید کرد: پنجره‌ای ساده که نمایی از بالا از «پل گلدن گیت» با «مارین هدلندز» در پس‌زمینه نمایش می‌دهد.

پس‌از تکمیل آموزش گام‌به‌گام، باید نقشه زیر را در محیط توسعه خود ببینید:

راه‌اندازی محیط

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

1. ویرایشگر نوشتار دلخواهتان را باز کنید.
2. فایل جدیدی ایجاد کنید و آن را با افزونه .html (مثلاً hello-p3djs.html) ذخیره کنید.

یک صفحه HTML بنویس

برای شروع، صفحه وبی با ساختار HTML پایه ایجاد خواهید کرد:

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

افزودن جاوا اسکریپت

سپس، عنصر HTML سفارشی را برای بار کردن نقشه اضافه می‌کنید. کد حاوی دو عنصر است:

• gmp-map-3d حاوی پارامترهای استفاده‌شده برای مقداردهی اولیه موقعیت و نمای شروع دوربین است.
• ‫script حاوی فراخوانی برای بار کردن Maps JavaScript API است. حتماً YOUR_KEY را با کلید میانای برنامه‌سازی کاربردی خود جایگزین کنید.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>
index.html

اجرا کردن برنامه

برای اجرای برنامه و دیدن خروجی، این مراحل را دنبال کنید:

1. فایل HTML را که ایجاد کرده‌اید ذخیره کنید.
2. فایل را در مرورگر وب باز کنید (می‌توانید روی فایل دوکلیک کنید، آن را به پنجره مرورگر بکشید، یا کلیک راست کنید و از «باز کردن با» استفاده کنید).
3. باید نقشه را در پنجره مرورگرتان ببینید.

تبریک! شما به‌تازگی برنامه‌ای بااستفاده از «نقشه‌های سه‌بعدی» Google در Maps JavaScript API نوشته‌اید.

مراحل بعدی

• بااستفاده از نمونه‌های موجود Google، تجربه‌های پیچیده‌تر نقشه سه‌بعدی بسازید.
• با خواندن اسناد مرجع، با تمام قابلیت‌های «نقشه‌های سه‌بعدی» در Maps JavaScript API آشنا شوید.