เพิ่ม Google Maps ที่มีเครื่องหมายโดยใช้ HTML

เกริ่นนำ

บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google ด้วยเครื่องหมายลงในหน้าเว็บโดยใช้ HTML นี่คือแผนที่ที่คุณจะสร้างโดยใช้บทแนะนำนี้ วางเครื่องหมาย 2 เครื่องหมาย ที่เมืองเมาน์เทนวิว รัฐแคลิฟอร์เนีย และอีกแห่งในซีแอตเทิล รัฐวอชิงตัน

เริ่มต้นใช้งาน

ต่อไปนี้เป็นขั้นตอนที่เราจะกล่าวถึงสำหรับการสร้างแผนที่ Google ด้วยเครื่องหมายโดยใช้ HTML:

  1. รับคีย์ API
  2. สร้าง HTML, CSS และ JS
  3. เพิ่มแผนที่
  4. เพิ่มเครื่องหมาย

คุณต้องมีเว็บเบราว์เซอร์ เลือกเบราว์เซอร์ที่รู้จักกันดี เช่น Google Chrome (แนะนำ), Firefox, Safari หรือ Edge โดยอิงตามแพลตฟอร์มของคุณจากรายการเบราว์เซอร์ที่รองรับ

ขั้นตอนที่ 1: รับคีย์ API

ส่วนนี้จะอธิบายวิธีตรวจสอบสิทธิ์แอปกับ Maps JavaScript API โดยใช้คีย์ API ของคุณเอง

ทำตามขั้นตอนต่อไปนี้เพื่อรับคีย์ API

  1. ไปที่ คอนโซล Google Cloud

  2. สร้างหรือเลือกโปรเจ็กต์

  3. คลิกต่อไปเพื่อเปิดใช้ API และบริการที่เกี่ยวข้อง

  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 ที่มี Bootstrap Loader สำหรับ 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: เพิ่มแผนที่

หากต้องการเพิ่ม Google Maps ลงในหน้า ให้คัดลอกองค์ประกอบ HTML gmp-map แล้ววางลงใน 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

โค้ดก่อนหน้าจะเพิ่มตัวทำเครื่องหมาย 2 ตัวและเปลี่ยนพารามิเตอร์ zoom และ center บน gmp-map เพื่อแสดงเครื่องหมายเหล่านั้นได้ดียิ่งขึ้น คุณต้องมีรหัสแผนที่ จึงจะใช้เครื่องหมายขั้นสูงได้ (ใช้ DEMO_MAP_ID ได้)

เคล็ดลับและการแก้ปัญหา

  • คุณสามารถปรับแต่งแผนที่ด้วยการจัดรูปแบบที่กำหนดเอง
  • ใช้คอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเว็บเบราว์เซอร์เพื่อทดสอบและรันโค้ด อ่านรายงานข้อผิดพลาด และแก้ปัญหาเกี่ยวกับโค้ดของคุณ
  • ใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเปิดคอนโซลใน 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>
    <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