با استفاده از 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>

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

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

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

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

این منجر به نقشه زیر می‌شود:

نقشه‌ای که شما ایجاد کرده‌اید، بر روی منطقه شهری سن خوزه متمرکز است.

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

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

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

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

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

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

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

کد نمونه کامل

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

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

    <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