با استفاده از HTML یک نقشه گوگل با نشانگرها اضافه کنید

مقدمه

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

شروع کنید

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

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

شما به یک مرورگر وب نیاز دارید. بر اساس پلتفرم خود، از لیست مرورگرهای پشتیبانی شده ، یک مرورگر شناخته شده مانند گوگل کروم (توصیه می‌شود)، فایرفاکس، سافاری یا اج را انتخاب کنید.

مرحله ۱: دریافت کلید API

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

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

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

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

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></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
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

مرحله ۳: اضافه کردن نقشه

برای افزودن نقشه گوگل به صفحه، عنصر 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>
index.html

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

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

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

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

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

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

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

کد نمونه کامل

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

<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
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></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