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

บทนำ

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

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

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

เนื่องจากหน้า HTML ควรเป็นแบบสแตนด์อโลน ให้เพิ่มโค้ด CSS ลงในหน้าโดยตรง

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

ขั้นตอนที่ 3: เพิ่มแผนที่

หากต้องการเพิ่มแผนที่ Google ลงในหน้า ให้คัดลอกองค์ประกอบ HTML gmp-map แล้ววางลงใน body ของหน้า HTML

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

การดำเนินการนี้จะสร้างแผนที่ที่อยู่ตรงกลางของ Ottumwa รัฐไอโอวา แต่ยังไม่มีตัวทำเครื่องหมาย

ขั้นตอนที่ 4: เพิ่มตัวทำเครื่องหมาย

หากต้องการเพิ่มตัวทำเครื่องหมายลงในแผนที่ ให้ใช้องค์ประกอบ HTML gmp-advanced-marker คัดลอกข้อมูลโค้ดต่อไปนี้ แล้ววางทับ gmp-map ทั้งหมดที่คุณเพิ่มในขั้นตอนก่อนหน้า

<gmp-map
    center="41.027748173921374, -92.41852445367961"
    zoom="13"
    map-id="DEMO_MAP_ID">
    <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"></gmp-advanced-marker>
</gmp-map>

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

ลองใช้ตัวอย่างที่เสร็จสมบูรณ์ใน JSFiddle

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

  • คุณสามารถปรับแต่งแผนที่ด้วยการจัดรูปแบบที่กำหนดเอง styling
  • ใช้คอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ ในเว็บเบราว์เซอร์เพื่อทดสอบและเรียกใช้โค้ด อ่านรายงานข้อผิดพลาด และแก้ปัญหาเกี่ยวกับโค้ด
  • ใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเปิดคอนโซลใน 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>
        <style>
            gmp-map {
                height: 100%;
            }
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
        <script type="module" src="./index.js"></script>
        <script
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            defer></script>
    </head>
    <body>
        <gmp-map
            center="41.027748173921374, -92.41852445367961"
            zoom="13"
            map-id="DEMO_MAP_ID">
            <gmp-advanced-marker
                position="41.027748173921374, -92.41852445367961"
                title="Ottumwa, IA"></gmp-advanced-marker>
        </gmp-map>
    </body>
</html>