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

مقدمه

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

شروع کنید

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

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

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

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

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

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

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

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

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

  4. در صفحه اعتبارنامه، کلید میانای برنامه‌سازی کاربردی را دریافت کنید (و محدودیت‌های کلید میانای برنامه‌سازی کاربردی را تنظیم کنید). توجه: اگر کلید میانای 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 حاوی بارگذار خودراه‌انداز برای Maps JavaScript API را اضافه کنید، همان‌طور که در تکه کد زیر نشان داده شده است (کلید میانای برنامه‌سازی کاربردی خودتان را اضافه کنید):

<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 به صفحه، عنصر HTML gmp-map را کپی کنید و آن را در body صفحه HTML جای‌گذاری کنید:

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

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

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

برای افزودن نشانگر به نقشه، از عنصر HTML gmp-advanced-marker استفاده کنید. تکه‌کد زیر را کپی کنید و روی کل 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>

کد قبلی نشانگری به نقشه اضافه می‌کند. برای استفاده از «نشانگرهای پیشرفته» به شناسه نقشه نیاز است (استفاده از 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>