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

บทนำ

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

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

ขั้นตอนที่เราจะกล่าวถึงในการสร้างแผนที่ 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 Maps ลงในหน้าเว็บ ให้คัดลอกองค์ประกอบ HTML gmp-map แล้ววางไว้ ภายใน body ของหน้า HTML

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

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

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

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

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

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

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

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