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

บทนำ

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

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

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

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&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>

    <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