คอมโพเนนต์เว็บเป็นมาตรฐาน 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 อย่างที่ควรทราบ ได้แก่
- Maps JavaScript API เรียกว่าแบบไม่พร้อมกัน ใช้ฟังก์ชันเรียกกลับเพื่อให้ทราบเมื่อ API โหลดขึ้น
- การนำเสนอแผนที่จะกำหนดด้วยองค์ประกอบที่กำหนดเอง
<gmp-map>
- คุณสมบัติของแผนที่กำหนดโดยการระบุแอตทริบิวต์ในองค์ประกอบที่กำหนดเอง
<gmp-map>
- การจัดรูปแบบสามารถนำไปใช้กับองค์ประกอบที่กำหนดเองหรือประกาศในไฟล์ 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 ให้กับตัวทำเครื่องหมายแต่ละรายการ และแสดงหน้าต่างข้อมูลเมื่อมีการคลิกที่เครื่องหมายแต่ละรายการ
ขั้นตอนถัดไป
- ขอฟีเจอร์และรายงานข้อบกพร่องในเครื่องมือติดตามปัญหา Maps JavaScript API
- สำรวจไลบรารีคอมโพเนนต์ขยาย สำหรับคอมโพเนนต์ของเว็บในระดับที่สูงกว่า เช่น ภาพรวมสถานที่