เพิ่มแผนที่ลงในเว็บไซต์ (JavaScript)

1. ก่อนที่คุณจะเริ่มต้น

ใน Codelab นี้ คุณจะได้เรียนรู้ทุกอย่างที่จําเป็นสําหรับการเริ่มต้นใช้งาน Google Maps Platform สําหรับเว็บ คุณจะได้เรียนรู้ข้อมูลเบื้องต้นทั้งหมด ตั้งแต่การตั้งค่าไปจนถึงการโหลด Maps JavaScript API การแสดงแผนที่แรก การทํางานกับเครื่องหมายและการจัดกลุ่มเครื่องหมาย การวาดบนแผนที่ และการจัดการการโต้ตอบของผู้ใช้

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณสร้างเว็บแอปพื้นฐานที่มีสิ่งต่อไปนี้

• โหลด Maps JavaScript API
• แสดงแผนที่ซึ่งมีจุดศูนย์กลางอยู่ที่ซิดนีย์ ออสเตรเลีย
• แสดงเครื่องหมายที่กําหนดเองสําหรับสถานที่ยอดนิยมในซิดนีย์
• นําคลัสเตอร์เครื่องหมายไปใช้
• เปิดใช้การโต้ตอบของผู้ใช้ที่จัดกึ่งกลางและวาดวงกลมบนแผนที่เมื่อมีการคลิกเครื่องหมาย

สิ่งที่คุณจะได้เรียนรู้

• การเริ่มต้นใช้งาน Google Maps Platform
• การโหลด Maps JavaScript API แบบไดนามิกจากโค้ด JavaScript
• กําลังโหลดแผนที่
• การใช้เครื่องหมาย เครื่องหมายที่กําหนดเอง และการจัดกลุ่มเครื่องหมาย
• การทํางานกับระบบเหตุการณ์ API ของ Maps JavaScript เพื่อให้ผู้ใช้โต้ตอบกับแอปได้
• การควบคุมแผนที่แบบไดนามิก
• การวาดบนแผนที่

2. สิ่งที่ต้องมีก่อน

คุณจะต้องทําความคุ้นเคยกับรายการด้านล่างนี้เพื่อสิ้นสุด Codelab นี้ หากคุณคุ้นเคยกับการใช้งาน Google Maps Platform อยู่แล้ว ให้ข้ามไปที่ Codelab ได้เลย

ผลิตภัณฑ์แพลตฟอร์ม Google Maps ที่จําเป็น

ใน Codelab นี้ คุณจะใช้ผลิตภัณฑ์ Google Maps Platform ต่อไปนี้

• Maps JavaScript API
• ไลบรารีกลุ่มคลัสเตอร์โอเพนซอร์ส MarkerClustererPlus

ข้อกําหนดอื่นๆ สําหรับ Codelab นี้

หากต้องการให้ Codelab นี้เสร็จสมบูรณ์ คุณจะต้องมีบัญชี บริการ และเครื่องมือต่อไปนี้

• บัญชี Google Cloud Platform ที่เปิดใช้การเรียกเก็บเงิน
• คีย์ API ของ Google Maps Platform ที่เปิดใช้ Maps JavaScript API
• ความรู้พื้นฐานเกี่ยวกับ JavaScript, HTML และ CSS
• Node.js ที่ติดตั้งในคอมพิวเตอร์แล้ว
• เครื่องมือแก้ไขข้อความหรือ IDE ที่ต้องการ

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

หากคุณไม่เคยใช้ Google Maps Platform มาก่อน ให้ทําตามคู่มือเริ่มต้นใช้งาน Google Maps Platform หรือดูเพลย์ลิสต์การเริ่มต้นใช้งาน Google Maps Platform เพื่อทําตามขั้นตอนต่อไปนี้

1. สร้างบัญชีสําหรับการเรียกเก็บเงิน
2. สร้างโปรเจ็กต์
3. เปิดใช้ Google Maps Platform API และ SDK (แสดงอยู่ในส่วนก่อนหน้า)
4. สร้างคีย์ API

3. ตั้งค่าเลย

ตั้งค่า Google Maps Platform

หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือการเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีสําหรับการเรียกเก็บเงินและโปรเจ็กต์

1. ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สําหรับ Codelab นี้

2. เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับ Codelab นี้ใน Google Cloud Marketplace โดยทําตามขั้นตอนในวิดีโอนี้หรือเอกสารนี้
3. สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทําตามขั้นตอนในวิดีโอนี้หรือเอกสารนี้ คําขอทั้งหมดสําหรับ Google Maps Platform ต้องใช้คีย์ API

การตั้งค่า Node.js

หากยังไม่มี โปรดไปที่ https://nodejs.org/ เพื่อดาวน์โหลดและติดตั้งรันไทม์ของ Node.js ในคอมพิวเตอร์

Node.js มาพร้อมกับตัวจัดการแพ็กเกจ npm ซึ่งคุณต้องติดตั้งทรัพยากร Dependency สําหรับ Codelab นี้

การตั้งค่าเทมเพลตเริ่มต้นของโปรเจ็กต์

ก่อนเริ่มต้น Codelab นี้ ให้ดําเนินการต่อไปนี้เพื่อดาวน์โหลดเทมเพลตโปรเจ็กต์เริ่มต้น และโค้ดโซลูชันที่สมบูรณ์

1. ดาวน์โหลดหรือแยกที่เก็บ GitHub สําหรับ Codelab นี้ที่ https://github.com/googlecodelabs/maps-platform-101-js

โปรเจ็กต์เริ่มต้นจะอยู่ในไดเรกทอรี /starter และมีโครงสร้างไฟล์พื้นฐานที่จําเป็นในการกรอกข้อมูลใน Codelab ให้เสร็จสมบูรณ์ ข้อมูลทั้งหมดที่คุณจําเป็นต้องใช้จะอยู่ในไดเรกทอรี /starter/src 2. เมื่อดาวน์โหลดโปรเจ็กต์เริ่มต้นแล้ว ให้เรียกใช้ npm install ในไดเรกทอรี /starter การดําเนินการนี้จะติดตั้งทรัพยากร Dependency ที่จําเป็นทั้งหมดซึ่งแสดงอยู่ใน package.json 3. เมื่อติดตั้งทรัพยากร Dependency แล้ว ให้เรียกใช้ npm start ในไดเรกทอรี

ระบบได้ตั้งค่าโปรเจ็กต์เริ่มต้นให้คุณแล้วโดยใช้ webpack-dev-server ซึ่งจะคอมไพล์และเรียกใช้โค้ดที่คุณเขียนในเครื่อง และ webpack-dev-server จะโหลดซ้ําแอปของคุณในเบราว์เซอร์โดยอัตโนมัติทุกครั้งที่ทําการเปลี่ยนแปลงโค้ด

หากต้องการดูรหัสโซลูชันแบบเต็มที่ทํางานอยู่ ให้ทําตามขั้นตอนการตั้งค่าข้างต้นในไดเรกทอรี /solution

4. โหลด Maps JavaScript API

ก่อนเริ่มต้น โปรดทําตามขั้นตอนในการตั้งค่า เรียบร้อยแล้วใช่ไหม ถึงเวลาสร้างเว็บแอปแรกโดยใช้ Google Maps Platform แล้ว!

รากฐานของการใช้ Google Maps Platform สําหรับเว็บคือ Maps JavaScript API API นี้มีอินเทอร์เฟซ JavaScript สําหรับการใช้ฟีเจอร์ทั้งหมดของ Google Maps Platform ซึ่งรวมถึงแผนที่ เครื่องหมาย เครื่องมือวาดภาพ และบริการอื่นๆ ของ Google Maps Platform เช่น Places

หากคุณเคยใช้ Maps JavaScript API มาก่อน คุณอาจคุ้นเคยกับการโหลดแท็กโดยแทรกแท็ก script ลงในไฟล์ HTML ดังนี้

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

วิธีนี้ยังคงเป็นวิธีการโหลด API ที่ถูกต้องสมบูรณ์แบบ แต่ในทรัพยากร Dependency ของ JavaScript สมัยใหม่นั้น โดยทั่วไปจะมีการรวมแบบไดนามิกจากโค้ด หากต้องการบรรลุแท็ก script ข้างต้นแทนโค้ด คุณต้องใช้ @googlemaps/js-api-loaderโมดูล ตัวโหลด API ของ JS รวมอยู่ในทรัพยากร Dependency ของไฟล์ package.json ของโปรเจ็กต์แล้ว เพื่อให้มีการติดตั้งเมื่อคุณเรียกใช้ npm install ก่อนหน้านี้

หากต้องการใช้ตัวโหลด JS API ให้ดําเนินการดังนี้

1. เปิด /src/app.js ไฟล์คือที่ที่คุณจะทํางานทั้งหมดสําหรับ Codelab นี้
2. นําเข้าคลาส Loader จาก @googlemaps/js-api-loader
   
   เพิ่มโค้ดต่อไปนี้ที่ด้านบนของ app.js:

    import { Loader } from '@googlemaps/js-api-loader';
   

3. สร้างออบเจ็กต์ apiOptions
   
   คลาส Loader ต้องใช้ออบเจ็กต์ JSON ที่ระบุตัวเลือกต่างๆ สําหรับโหลด Maps JavaScript API รวมถึงคีย์ Google Maps Platform API, เวอร์ชันของ API ที่ต้องการโหลด และไลบรารีเพิ่มเติมที่ได้จาก Maps JS API ที่คุณต้องการโหลด สําหรับวัตถุประสงค์ของ Codelab นี้ คุณต้องระบุคีย์ API โดยต่อท้าย app.js เท่านั้น:

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }
   

4. สร้างอินสแตนซ์ของ Loader และส่ง apiOptions ของคุณ

    const loader = new Loader(apiOptions);
   

5. โหลด Maps JS API
   
   หากต้องการโหลด API ให้เรียกใช้ load() ในอินสแตนซ์ Loader JS API Loader ให้คํามั่นสัญญาที่ได้รับการแก้ไขเมื่อโหลด API แล้วและพร้อมใช้งาน เพิ่มหลอดไฟต่อไปนี้ในการโหลด API และจัดการสัญญา

    loader.load().then(() => {
      console.log('Maps JS API loaded');
    });
   

หากทุกอย่างเรียบร้อยดี คุณจะเห็นคําสั่ง console.log ในคอนโซลเบราว์เซอร์:

สรุปแล้ว ตอนนี้คุณสามารถโหลด Maps JavaScript API แบบไดนามิกจากโค้ดและกําหนดฟังก์ชันเรียกกลับที่จะทํางานเมื่อ Maps JavaScript API โหลดเสร็จแล้ว

ไฟล์ app.js ควรมีลักษณะดังนี้

    import { Loader } from '@googlemaps/js-api-loader';

    const apiOptions = {
      apiKey: "YOUR API KEY"
    }

    const loader = new Loader(apiOptions);

    loader.then(() => {
      console.log('Maps JS API Loaded');
    });

เมื่อ Maps API ของ Maps โหลดเสร็จแล้ว คุณสามารถโหลดแผนที่ได้ในขั้นตอนถัดไป

5. แสดงแผนที่

ได้เวลาแสดงแผนที่แรกแล้ว

ส่วนหนึ่งที่ใช้บ่อยที่สุดของ Maps JavaScript API คือ google.maps.Map ซึ่งเป็นคลาสที่ช่วยให้เราสร้างและจัดการอินสแตนซ์แผนที่ได้ มาดูวิธีการทํางานด้วยการสร้างฟังก์ชันใหม่ที่ชื่อว่า displayMap()

1. กําหนดการตั้งค่าแผนที่
   
   Maps JavaScript API รองรับการตั้งค่าแบบต่างๆ สําหรับแผนที่ แต่จะใช้เพียง 2 รายการดังนี้
   • center: ตั้งค่าละติจูดและลองจิจูดสําหรับศูนย์กลางของแผนที่
   • zoom: ตั้งค่าระดับการซูมเริ่มต้นของแผนที่
   ใช้โค้ดต่อไปนี้เพื่อให้แผนที่ในซิดนีย์ออสเตรเลียอยู่ตรงกลาง และให้ระดับการซูมอยู่ที่ 14 องศา ซึ่งเป็นระดับการซูมที่เหมาะสมเพื่อแสดงใจกลางเมือง

    function displayMap() {
      const mapOptions = {
        center: { lat: -33.860664, lng: 151.208138 },
        zoom: 14
      };
    }
   

2. รับ div สําหรับการแทรกแผนที่ลงใน DOM
   
   ก่อนที่จะแสดงแผนที่ คุณต้องบอก Maps JavaScript API ที่คุณต้องการให้แสดงในหน้าเว็บ หากคุณสํารวจใน index.html อย่างรวดเร็ว คุณเห็นว่ามี div ที่มีลักษณะเช่นนี้อยู่แล้ว

    <div id="map"></div>
   

   หากต้องการบอก Maps JavaScript API ก็คือตําแหน่งที่คุณต้องการแทรกแผนที่นี้ ให้ใช้ document.getElementById เพื่อรับการอ้างอิง DOM:

    const mapDiv = document.getElementById('map');
   

3. สร้างอินสแตนซ์ของ google.maps.Map
   
   หากต้องการขอให้ Maps JavaScript API สร้างแผนที่ใหม่ที่จะแสดง ให้สร้างอินสแตนซ์ google.maps.Map แล้วส่งใน mapDiv และ mapOptions นอกจากนี้ คุณยังส่งคืนอินสแตนซ์ Map จากฟังก์ชันนี้เพื่อให้คุณดําเนินการอื่นๆ ในภายหลังได้ด้วย

    const map = new google.maps.Map(mapDiv, mapOptions);
    return map;
   

4. แสดงแผนที่
   
   เมื่อกําหนดตรรกะทั้งหมดสําหรับการสร้างอินสแตนซ์แผนที่แล้ว ที่เหลือก็เพียงแค่เรียก displayMap() จากเครื่องจัดการคําสัญญา JS API เพื่อให้มีการเรียกเมื่อ Maps JavaScript API โหลดขึ้นมา ดังนี้

    loader.then(() => {
      console.log('Maps JS API loaded');
      const map = displayMap();
    });
   

ตอนนี้คุณจะเห็นแผนที่ซิดนีย์ที่สวยงามในเบราว์เซอร์ โดยทําดังนี้

สรุปคือ คุณได้กําหนดตัวเลือกการแสดงผลสําหรับแผนที่ สร้างอินสแตนซ์อินสแตนซ์ใหม่ และแทรกไว้ใน DOM

ฟังก์ชัน displayMap() ควรมีลักษณะดังนี้

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14
  };
  const mapDiv = document.getElementById('map');
  const map = new google.maps.Map(mapDiv, mapOptions);
  return map;
}

6. การจัดรูปแบบแผนที่ในระบบคลาวด์ (ไม่บังคับ)

คุณสามารถปรับแต่งรูปแบบแผนที่โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

สร้างรหัสแผนที่

หากคุณยังไม่ได้สร้างรหัสแผนที่ที่มีรูปแบบแผนที่เชื่อมโยงอยู่ โปรดดูคู่มือรหัสแผนที่เพื่อทําตามขั้นตอนต่อไปนี้

1. สร้างรหัสแผนที่
2. เชื่อมโยงรหัสแผนที่กับรูปแบบแผนที่

การเพิ่มรหัสแผนที่ลงในแอป

หากต้องการใช้รหัสแผนที่ที่คุณสร้างขึ้น ให้แก้ไขฟังก์ชัน displayMap ในไฟล์ app.js และส่งรหัสแผนที่ในพร็อพเพอร์ตี้ mapId ของออบเจ็กต์ mapOptions

app.js

function displayMap() {
  const mapOptions = {
    center: { lat: -33.860664, lng: 151.208138 },
    zoom: 14,
    mapId: 'YOUR_MAP_ID'
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

เมื่อทําเสร็จแล้ว คุณก็จะเห็นรูปแบบที่เลือกบนแผนที่

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

มีหลายสิ่งที่นักพัฒนาซอฟต์แวร์ทําด้วย Maps JavaScript API แต่การทําให้เครื่องหมายบนแผนที่ได้รับความนิยมมากที่สุด เครื่องหมายทําให้คุณสามารถแสดงจุดที่เจาะจงบนแผนที่ และเป็นองค์ประกอบ UI ทั่วไปในการจัดการการโต้ตอบของผู้ใช้ หากคุณเคยใช้ Google Maps มาก่อน คุณคงคุ้นเคยกับเครื่องหมายเริ่มต้นแล้ว ซึ่งมีลักษณะดังนี้

ในขั้นตอนนี้ คุณจะใช้ google.maps.Marker เพื่อวางเครื่องหมายบนแผนที่

1. กําหนดออบเจ็กต์สําหรับตําแหน่งของเครื่องหมาย
   
   ในการเริ่มต้น ให้สร้างฟังก์ชัน addMarkers() ใหม่ และประกาศวัตถุ locations ที่มีชุดละติจูด/ลองจิจูดต่อไปนี้สําหรับสถานที่ท่องเที่ยวยอดนิยมในซิดนีย์
   
   โปรดทราบว่าคุณจะต้องส่งอินสแตนซ์ Map ไปยังฟังก์ชันด้วย คุณจะใช้สิ่งนี้ในภายหลังเมื่อสร้างอินสแตนซ์ตัวทําเครื่องหมาย

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
    }
   

2. สร้างอินสแตนซ์ของ google.maps.Marker สําหรับเครื่องหมายแต่ละรายการที่ต้องการแสดง
   
   หากต้องการสร้างเครื่องหมาย ให้ใช้โค้ดด้านล่างซ้ําๆ ผ่านออบเจ็กต์ locations โดยใช้วนซ้ํา for...in แล้วสร้างชุดตัวเลือกในการแสดงผลเครื่องหมายแต่ละรายการ แล้วสร้างอินสแตนซ์ของ google.maps.Marker สําหรับแต่ละตําแหน่ง
   
   สังเกตพร็อพเพอร์ตี้ icon ของ markerOptions จําหมุดแผนที่เริ่มต้นจากก่อนหน้านี้ได้ไหม ทราบไหมว่าคุณปรับแต่งการปักหมุดให้เป็นรูปภาพที่ต้องการได้ด้วย คุณทําได้
   
   พร็อพเพอร์ตี้ icon ช่วยให้คุณระบุเส้นทางไปยังไฟล์ภาพที่ต้องการใช้เป็นเครื่องหมายที่กําหนดเองได้ หากคุณเริ่มต้น Codelab นี้โดยใช้เทมเพลตโปรเจ็กต์ของเรา รูปภาพจะรวมอยู่ใน /src/images อยู่แล้ว
   
   นอกจากนี้ โปรดทราบว่าคุณจะต้องจัดเก็บอินสแตนซ์ของตัวทําเครื่องหมายในอาร์เรย์แล้วส่งกลับมาจากฟังก์ชันเพื่อใช้ในภายหลังได้

    const markers = [];
    for (const location in locations) {
      const markerOptions = {
        map: map,
        position: locations[location],
        icon: './img/custom_pin.png'
      }
      const marker = new google.maps.Marker(markerOptions);
      markers.push(marker);
    }
    return markers;
   

3. แสดงเครื่องหมาย
   
   Maps JavaScript API จะสร้างและแสดงเครื่องหมายโดยอัตโนมัติทุกครั้งที่มีการสร้างอินสแตนซ์ใหม่ของ google.maps.Marker ดังนั้น สิ่งที่คุณต้องทําก็คืออัปเดตเครื่องจัดการคําสัญญา JS API เพื่อให้เรียกใช้ addMarkers() และส่งผ่านอินสแตนซ์ Map ของคุณดังนี้

    loader.then(() => {
      console.log('Maps JS API loaded');
      const map = displayMap();
      const markers = addMarkers(map);
    });
   

ตอนนี้คุณควรเห็นเครื่องหมายที่กําหนดเองบนแผนที่:

สรุปคือ คุณต้องกําหนดชุดเครื่องหมายระบุตําแหน่งในขั้นตอนนี้และสร้างอินสแตนซ์ google.maps.Marker ด้วยไอคอนตัวทําเครื่องหมายที่กําหนดเองสําหรับสถานที่แต่ละแห่ง

ฟังก์ชัน addMarkers() ควรมีลักษณะดังนี้

    function addMarkers(map) {
      const locations = {
        operaHouse: { lat: -33.8567844, lng: 151.213108 },
        tarongaZoo: { lat: -33.8472767, lng: 151.2188164 },
        manlyBeach: { lat: -33.8209738, lng: 151.2563253 },
        hyderPark: { lat: -33.8690081, lng: 151.2052393 },
        theRocks: { lat: -33.8587568, lng: 151.2058246 },
        circularQuay: { lat: -33.858761, lng: 151.2055688 },
        harbourBridge: { lat: -33.852228, lng: 151.2038374 },
        kingsCross: { lat: -33.8737375, lng: 151.222569 },
        botanicGardens: { lat: -33.864167, lng: 151.216387 },
        museumOfSydney: { lat: -33.8636005, lng: 151.2092542 },
        maritimeMuseum: { lat: -33.869395, lng: 151.198648 },
        kingStreetWharf: { lat: -33.8665445, lng: 151.1989808 },
        aquarium: { lat: -33.869627, lng: 151.202146 },
        darlingHarbour: { lat: -33.87488, lng: 151.1987113 },
        barangaroo: { lat: - 33.8605523, lng: 151.1972205 }
      }
      const markers = [];
      for (const location in locations) {
        const markerOptions = {
          map: map,
          position: locations[location],
          icon: './img/custom_pin.png'
        }
        const marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
      }
      return markers;
    }

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

8. เปิดใช้การจัดกลุ่มเครื่องหมาย

เมื่อใช้เครื่องหมายจํานวนมากหรือความอยู่ใกล้กันเกินไป คุณอาจพบปัญหาเครื่องหมายเปลี่ยนแปลงหรือกระจุกอยู่กับกันมากเกินไป ซึ่งทําให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี เช่น หลังจากสร้างเครื่องหมายในขั้นตอนสุดท้าย คุณอาจสังเกตเห็นสิ่งต่อไปนี้

และนี่คือสิ่งที่การจัดกลุ่มด้วยเครื่องหมายจะมาจาก การจัดกลุ่มเครื่องหมายเป็นอีกฟีเจอร์หนึ่งที่ใช้กันทั่วไปซึ่งจัดกลุ่มเครื่องหมายใกล้เคียงเป็นไอคอนเดียวที่เปลี่ยนแปลงตามระดับการซูม ดังตัวอย่างต่อไปนี้

อัลกอริทึมสําหรับการจัดกลุ่มเครื่องหมายจะหารพื้นที่ที่มองเห็นได้ของแผนที่เป็นตารางกริด จากนั้นจึงรวมไอคอนที่อยู่ในเซลล์เดียวกัน โชคดีที่คุณไม่ต้องกังวลในเรื่องนี้ เพราะทีม Google Maps Platform ได้สร้างไลบรารียูทิลิตีแบบโอเพนซอร์สที่มีประโยชน์ชื่อ MarkerClustererPlus ซึ่งจะดําเนินการทุกอย่างให้คุณโดยอัตโนมัติ คุณจะดูแหล่งที่มาของ MarkerClustererPluson GitHub ได้

1. นําเข้า MarkerCluster
   
   สําหรับโปรเจ็กต์เทมเพลตสําหรับ Codelab นี้ ไลบรารียูทิลิตี MarkerClustererPlus จะรวมอยู่ในทรัพยากร Dependency ที่ประกาศในไฟล์ package.json อยู่แล้ว คุณจึงติดตั้งไลบรารีนี้เมื่อเรียกใช้ npm install ในตอนต้นของ Codelab นี้
   
   หากต้องการนําเข้าไลบรารี ให้เพิ่มรายการต่อไปนี้ที่ด้านบนของไฟล์ app.js

    import MarkerClusterer from '@google/markerclustererplus';
   

2. สร้างอินสแตนซ์ใหม่ของ MarkerClusterer
   
   หากต้องการสร้างคลัสเตอร์เครื่องหมาย คุณจะต้องดําเนินการ 2 อย่าง ได้แก่ ระบุไอคอนที่ต้องการใช้สําหรับคลัสเตอร์เครื่องหมาย และสร้างอินสแตนซ์ใหม่ของ MarkerClusterer
   
   ขั้นแรกให้ประกาศออบเจ็กต์ที่ระบุเส้นทางไปยังไอคอนที่ต้องการใช้ ในโปรเจ็กต์เทมเพลต มีชุดรูปภาพที่บันทึกไว้ใน ./img/m แล้ว โปรดสังเกตว่าชื่อไฟล์ภาพจะมีตัวเลขตามลําดับโดยนําหน้าเดียวกัน เช่น m1.png, m2.png, m3.png เป็นต้น
   
   เมื่อคุณตั้งค่าพร็อพเพอร์ตี้ imagePath ในตัวเลือกสําหรับตัวทําเครื่องหมายตัวทําเครื่องหมาย เพียงระบุเส้นทางและคํานําหน้าไฟล์ จากนั้นตัวทําเครื่องหมายตัวทําเครื่องหมายจะใช้ไฟล์ทั้งหมดที่มีคํานําหน้านั้น และเติมตัวเลขต่อท้าย
   
   รายการที่ 2 ให้สร้างอินสแตนซ์ใหม่ของ MarkerClusterer แล้วส่งอินสแตนซ์ของ Map ที่คุณต้องการแสดงคลัสเตอร์เครื่องหมายและอาร์เรย์ของ Marker อินสแตนซ์ที่คุณต้องการจัดกลุ่ม

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }
   

3. แสดงคลัสเตอร์เครื่องหมาย
   
   เรียกใช้ clusterMarkers() จากเครื่องจัดการคําสัญญา API ของ JS ระบบจะเพิ่มคลัสเตอร์เครื่องหมายลงในแผนที่โดยอัตโนมัติเมื่อมีการสร้างอินสแตนซ์ MarkerClusterer ในการเรียกฟังก์ชัน

    loader.then(() => {
      console.log('Maps JS API loaded');
      const map = displayMap();
      const markers = addMarkers(map);
      clusterMarkers(map, markers);
    });
   

ตอนนี้คุณควรเห็นกลุ่มเครื่องหมายสองคู่บนแผนที่ของคุณ

โปรดทราบว่าหากคุณซูมเข้าหรือออก MarkClustererPlus จะเรียงลําดับและปรับขนาดคลัสเตอร์ให้คุณโดยอัตโนมัติ รวมถึงคลิกไอคอนเครื่องหมายกลุ่มใดก็ได้เพื่อซูมเข้าและดูเครื่องหมายทั้งหมดที่รวมอยู่ในคลัสเตอร์นั้น

เพื่อสรุป ในขั้นตอนนี้ คุณได้นําเข้าไลบรารียูทิลิตี MarkerClustererPlus แบบโอเพนซอร์ส และใช้ไลบรารีนี้เพื่อสร้างอินสแตนซ์ของ MarkerClusterer ที่จัดกลุ่มเครื่องหมายที่คุณสร้างโดยอัตโนมัติในขั้นตอนก่อนหน้า

ฟังก์ชัน clusterMarkers() ควรมีลักษณะดังนี้

    function clusterMarkers(map, markers) {
      const clustererOptions = { imagePath: './img/m' }
      const markerCluster = new MarkerClusterer(map, markers, clustererOptions);
    }

ถัดไป คุณจะได้ดูวิธีจัดการกับการโต้ตอบของผู้ใช้

9. เพิ่มการโต้ตอบของผู้ใช้

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

Maps JavaScript API ให้ระบบเหตุการณ์ที่ครอบคลุมซึ่งใช้เครื่องจัดการเหตุการณ์ JavaScript เพื่อจัดการการโต้ตอบต่างๆ ของผู้ใช้ในโค้ด ตัวอย่างเช่น คุณอาจสร้าง Listener เหตุการณ์เพื่อเรียกการเรียกใช้โค้ดสําหรับการโต้ตอบต่างๆ เช่น ผู้ใช้คลิกแผนที่และเครื่องหมาย เลื่อนมุมมองแผนที่ ซูมเข้าและออก และอื่นๆ

ในขั้นตอนนี้ คุณจะต้องเพิ่ม Listener การคลิกไปยังเครื่องหมายของคุณ แล้วทําการเลื่อนแผนที่โดยอัตโนมัติเพื่อวางเครื่องหมายที่ผู้ใช้คลิกไว้ตรงกลางแผนที่

1. ตั้งค่า Listener การคลิกบนเครื่องหมายของคุณ
   
   ออบเจ็กต์ทั้งหมดใน Maps JavaScript API ที่รองรับระบบเหตุการณ์จะใช้ชุดฟังก์ชันมาตรฐานในการจัดการการโต้ตอบของผู้ใช้ เช่น addListener, removeListener และอื่นๆ
   
   หากต้องการเพิ่ม Listener กิจกรรมการคลิกให้กับตัวทําเครื่องหมายแต่ละรายการ ให้ทําซ้ําอาร์เรย์ markers และเรียก addListener บนอินสแตนซ์ตัวทําเครื่องหมายเพื่อแนบ Listener สําหรับเหตุการณ์ click ดังนี้

    function addPanToMarker(map, markers) {
      markers.map(marker => {
        marker.addListener('click', event => {
   
        });
      });
    }
   

2. เลื่อนไปยังเครื่องหมายเมื่อคลิก
   
   เหตุการณ์ click จะทริกเกอร์ทุกครั้งที่ผู้ใช้คลิกหรือแตะเครื่องหมาย และแสดงผลเหตุการณ์เป็นออบเจ็กต์ JSON พร้อมข้อมูลเกี่ยวกับองค์ประกอบ UI ที่มีการคลิก เพื่อปรับปรุงประสบการณ์ของผู้ใช้แผนที่ คุณสามารถจัดการกับเหตุการณ์ click และใช้วัตถุ LatLng เพื่อดูละติจูดและลองจิจูดของตัวทําเครื่องหมายที่มีการคลิก
   
   เมื่อได้รับแล้ว เพียงแค่ส่งฟังก์ชัน Map ในตัวของอินสแตนซ์ Map เพื่อแมปการเลื่อนไปยังตัวทําเครื่องหมายที่คลิกได้อย่างราบรื่น โดยการเพิ่มสิ่งต่อไปนี้ในฟังก์ชันเรียกกลับของเครื่องจัดการเหตุการณ์

    const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
    map.panTo(location);
   

3. กําหนด Listener การคลิก
   
   เรียกใช้ addPanToMarker() จากเครื่องจัดการคําสัญญา JS API แล้วส่งแผนที่และเครื่องหมายของคุณเพื่อเรียกใช้โค้ดและกําหนด Listener การคลิก

    loader.then(() => {
      console.log('Maps JS API loaded');
      const map = displayMap();
      const markers = addMarkers(map);
      clusterMarkers(map, markers);
      addPanToMarker(map, markers);
    });
   

จากนั้นไปที่เบราว์เซอร์ แล้วคลิกเครื่องหมาย คุณควรเลื่อนแผนที่โดยอัตโนมัติเพื่อให้จัดกึ่งกลางใหม่เมื่อมีการคลิกเครื่องหมาย

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

ฟังก์ชัน addPanToMarker() ควรมีลักษณะดังนี้

    function addPanToMarker(map, markers) {
      markers = markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
        });
      });
      return markers;
    }

อีกขั้นตอนเดียวเท่านั้น จากนั้นคุณจะปรับปรุงประสบการณ์ของผู้ใช้แผนที่เพิ่มเติมได้ โดยใช้ฟีเจอร์การวาดของ Maps JavaScript API

10. วาดในแผนที่

ที่ผ่านมาคุณได้สร้างแผนที่ซิดนีย์ที่แสดงเครื่องหมายจุดหมายท่องเที่ยวยอดนิยมและจัดการการโต้ตอบของผู้ใช้ สําหรับขั้นตอนสุดท้ายของ Codelab นี้ คุณจะต้องใช้ฟีเจอร์วาดภาพของ Maps JavaScript API เพื่อเพิ่มฟีเจอร์ที่เป็นประโยชน์ลงในแผนที่ของคุณ

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

Maps JavaScript API ประกอบด้วยชุดฟังก์ชันสําหรับการวาดรูปร่างบนแผนที่ เช่น สี่เหลี่ยมจัตุรัส รูปหลายเหลี่ยม เส้น และวงกลม ถัดจากนั้น คุณจะแสดงผลวงกลมเพื่อแสดงรัศมี 800 เมตร (ประมาณครึ่งไมล์) รอบๆ ตัวทําเครื่องหมายเมื่อมีการคลิก

1. วาดวงกลมด้วย google.maps.Circle
   
   ฟังก์ชันการวาดใน Maps JavaScript API มีตัวเลือกมากมายสําหรับการปรากฏของวัตถุที่วาดบนแผนที่ หากต้องการแสดงรัศมีวงกลม ให้ประกาศชุดตัวเลือกสําหรับวงกลม เช่น สี น้ําหนักของเส้นโครงร่าง ซึ่งวงกลมควรอยู่ตรงกลาง และรัศมี แล้วสร้างอินสแตนซ์ใหม่ของ google.maps.Circle เพื่อสร้างวงกลมใหม่:

    function drawCircle(map, location) {
      const circleOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        map: map,
        center: location,
        radius: 800
      }
      const circle = new google.maps.Circle(circleOptions);
      return circle;
    }
   

2. วาดวงกลมเมื่อคลิกเครื่องหมาย
   
   หากต้องการวาดวงกลมเมื่อผู้ใช้คลิกเครื่องหมาย สิ่งที่คุณต้องทําก็คือเรียกใช้ฟังก์ชัน drawCircle() ที่เขียนไว้ด้านบนจากโค้ดเรียกกลับของ Listener การคลิกใน addPanToMarker() แล้วส่งแผนที่และตําแหน่งของเครื่องหมายระบุตําแหน่ง
   
   โปรดสังเกตว่ามีการเพิ่มคําสั่งแบบมีเงื่อนไขที่เรียกใช้ circle.setMap(null) ด้วย วิธีนี้จะนําวงกลมที่แสดงผลไว้ก่อนหน้านี้ออกจากแผนที่หากผู้ใช้คลิกเครื่องหมายอื่น เพื่อคุณจะได้ไม่พบกับแผนที่ที่ครอบคลุมในแวดวงเมื่อผู้ใช้สํารวจแผนที่
   
   ฟังก์ชัน addPanToMarker() ควรมีลักษณะดังนี้

    function addPanToMarker(map, markers) {
      let circle;
      markers.map(marker => {
        marker.addListener('click', event => {
          const location = { lat: event.latLng.lat(), lng: event.latLng.lng() };
          map.panTo(location);
          if (circle) {
            circle.setMap(null);
          }
          circle = drawCircle(map, location);
        });
      });
    }
   

เสร็จเรียบร้อย ไปที่เบราว์เซอร์แล้วคลิกเครื่องหมายใดก็ได้ คุณควรจะเห็นรัศมีเป็นวงกลมรอบพื้นที่

11. ยินดีด้วย

คุณสร้างเว็บแอปแรกขึ้นมาโดยใช้ Google Maps Platform สําเร็จ ซึ่งรวมถึงการโหลด Maps JavaScript API, การโหลดแผนที่, การทํางานกับเครื่องหมาย, การควบคุมและการวาดภาพบนแผนที่ และเพิ่มการโต้ตอบของผู้ใช้

หากต้องการดูรหัสที่ทําเสร็จแล้ว ให้ดูโปรเจ็กต์ที่เสร็จสิ้นในไดเรกทอรี /solutions

มีอะไรอีกบ้าง

ใน Codelab นี้ คุณได้พูดถึงข้อมูลพื้นฐานเกี่ยวกับสิ่งที่คุณทําได้ด้วย Maps JavaScript API จากนั้นลองเพิ่มฟีเจอร์บางอย่างต่อไปนี้ลงในแผนที่

• เปลี่ยนประเภทแผนที่เพื่อแสดงแผนที่ดาวเทียม แบบผสม และภูมิประเทศ
• เปิดใช้การแปลเพื่อโหลดแผนที่ในภาษาต่างๆ
• ปรับแต่งการโต้ตอบของผู้ใช้อื่นๆ เช่น การซูมและการควบคุมแผนที่
• เพิ่มหน้าต่างข้อมูลเพื่อแสดงข้อมูลเมื่อมีการคลิกเครื่องหมาย
• ดูไลบรารีเพิ่มเติมที่ใช้ได้กับ Maps JavaScript API ที่เปิดใช้ฟังก์ชันการทํางานเพิ่มเติม เช่น สถานที่ ภาพวาด และการแสดงภาพ

หากต้องการดูวิธีอื่นๆ ในการทํางานร่วมกับ Google Maps Platform บนเว็บต่อ โปรดไปที่ลิงก์ต่อไปนี้

• เอกสารประกอบของ Maps JavaScript API
• ช่อง YouTube ของ Google Maps Platform
• Codelab ของ Google Maps Platform
• โปรเจ็กต์โอเพนซอร์สของ Google Maps Platform ใน GitHub