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

บทนำ

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

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

ขั้นตอนที่เราจะพูดถึงในการสร้าง Google Maps ที่มีเครื่องหมายโดยใช้ 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
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></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
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></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: เพิ่มเครื่องหมาย

หากต้องการเพิ่มเครื่องหมายลงในแผนที่ ให้ใช้องค์ประกอบ 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

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

  • คุณปรับแต่งแผนที่ได้ด้วยรูปแบบที่กำหนดเอง
  • ใช้คอนโซลเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเว็บเบราว์เซอร์เพื่อทดสอบและเรียกใช้โค้ด อ่านรายงานข้อผิดพลาด และแก้ปัญหาเกี่ยวกับโค้ด
  • ใช้แป้นพิมพ์ลัดต่อไปนี้เพื่อเปิดคอนโซลใน Chrome
    Command+Option+J (ใน Mac) หรือ Control+Shift+J (ใน Windows)

  • ทำตามขั้นตอนด้านล่างเพื่อดูพิกัดละติจูดและลองจิจูดของสถานที่ใน Google Maps

    1. เปิด Google Maps ในเบราว์เซอร์
    2. คลิกขวาที่ตำแหน่งที่แน่นอนบนแผนที่ซึ่งคุณต้องการทราบพิกัด
    3. เลือกที่นี่คือที่ไหนจากเมนูตามบริบทที่ปรากฏขึ้น แผนที่จะแสดงการ์ดที่ด้านล่างของหน้าจอ ค้นหาพิกัดละติจูดและลองจิจูดในแถวสุดท้ายของการ์ด

  • คุณสามารถแปลงที่อยู่เป็นพิกัดละติจูดและลองจิจูดได้โดยใช้บริการเข้ารหัสพิกัดภูมิศาสตร์ คู่มือนักพัฒนาซอฟต์แวร์มีข้อมูลโดยละเอียดเกี่ยวกับการเริ่มต้นใช้งานบริการ 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
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></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>