افزودن «نقشه Google» با «نشانگر» بااستفاده از HTML

مقدمه

این آموزش نشان می‌دهد چگونه بااستفاده از عناصر سفارشی HTML، نقشه Google را با یک نشانگر به صفحه وب اضافه کنید. در اینجا نقشه‌ای را که بااستفاده از این آموزش گام‌به‌گام می‌سازید می‌بینید. نشانگری در Ottumwa، آیووا قرار دارد.

شروع کنید

این‌ها مراحلی است که برای ایجاد نقشه Google با نشانگر بااستفاده از HTML پوشش خواهیم داد:

1. دریافت کلید API
2. ایجاد HTML،‏ CSS، و JS
3. افزودن نقشه
4. افزودن نشانگر

به مرورگر وب نیاز دارید. مرورگر شناخته‌شده‌ای مثل Google Chrome (توصیه‌شده)،‏ Firefox،‏ Safari، یا Edge را براساس پلاتفرمت خود از فهرست مرورگرهای پشتیبانی‌شده انتخاب کنید.

مرحله ۱: دریافت کلید میانای برنامه‌سازی کاربردی

این بخش نحوه اصالت‌سنجی برنامه شما را برای Maps JavaScript API بااستفاده از کلید API خودتان توضیح می‌دهد.

برای دریافت کلید API، این مراحل را دنبال کنید:

1. به کنسول Google Cloud بروید.

2. پروژه‌ای ایجاد یا انتخاب کنید.

3. برای فعال کردن API و هر سرویس مرتبط، روی ادامه کلیک کنید.

4. در صفحه اطلاعات اعتباری، کلید API را دریافت کنید (و محدودیت‌های کلید API را تنظیم کنید). توجه: اگر کلید API بدون محدودیت موجود دارید، یا کلیدی با محدودیت‌های مرورگر دارید، می‌توانید از آن کلید استفاده کنید.

5. برای جلوگیری از سرقت سهمیه و ایمن کردن کلید API خود، به استفاده از کلیدهای API مراجعه کنید.

6. صورت‌حساب را فعال کنید. برای اطلاعات بیشتر، استفاده و صورت‌حساب را ببینید.

7. اکنون آماده استفاده از کلید API خود هستید.

مرحله ۲: ایجاد HTML،‏ CSS، و JS

در اینجا کد یک صفحه وب HTML پایه آورده شده است:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

برای بار کردن نقشه، باید برچسب script حاوی بارکننده راه‌اندازی برای «میانای برنامه‌سازی کاربردی جاوا اسکریپت» «نقشه‌ها» را اضافه کنید، همان‌طور که در تکه زیر نشان داده شده است (کلید میانای برنامه‌سازی کاربردی خودتان را اضافه کنید):

<script
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></script>

ازآنجایی‌که صفحه HTML باید مستقل باشد، کد CSS را مستقیماً به صفحه اضافه کنید:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

مرحله ۳: افزودن نقشه

برای افزودن نقشه Google به صفحه، عنصر gmp-map HTML را کپی کنید و آن را در body صفحه HTML جای‌گذاری کنید:

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

با این کار، نقشه‌ای ایجاد می‌شود که Ottumwa، آیووا، در مرکز آن قرار دارد، اما هنوز هیچ نشانگری وجود ندارد.

مرحله ۴: افزودن نشانگر

برای افزودن نشانگر به نقشه، از عنصر gmp-advanced-marker HTML استفاده کنید. تکه‌کد زیر را کپی کنید و روی کل gmp-map که در مرحله قبلی اضافه کردید جای‌گذاری کنید.

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>
index.html

کد قبلی نشانگری به نقشه اضافه می‌کند. برای استفاده از «نشانگرهای پیشرفته»، شناسه نقشه لازم است (استفاده از DEMO_MAP_ID مشکلی ندارد).

مثال تکمیل‌شده را در JSFiddle امتحان کنید.

نکته‌ها و عیب‌یابی

• می‌توانید نقشه را با سبک‌دهی سفارشی سفارشی‌سازی کنید.
• از کنسول ابزارهای توسعه‌دهنده در مرورگر وب خود برای آزمایش و اجرای کد، خواندن گزارش‌های خطا، و حل مشکلات کد استفاده کنید.
• برای باز کردن کنسول در Chrome، از میان‌برهای صفحه‌کلید زیر استفاده کنید:
  Command+Option+J (در Mac) یا Control+Shift+J (در Windows).

• برای دریافت مختصات طول و عرض جغرافیایی مکان در Google Maps، مراحل زیر را دنبال کنید.

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

• بااستفاده از سرویس «زمین‌کدیابی» می‌توانید نشانی را به مختصات عرض و طول جغرافیایی تبدیل کنید. راهنمای توسعه‌دهنده اطلاعات دقیقی درباره شروع کار با سرویس «زمین‌کدیابی» ارائه می‌دهد.

کد نمونه کامل

در زیر نقشه نهایی و کد نمونه کامل که برای این آموزش استفاده شده است آورده شده است.

<html>
    <head>
        <title>Add a Map with Markers using HTML</title>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>
index.html