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

معرفی

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

شروع کنید

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

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

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

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

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

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

  1. به Google Cloud Console بروید.

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

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

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

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

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

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

مرحله 2: 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&loading=async&libraries=maps,marker&v=beta" defer>
</script>

هشدار اسپویلر: نمونه تمام شده را در JSFiddle امتحان کنید .

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

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

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

نتیجه این نقشه زیر است:

نقشه ای که شما ایجاد کردید در مرکز شهر سن خوزه قرار دارد.

مرحله 4: یک نشانگر اضافه کنید

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

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

کد قبلی دو نشانگر اضافه می کند و پارامترهای zoom و center را در gmp-map تغییر می دهد تا آن نشانگرها را بهتر نشان دهد. برای استفاده از نشانگرهای پیشرفته، شناسه نقشه لازم است (استفاده DEMO_MAP_ID خوب است).

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

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

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

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

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

کد نمونه کامل

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

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html