شروع به کار

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

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

محیط خود را تنظیم کنید

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

  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 شامل فراخوانی برای بارگذاری API جاوا اسکریپت Maps است. حتماً 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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

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

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

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

تبریک! شما به تازگی یک برنامه با استفاده از نقشه‌های سه‌بعدی گوگل در API جاوا اسکریپت Maps نوشته‌اید.

مراحل بعدی

  • با استفاده از نمونه‌های موجود گوگل، تجربیات نقشه سه‌بعدی پیچیده‌تری بسازید.
  • با مطالعه‌ی مستندات مرجع، پتانسیل کامل نقشه‌های سه‌بعدی را در Maps JavaScript API کشف کنید.