คอมโพเนนต์เว็บเป็นมาตรฐาน W3C ยอดนิยมที่รวม HTML, CSS และ JS ไว้ในองค์ประกอบ HTML ที่กำหนดเองและนำมาใช้ใหม่ได้ องค์ประกอบที่นำมาใช้ใหม่ได้อาจมีตั้งแต่ฟังก์ชันการทำงานส่วนต่างๆ เช่น การแสดงการให้ดาวสำหรับสถานที่ ไปจนถึงตรรกะทางธุรกิจที่ซับซ้อนยิ่งขึ้น คู่มือนี้อธิบายคอมโพเนนต์ของเว็บที่มีให้ใช้งานใน Maps JavaScript API
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวมาตรฐานได้ที่คอมโพเนนต์เว็บ
ผู้ชม
เอกสารนี้ออกแบบมาเพื่อช่วยให้คุณเริ่มสำรวจและพัฒนาแอปพลิเคชันด้วยคอมโพเนนต์ของเว็บได้อย่างรวดเร็ว คุณควรทำความคุ้นเคยกับแนวคิด การเขียนโปรแกรม HTML และ CSS
แสดงแผนที่
วิธีที่ง่ายที่สุดในการเริ่มเรียนรู้เกี่ยวกับคอมโพเนนต์ของเว็บคือการดูตัวอย่าง ตัวอย่างต่อไปนี้แสดงแผนที่ของพื้นที่ซานโฮเซ
TypeScript
// This example adds a map using web components. function initMap(): void { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map Web Component</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" ></gmp-map> <!-- The `defer` attribute causes the callback 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&callback=initMap&v=beta" defer ></script> </body> </html>
ลองใช้ตัวอย่าง
ในตัวอย่างนี้ มี 2-3 อย่างที่ควรทราบ
- Maps JavaScript API เรียกว่าอะซิงโครนัส ฟังก์ชันเรียกกลับจะใช้เพื่อให้ทราบเมื่อ API โหลดขึ้น
- การนำเสนอแผนที่กำหนดด้วยองค์ประกอบที่กำหนดเอง
<gmp-map>
- พร็อพเพอร์ตี้แผนที่กำหนดโดยการระบุแอตทริบิวต์ในองค์ประกอบที่กำหนดเอง
<gmp-map>
- คุณสามารถใช้การจัดรูปแบบในหน้ากับองค์ประกอบที่กำหนดเอง หรือประกาศในไฟล์ CSS แยกต่างหาก
จัดรูปแบบแผนที่ฐาน
รหัสแผนที่คือตัวระบุที่เชื่อมโยงกับรูปแบบหรือฟีเจอร์แผนที่หนึ่งๆ หากต้องการใช้ประโยชน์จากฟีเจอร์การกำหนดค่าระบบคลาวด์ที่ไม่บังคับ ให้แทนที่การจัดรูปแบบแผนที่ในระบบคลาวด์ DEMO_MAP_ID
ด้วยรหัสแผนที่ของคุณเอง
หากต้องการดูวิธีสร้างรหัสแผนที่และกำหนดค่ารูปแบบที่กำหนดเอง โปรดไปที่การจัดรูปแบบ Maps ในระบบคลาวด์
เพิ่มเครื่องหมายลงในแผนที่
ผู้ใช้รายหนึ่งสามารถซ้อนแท็ก HTML ในตัวเพื่อสร้างลำดับชั้นของเนื้อหาที่ซับซ้อน
ผู้เผยแพร่โฆษณาสามารถฝัง <gmp-advanced-marker>
ไว้ภายในองค์ประกอบเพื่อแสดงเครื่องหมายบนแผนที่อย่างน้อย 1 รายการได้
TypeScript
// This example adds a map with markers, using web components. function initMap(): void { console.log('Maps JavaScript API loaded.'); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map with markers, using web components. function initMap() { console.log("Maps JavaScript API loaded."); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map with Markers using Web Components</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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"> <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 callback 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&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
ลองใช้ตัวอย่าง
ในตัวอย่างนี้ เราได้เพิ่มองค์ประกอบ <gmp-advanced-marker>
2 รายการ
ภายในองค์ประกอบที่กำหนดเองของ <gmp-map>
ข้อความสำหรับ title
จะมีข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่านและป้ายกำกับการช่วยเหลือพิเศษเพิ่มเติมสำหรับองค์ประกอบที่ระบุ
เหตุการณ์ JavaScript
ประโยชน์สำคัญของคอมโพเนนต์เว็บคือการใช้งานที่ง่าย เราสามารถแสดงแผนที่ซึ่งมีความรู้ที่จำกัดเกี่ยวกับ JavaScript หรือการเขียนโปรแกรมขั้นสูงได้โดยใช้โค้ดเพียงไม่กี่บรรทัด เมื่อติดตั้งแล้ว โค้ดจะเป็นไปตามรูปแบบที่คุ้นเคยขององค์ประกอบ HTML อื่นๆ ตัวอย่างเช่น ระบบหนึ่งสามารถใช้ระบบเหตุการณ์ของเบราว์เซอร์เนทีฟเพื่อโต้ตอบกับการทำงานในแผนที่หรือเครื่องหมายขั้นสูง เช่น การคลิกเครื่องหมาย
ใน HTML ให้ตั้งค่าแอตทริบิวต์ gmp-clickable
ในองค์ประกอบ gmp-advanced-marker
เพื่อทำให้เครื่องหมายคลิกได้ ใช้ advancedMarker.addEventListener
เพื่อจัดการเหตุการณ์การคลิก
TypeScript
// This example adds a map using web components. function initMap(): void { 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 = new google.maps.InfoWindow({ //@ts-ignore content: advancedMarker.title, }); infoWindow.open({ //@ts-ignore anchor: advancedMarker }); }); }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a map using web components. 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 = new google.maps.InfoWindow({ //@ts-ignore content: advancedMarker.title, }); infoWindow.open({ //@ts-ignore anchor: advancedMarker, }); }); }); } } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } gmp-map { height: 400px; }
HTML
<html> <head> <title>Add a Map Web Component with Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></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-clickable ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" gmp-clickable ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the callback 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&callback=initMap&libraries=marker&v=beta" defer ></script> </body> </html>
ลองใช้ตัวอย่าง
ในตัวอย่างนี้ initMap
จะแสดงฟังก์ชันเรียกกลับที่จำเป็นเมื่อ Maps JavaScript API โหลดเสร็จสมบูรณ์ โค้ดจะสร้าง Listener ให้กับเครื่องหมายแต่ละรายการ และแสดงหน้าต่างข้อมูลเมื่อคลิกเครื่องหมายแต่ละรายการ
ขั้นตอนถัดไป
- ขอฟีเจอร์และรายงานข้อบกพร่องในเครื่องมือติดตามปัญหา Maps JavaScript API
- สำรวจไลบรารีคอมโพเนนต์ขยาย เพื่อดูคอมโพเนนต์ของเว็บในระดับที่สูงขึ้น เช่น ภาพรวมของสถานที่