شروع به کار

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

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

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

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

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 را با کلید میانای API خودتان جایگزین کنید.

<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 3D Maps در Maps JavaScript API نوشته‌اید.

مراحل بعدی

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