คอมโพเนนต์ของเว็บใน Maps JavaScript API (ดูตัวอย่าง)

คอมโพเนนต์เว็บเป็นมาตรฐาน W3C ยอดนิยมที่รวม HTML, CSS และ JS ไว้ในองค์ประกอบ HTML ที่กำหนดเองและนำมาใช้ใหม่ได้ คอมโพเนนต์ที่นำมาใช้ใหม่ได้อาจมีตั้งแต่ฟังก์ชันการทำงานขนาดเล็ก เช่น การแสดงการให้ดาวของสถานที่ ไปจนถึงตรรกะทางธุรกิจที่ซับซ้อนยิ่งขึ้น คู่มือนี้จะอธิบายคอมโพเนนต์เว็บที่มีให้บริการใน Maps JavaScript API

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวมาตรฐาน โปรดดูคอมโพเนนต์ของเว็บ

ผู้ชม

เอกสารประกอบนี้ออกแบบมาเพื่อช่วยให้คุณเริ่มสำรวจและพัฒนาแอปพลิเคชันด้วยคอมโพเนนต์เว็บได้อย่างรวดเร็ว คุณควรคุ้นเคยกับแนวคิดการเขียนโปรแกรม HTML และ CSS

แสดงแผนที่

วิธีที่ง่ายที่สุดในการเริ่มเรียนรู้เกี่ยวกับคอมโพเนนต์ของเว็บ คือ การดูตัวอย่าง ตัวอย่างต่อไปนี้จะแสดงแผนที่ของพื้นที่ซานโฮเซ

แผนที่บริเวณเมืองซานโฮเซ

HTML

<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID"></gmp-map>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

ในตัวอย่างนี้ มี 2-3 อย่างที่ควรทราบ ได้แก่

  1. Maps JavaScript API เรียกว่าแบบไม่พร้อมกัน ใช้ฟังก์ชันเรียกกลับเพื่อให้ทราบเมื่อ API โหลดขึ้น
  2. การนำเสนอแผนที่จะกำหนดด้วยองค์ประกอบที่กำหนดเอง <gmp-map>
  3. คุณสมบัติของแผนที่กำหนดโดยการระบุแอตทริบิวต์ในองค์ประกอบที่กำหนดเอง <gmp-map>
  4. การจัดรูปแบบสามารถนำไปใช้กับองค์ประกอบที่กำหนดเองหรือประกาศในไฟล์ CSS ที่แยกต่างหากได้

จัดรูปแบบแผนที่ฐาน

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

เพิ่มเครื่องหมายลงในแผนที่

เช่นเดียวกับที่ 1 สามารถซ้อนแท็ก HTML ในตัวเพื่อสร้างลำดับชั้นของเนื้อหาที่ซับซ้อน โฟลเดอร์หนึ่งสามารถซ้อน <gmp-advanced-marker> ไว้ภายในองค์ประกอบเพื่อแสดงเครื่องหมายแผนที่อย่างน้อย 1 รายการ

แผนที่พร้อมเครื่องหมาย

HTML

<html>
  <head>
    <title>Simple Map with Markers</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
    </script>

    <script>
      function initMap() {
        console.log('Maps JavaScript API loaded.');
      }
    </script>

  </head>
  <body>
    <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
      <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>
  </body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

ตรงนี้เราได้เพิ่มองค์ประกอบ <gmp-advanced-marker> 2 รายการ ภายในองค์ประกอบที่กำหนดเอง <gmp-map> ข้อความสำหรับ title จะมีข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่านและป้ายกำกับการช่วยเหลือพิเศษเพิ่มเติมสำหรับองค์ประกอบที่ระบุ

เหตุการณ์ JavaScript

ประโยชน์หลักของ Web Components คือการใช้งานที่ง่าย เราสามารถแสดงแผนที่ซึ่งมีความรู้จำกัดเกี่ยวกับ JavaScript หรือการเขียนโปรแกรมขั้นสูงได้โดยใช้โค้ดเพียงไม่กี่บรรทัด เมื่อนำไปใช้แล้ว โค้ดจะเป็นไปตามรูปแบบที่คุ้นเคยขององค์ประกอบ HTML อื่นๆ ตัวอย่างเช่น ระบบเหตุการณ์หนึ่งสามารถใช้ระบบเหตุการณ์ของเบราว์เซอร์เนทีฟเพื่อโต้ตอบกับการทำงานบนแผนที่หรือเครื่องหมายขั้นสูง เช่น การคลิกเครื่องหมาย เป็นต้น

เหตุการณ์การคลิกเครื่องหมาย

HTML

<html>
<head>
  <title>Google Maps - Marker Click Example</title>
  <link rel="stylesheet" href="style.css" type="text/css">

  <script async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap&libraries=maps,marker&v=beta">
  </script>

  <script>
    function initMap() {
      console.log('Maps JavaScript API loaded.');

      const advancedMarkers = document.querySelectorAll("#marker-click-event-example gmp-advanced-marker");
      for (const advancedMarker of advancedMarkers) {
        customElements.whenDefined(advancedMarker.localName).then(async () => {
          advancedMarker.addEventListener('gmp-click', async () => {
            const {InfoWindow} = await google.maps.importLibrary("maps");
            const infoWindow = new InfoWindow({
              content: advancedMarker.title
            });
            infoWindow.open({
              anchor: advancedMarker
            });
          });
        });
      }
    }
  </script>
</head>
<body>

<gmp-map id="marker-click-event-example" center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID">
  <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>

</body>
</html>

CSS

    gmp-map {
      height: 500px;
    }

ในตัวอย่างนี้ initMap จะแสดงฟังก์ชันเรียกกลับที่จำเป็นเมื่อ Maps JavaScript API โหลดสมบูรณ์ โค้ดจะสร้าง Listener ให้กับตัวทำเครื่องหมายแต่ละรายการ และแสดงหน้าต่างข้อมูลเมื่อมีการคลิกที่เครื่องหมายแต่ละรายการ

ขั้นตอนถัดไป