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

  • คุณสามารถแปลงที่อยู่เป็นพิกัดละติจูดและลองจิจูดโดยใช้ บริการเข้ารหัสพิกัดภูมิศาสตร์ คู่มือนักพัฒนาซอฟต์แวร์มีข้อมูลโดยละเอียดเกี่ยวกับ การเริ่มต้นใช้งานบริการ Geocoding

โค้ดตัวอย่างแบบเต็ม

ต่อไปนี้เป็นแผนที่สุดท้าย และตัวอย่างโค้ดทั้งหมดที่ใช้สำหรับ Google Analytics

<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