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

บทนำ

บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ Google พร้อมเครื่องหมายลงในหน้าเว็บ โดยใช้องค์ประกอบ HTML ที่กำหนดเอง นี่คือแผนที่ที่คุณจะสร้างโดยใช้บทแนะนำนี้ โดยมีเครื่องหมาย 2 อัน อันหนึ่งอยู่ที่ Mountain View, CA และอีกอันอยู่ที่ Seattle, WA

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

ขั้นตอนที่เราจะกล่าวถึงในการสร้างแผนที่ 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 Console

  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 สำหรับ Maps JavaScript API ดังที่แสดงในข้อมูลโค้ดต่อไปนี้ (เพิ่มคีย์ API ของคุณเอง)

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    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: เพิ่มเครื่องหมาย

หากต้องการเพิ่มเครื่องหมายลงในแผนที่ ให้ใช้องค์ประกอบ gmp-advanced-marker ของ HTML คัดลอกข้อมูลโค้ดต่อไปนี้ แล้ววางทับ 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. เลือกมีอะไรที่นี่จากเมนูตามบริบทที่ปรากฏขึ้น แผนที่จะแสดงการ์ดที่ด้านล่างของหน้าจอ ค้นหาพิกัดละติจูด และลองจิจูดในแถวสุดท้ายของการ์ด

  • คุณแปลงที่อยู่เป็นพิกัดละติจูดและลองจิจูดได้โดยใช้ บริการ 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