การอัปเกรดแอปพลิเคชัน Maps JavaScript API จากเวอร์ชัน 2 เป็นเวอร์ชัน 3

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

ภาพรวม

แอปพลิเคชันแต่ละรายการจะมีขั้นตอนการย้ายข้อมูลแตกต่างกันเล็กน้อย แต่มีบางขั้นตอนที่เหมือนกันสำหรับทุกโปรเจ็กต์ ดังนี้

  1. รับคีย์ใหม่ ตอนนี้ Maps JavaScript API ใช้คอนโซล Google Cloud เพื่อจัดการคีย์ หากคุณยังใช้คีย์ v2 อยู่ โปรดรับคีย์ API ใหม่ก่อนเริ่มย้ายข้อมูล
  2. อัปเดต Bootstrap ของ API แอปพลิเคชันส่วนใหญ่จะโหลด Maps JavaScript API v3 ด้วยโค้ดต่อไปนี้
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  3. อัปเดตโค้ด ปริมาณการเปลี่ยนแปลงที่จำเป็นจะขึ้นอยู่กับแอปพลิเคชันของคุณเป็นอย่างมาก การเปลี่ยนแปลงที่พบบ่อยมีดังนี้
    • อ้างอิงเนมสเปซ google.maps เสมอ ใน v3 โค้ด Maps JavaScript API ทั้งหมดจะจัดเก็บไว้ในเนมสเปซ google.maps.* แทนเนมสเปซส่วนกลาง วัตถุส่วนใหญ่ก็ได้รับการเปลี่ยนชื่อด้วยเช่นกันในขั้นตอนนี้ เช่น ตอนนี้คุณจะต้องโหลด google.maps.Map แทน GMap2
    • นำการอ้างอิงถึงวิธีการที่ล้าสมัยออก ระบบได้นำวิธีการยูทิลิตีสำหรับวัตถุประสงค์ทั่วไปจำนวนหนึ่งออกแล้ว เช่น GDownloadURL และ GLog แทนที่ฟังก์ชันนี้ด้วยไลบรารียูทิลิตีของบุคคลที่สาม หรือนําการอ้างอิงเหล่านี้ออกจากโค้ด
    • (ไม่บังคับ) เพิ่มไลบรารีลงในโค้ด เราได้แยกฟีเจอร์หลายอย่างออกเป็นไลบรารียูทิลิตีเพื่อให้แต่ละแอปต้องโหลดเฉพาะส่วนของ API ที่จะใช้งาน
    • (ไม่บังคับ) กำหนดค่าโปรเจ็กต์ให้ใช้ภายนอก v3 คุณสามารถใช้ extern เวอร์ชัน 3 เพื่อช่วยตรวจสอบโค้ดด้วย Closure Compiler หรือเพื่อเรียกใช้ฟีเจอร์เติมข้อความอัตโนมัติใน IDE ดูข้อมูลเพิ่มเติมเกี่ยวกับ compilation ขั้นสูงและภายนอก
  4. ทดสอบและปรับปรุง ในตอนนี้ คุณยังคงต้องดำเนินการบางอย่าง แต่ข่าวดีก็คือคุณกำลังเดินหน้าสู่แอปพลิเคชันแผนที่เวอร์ชัน 3 ใหม่

การเปลี่ยนแปลงใน Maps JavaScript API เวอร์ชัน 3

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

การเปลี่ยนแปลงบางอย่างใน v3 API มีดังนี้

  • ไลบรารีหลักที่มีประสิทธิภาพมากขึ้น เราได้ย้ายฟังก์ชันเสริมจำนวนมากไปไว้ในไลบรารี ซึ่งช่วยลดเวลาในการโหลดและแยกวิเคราะห์ของ Core API ซึ่งจะช่วยให้แผนที่โหลดได้อย่างรวดเร็วบนอุปกรณ์ทุกเครื่อง
  • ปรับปรุงประสิทธิภาพของฟีเจอร์หลายอย่าง เช่น การแสดงผลรูปหลายเหลี่ยมและการวางเครื่องหมาย
  • แนวทางใหม่ในการจำกัดการใช้งานฝั่งไคลเอ็นต์เพื่อรองรับที่อยู่ที่ใช้ร่วมกันซึ่งพร็อกซีของอุปกรณ์เคลื่อนที่และไฟร์วอลล์ขององค์กรใช้
  • เพิ่มการรองรับเบราว์เซอร์สมัยใหม่หลายรุ่นและเบราว์เซอร์ในอุปกรณ์เคลื่อนที่ ยกเลิกการรองรับ Internet Explorer 6 แล้ว
  • นําคลาสตัวช่วยสําหรับวัตถุประสงค์ทั่วไปออกหลายคลาส ( GLog หรือ GDownloadUrl) ปัจจุบันมีไลบรารี JavaScript ที่ยอดเยี่ยมจํานวนมากซึ่งมีฟังก์ชันการทํางานคล้ายกัน เช่น Closure หรือ jQuery
  • การใช้งาน Street View เวอร์ชัน HTML5 ที่โหลดในอุปกรณ์เคลื่อนที่ทุกรุ่น
  • ภาพพาโนรามาของ Street View ที่ปรับแต่งด้วยรูปภาพของคุณเอง ซึ่งช่วยให้คุณแชร์ภาพพาโนรามาของลานสกี บ้านที่ขาย หรือสถานที่น่าสนใจอื่นๆ ได้
  • การปรับแต่งแผนที่ที่มีสไตล์ที่ช่วยให้คุณเปลี่ยนการแสดงองค์ประกอบบนแผนที่ฐานให้เข้ากับสไตล์ภาพที่เป็นเอกลักษณ์ของคุณได้
  • การรองรับบริการใหม่หลายรายการ เช่น ElevationService และ Distance Matrix
  • บริการเส้นทางที่ปรับปรุงใหม่มีเส้นทางอื่น การเพิ่มประสิทธิภาพเส้นทาง (วิธีแก้ปัญหาแบบใกล้เคียงสำหรับ ปัญหาคนขายยา) เส้นทางปั่นจักรยาน (มี เลเยอร์ปั่นจักรยาน) เส้นทางขนส่งสาธารณะ และ เส้นทางที่ลากได้
  • รูปแบบการแปลงพิกัดภูมิศาสตร์ที่อัปเดตแล้วซึ่งให้ข้อมูลประเภทที่แม่นยำกว่าค่า accuracy จาก Geocoding API เวอร์ชัน 2
  • การรองรับหน้าต่างข้อมูลหลายรายการในแผนที่เดียว

การอัปเกรดแอปพลิเคชัน

คีย์ใหม่

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

ระบบจะส่งคีย์เมื่อโหลด Maps JavaScript API v3 ดูข้อมูลเพิ่มเติมเกี่ยวกับการสร้างคีย์ API

โปรดทราบว่าหากคุณเป็นลูกค้า Google Maps API for Work คุณอาจใช้รหัสไคลเอ็นต์ที่มีพารามิเตอร์ client แทนที่จะใช้พารามิเตอร์ key ระบบยังคงรองรับรหัสไคลเอ็นต์ใน Maps JavaScript API เวอร์ชัน 3 และไม่จำเป็นต้องผ่านกระบวนการอัปเกรดคีย์

การโหลด API

การแก้ไขครั้งแรกที่คุณต้องทํากับโค้ดเกี่ยวข้องกับวิธีโหลด API ใน v2 คุณจะโหลด Maps JavaScript API ได้ผ่านคำขอไปยัง http://maps.google.com/maps หากกำลังโหลด Maps JavaScript API v3 คุณจะต้องทําการเปลี่ยนแปลงต่อไปนี้

  1. โหลด API จาก //maps.googleapis.com/maps/api/js
  2. นําพารามิเตอร์ file ออก
  3. อัปเดตพารามิเตอร์ key ด้วยคีย์ v3 ใหม่ ลูกค้า Google Maps API for Work ควรใช้พารามิเตอร์ client
  4. (แพ็กเกจพรีเมียมของ Google Maps Platform เท่านั้น) ตรวจสอบว่าได้ระบุพารามิเตอร์ client ตามที่อธิบายไว้ใน คู่มือนักพัฒนาซอฟต์แวร์สำหรับแพ็กเกจพรีเมียมของ Google Maps Platform
  5. นําพารามิเตอร์ v ออกเพื่อขอเวอร์ชันที่เผยแพร่ล่าสุด หรือเปลี่ยนค่าให้สอดคล้องกับรูปแบบการกำหนดเวอร์ชัน v3
  6. (ไม่บังคับ) แทนที่พารามิเตอร์ hl ด้วย language และเก็บค่าไว้
  7. (ไม่บังคับ) เพิ่มพารามิเตอร์ libraries เพื่อโหลดไลบรารีที่ไม่บังคับ

ในกรณีที่ง่ายที่สุด บูตสแtrap v3 จะระบุเฉพาะพารามิเตอร์คีย์ API ดังนี้

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

ตัวอย่างด้านล่างขอ Maps JavaScript API v2 เวอร์ชันล่าสุดเป็นภาษาเยอรมัน

<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>

ตัวอย่างด้านล่างคือคําขอที่เทียบเท่าสําหรับ v3

<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>

ขอแนะนําเนมสเปซ google.maps

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

เมื่อย้ายข้อมูลแอปพลิเคชันไปยัง v3 คุณจะต้องเปลี่ยนโค้ดเพื่อใช้ประโยชน์จากเนมสเปซใหม่ ขออภัย การค้นหา "G" แล้วแทนที่ด้วย "google.maps" นั้นใช้ไม่ได้ผลทั้งหมด แต่นี่เป็นกฎง่ายๆ ที่ควรใช้เมื่อตรวจสอบโค้ด ด้านล่างนี้คือตัวอย่างคลาสที่เทียบเท่ากันใน v2 และ v3

v2 v3
GMap2 google.maps.Map
GLatLng google.maps.LatLng
GInfoWindow google.maps.InfoWindow
GMapOptions google.map.MapOptions
G_API_VERSION google.maps.version
GPolyStyleOptions google.maps.PolygonOptions
or google.maps.PolylineOptions

การนำโค้ดที่ล้าสมัยออก

Maps JavaScript API เวอร์ชัน 3 มีฟังก์ชันการทำงานส่วนใหญ่ที่คล้ายกับเวอร์ชัน 2 แต่มีบางคลาสที่ระบบไม่รองรับแล้ว ในการย้ายข้อมูล คุณควรแทนที่คลาสเหล่านี้ด้วยไลบรารียูทิลิตีของบุคคลที่สาม หรือนําการอ้างอิงเหล่านี้ออกจากโค้ด ไลบรารี JavaScript ที่ยอดเยี่ยมมีอยู่มากมายซึ่งให้ฟังก์ชันการทำงานที่คล้ายกัน เช่น Closure หรือ jQuery

คลาสต่อไปนี้ไม่มีคู่กันใน Maps JavaScript API v3

GBoundsGLanguage
GBrowserIsCompatibleGLayer
GControlGLog
GControlAnchorGMercatorProjection
GControlImplGNavLabelControl
GControlPositionGObliqueMercator
GCopyrightGOverlay
GCopyrightCollectionGPhotoSpec
GDownloadUrlGPolyEditingOptions
GDraggableObjectGScreenOverlay
GDraggableObjectOptionsGStreetviewFeatures
GFactualGeocodeCacheGStreetviewLocation
GGeoAddressAccuracyGStreetviewOverlay
GGeocodeCacheGStreetviewUserPhotosOptions
GGoogleBarGTileLayerOptions
GGoogleBarAdsOptionsGTileLayerOverlayOptions
GGoogleBarLinkTargetGTrafficOverlayOptions
GGoogleBarListingTypesGUnload
GGoogleBarOptionsGXml
GGoogleBarResultListGXmlHttp
GInfoWindowTabGXslt
GKeyboardHandler

การเปรียบเทียบโค้ด

มาเปรียบเทียบแอปพลิเคชัน 2 รายการที่ค่อนข้างเรียบง่ายซึ่งเขียนด้วย API เวอร์ชัน 2 และ 3

<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(
            document.getElementById('map'));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();

        map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));

      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>
    
<!DOCTYPE html>
<html>
  <head>
    <script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      html, body, #map { height: 100%; margin: 0; }
    </style>
    <script>
    function initialize() {
      var map = new google.maps.Map(
        document.getElementById('map'), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.4419, -122.1419),
            map: map
      });

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

อย่างที่เห็น แอปพลิเคชัน 2 ตัวนี้มีความแตกต่างกันหลายประการ การเปลี่ยนแปลงที่สำคัญมีดังนี้

  • ที่อยู่ที่ใช้โหลด API มีการเปลี่ยนแปลง
  • คุณไม่จำเป็นต้องใช้เมธอด GBrowserIsCompatible() และ GUnload() ใน v3 อีกต่อไป และเราได้นำเมธอดดังกล่าวออกจาก API แล้ว
  • ระบบจะแทนที่ออบเจ็กต์ GMap2 ด้วย google.maps.Map ในฐานะออบเจ็กต์กลางใน API
  • ตอนนี้ระบบจะโหลดพร็อพเพอร์ตี้ผ่านคลาส Options ในตัวอย่างข้างต้น เราได้ตั้งค่าพร็อพเพอร์ตี้ 3 รายการที่จําเป็นสําหรับการโหลดแผนที่ ซึ่งได้แก่ center, zoom และ mapTypeId ผ่านออบเจ็กต์ MapOptions ที่ฝังอยู่
  • UI เริ่มต้นจะเปิดอยู่โดยค่าเริ่มต้นในเวอร์ชัน 3 คุณปิดใช้การตั้งค่านี้ได้โดยการตั้งค่าพร็อพเพอร์ตี้ disableDefaultUI เป็น true ในแอบเจ็กต์ MapOptions

สรุป

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

หากพบปัญหาหรือมีข้อสงสัยเกี่ยวกับบทความนี้ โปรดใช้ลิงก์ส่งความคิดเห็นที่ด้านบนของหน้านี้

ข้อมูลอ้างอิงโดยละเอียด

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

  • เหตุการณ์ - การลงทะเบียนและการจัดการเหตุการณ์
  • การควบคุม - การจัดการตัวควบคุมการนำทางที่ปรากฏบนแผนที่
  • การวางซ้อน - การเพิ่มและแก้ไขวัตถุบนแผนที่
  • ประเภทแผนที่ - ไทล์ที่ประกอบกันเป็นแผนที่ฐาน
  • เลเยอร์ - การเพิ่มและแก้ไขเนื้อหาเป็นกลุ่ม เช่น เลเยอร์ KML หรือเลเยอร์การจราจร
  • บริการ - การทำงานร่วมกับบริการการแปลงพิกัดภูมิศาสตร์ เส้นทาง หรือ Street View ของ Google

กิจกรรม

รูปแบบเหตุการณ์ของ Maps JavaScript API เวอร์ชัน 3 คล้ายกับที่ใช้ในเวอร์ชัน 2 แม้ว่าจะมีการเปลี่ยนแปลงหลายอย่างอยู่เบื้องหลัง

API เวอร์ชัน 3 เพิ่มเหตุการณ์ประเภทใหม่เพื่อแสดงการเปลี่ยนแปลงสถานะของ MVC ขณะนี้เหตุการณ์มี 2 ประเภท ได้แก่

  • ระบบจะส่งเหตุการณ์ของผู้ใช้ (เช่น เหตุการณ์เมาส์ "คลิก") จาก DOM ไปยัง Maps JavaScript API เหตุการณ์เหล่านี้แยกต่างหากและแตกต่างจากเหตุการณ์ DOM มาตรฐาน
  • การแจ้งเตือนการเปลี่ยนแปลงสถานะของ MVC จะแสดงการเปลี่ยนแปลงในออบเจ็กต์ Maps API และตั้งชื่อตามรูปแบบ property_changed

ออบเจ็กต์ Maps API แต่ละรายการจะส่งออกเหตุการณ์ที่มีชื่อจำนวนหนึ่ง แอปพลิเคชันที่สนใจเหตุการณ์ที่เฉพาะเจาะจงควรลงทะเบียน Listener เหตุการณ์สําหรับเหตุการณ์เหล่านั้นและเรียกใช้โค้ดเมื่อได้รับเหตุการณ์เหล่านั้น กลไกที่ทำงานตามเหตุการณ์นี้เหมือนกันทั้งใน Maps JavaScript API v2 และ v3 ยกเว้นเนมสเปซที่เปลี่ยนจาก GEvent เป็น google.maps.event 

GEvent.addListener(map, 'click', function() {
  alert('You clicked the map.');
});
 
google.maps.event.addListener(map, 'click', function() {
  alert('You clicked the map.');
});

คุณควรนํา Listener เหตุการณ์ออกเมื่อไม่จําเป็นต้องใช้อีกต่อไปเพื่อเหตุผลด้านประสิทธิภาพ การนํา Listener เหตุการณ์ออกทํางานในลักษณะเดียวกันใน v2 และ v3

  1. เมื่อคุณสร้าง Listener เหตุการณ์ ระบบจะแสดงผลออบเจ็กต์ทึบแสง (GEventListener ใน v2, MapsEventListener ใน v3)
  2. เมื่อต้องการนํา Listener เหตุการณ์ออก ให้ส่งออบเจ็กต์นี้ไปยังเมธอด removeListener() (GEvent.removeListener() ใน v2 หรือ google.maps.event.removeListener() ใน v3) เพื่อนํา Listener เหตุการณ์ออก

หากต้องการบันทึกและตอบสนองต่อเหตุการณ์ DOM (Document Object Model) เวอร์ชัน 3 มีgoogle.maps.event.addDomListener()วิธีแบบคงที่ ซึ่งเทียบเท่ากับGEvent.addDomListener()วิธีในเวอร์ชัน 2

เหตุการณ์ UI มักจะส่งอาร์กิวเมนต์เหตุการณ์ซึ่ง Listener ของเหตุการณ์จะเข้าถึงได้ เราลดความซับซ้อนของอาร์กิวเมนต์เหตุการณ์ส่วนใหญ่ใน v3 เพื่อให้สอดคล้องกับออบเจ็กต์ใน API มากขึ้น (ดูรายละเอียดได้ในข้อมูลอ้างอิง v3)

ไม่มีอาร์กิวเมนต์ overlay ใน Listener เหตุการณ์ v3 หากคุณลงทะเบียนเหตุการณ์ click ในแผนที่ v3 การเรียกกลับจะเกิดขึ้นเมื่อผู้ใช้คลิกแผนที่ฐานเท่านั้น คุณสามารถลงทะเบียนการเรียกกลับเพิ่มเติมในภาพซ้อนทับที่คลิกได้หากต้องการตอบสนองต่อการคลิกเหล่านั้น 

// Passes an overlay argument when clicking on a map

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

GEvent.addListener(map,'click', function(overlay, latlng) {
  if (latlng) {
    var marker = new GMarker(latlng);
    map.addOverlay(marker);
  }
});
 
// Passes only an event argument

var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

google.maps.event.addListener(map, 'click', function(event) {
  var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
  });
});

การควบคุม

Maps JavaScript API จะแสดงตัวควบคุม UI ที่ช่วยให้ผู้ใช้โต้ตอบกับแผนที่ได้ คุณสามารถใช้ API เพื่อปรับแต่งลักษณะที่ตัวควบคุมเหล่านี้ปรากฏ

มีการเปลี่ยนแปลงบางอย่างกับประเภท control เกิดขึ้นเมื่อใช้ v3 API

  1. v3 API รองรับแผนที่ประเภทอื่นๆ เพิ่มเติม รวมถึงแผนที่ภูมิประเทศและความสามารถในการเพิ่มแผนที่ประเภทที่กำหนดเอง
  2. การควบคุมแบบลําดับชั้น v2 GHierarchicalMapTypeControl ไม่มีให้บริการแล้ว คุณสามารถสร้างเอฟเฟกต์ที่คล้ายกันโดยใช้การควบคุม google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  3. เลย์เอาต์แนวนอนที่ GMapTypeControl ระบุใน v2 ไม่พร้อมใช้งานใน v3

เมื่อใช้ Maps JavaScript API v2 คุณจะต้องเพิ่มการควบคุมลงในแผนที่ผ่านเมธอด addControl() ของออบเจ็กต์แผนที่ ใน v3 คุณจะแก้ไขออบเจ็กต์ MapOptions ที่เชื่อมโยงแทนการเข้าถึงหรือแก้ไขตัวควบคุมโดยตรง ตัวอย่างด้านล่างแสดงวิธีปรับแต่งแผนที่เพื่อเพิ่มการควบคุมต่อไปนี้

  • ปุ่มที่ช่วยให้ผู้ใช้สลับระหว่างแผนที่ประเภทต่างๆ ได้
  • มาตราส่วนแผนที่
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
 
var myOptions = {
    center: new google.maps.LatLng(-25.363882, 131.044922),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

    // Add controls
    mapTypeControl: true,
    scaleControl: true
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

การควบคุมตำแหน่งมีการเปลี่ยนแปลงอย่างมากในเวอร์ชัน 3 ใน v2 วิธีการ addControl() จะใช้พารามิเตอร์ที่ 2 (ไม่บังคับ) ซึ่งช่วยให้คุณระบุตําแหน่งของการควบคุมตามมุมของแผนที่ได้

ใน v3 คุณจะตั้งค่าตําแหน่งของการควบคุมผ่านพร็อพเพอร์ตี้ position ของตัวเลือกการควบคุม ตำแหน่งของการควบคุมเหล่านี้ไม่ใช่ตำแหน่งที่แน่นอน แต่ API จะจัดวางการควบคุมอย่างชาญฉลาดโดย "จัดเรียง" การควบคุมรอบๆ องค์ประกอบแผนที่ที่มีอยู่ภายในข้อจำกัดที่กำหนด (เช่น ขนาดแผนที่) วิธีนี้ช่วยให้มั่นใจว่าการควบคุมเริ่มต้นจะเข้ากันได้กับการควบคุมของคุณ ดูข้อมูลเพิ่มเติมได้ที่การควบคุมการระบุตำแหน่งใน v3

โค้ดต่อไปนี้จะจัดตำแหน่งตัวควบคุมจากตัวอย่างข้างต้นใหม่

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);

// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
    G_ANCHOR_TOP_LEFT, new GSize(10, 10)));

// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
    G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
 
var myOptions = {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP,

  // Add map type control
  mapTypeControl: true,
  mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_LEFT
  },

  // Add scale
  scaleControl: true,
  scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_RIGHT
  }
};

var map = new google.maps.Map(document.getElementById('map'),
    myOptions);

Maps JavaScript API ช่วยให้คุณสร้างการควบคุมการไปยังส่วนต่างๆ ที่กําหนดเองได้ หากต้องการปรับแต่งการควบคุมด้วย v2 API คุณจะต้องสร้างคลาสย่อยของคลาส GControl และกำหนดตัวแฮนเดิลสำหรับเมธอด initialize() และ getDefaultPosition() ไม่มีคลาสที่เทียบเท่าคลาส GControl ใน v3 แต่ระบบจะแสดงการควบคุมเป็นองค์ประกอบ DOM แทน หากต้องการเพิ่มการควบคุมที่กําหนดเองด้วย v3 API ให้สร้างโครงสร้าง DOM สําหรับการควบคุมในคอนสตรคเตอร์เป็นองค์ประกอบย่อยของ Node (เช่น องค์ประกอบ <div>) และเพิ่มโปรแกรมรับฟังเหตุการณ์เพื่อจัดการเหตุการณ์ DOM ดัน Node ไปยังอาร์เรย์ controls[position] ของแผนที่เพื่อเพิ่มอินสแตนซ์ของการควบคุมที่กำหนดเองลงในแผนที่

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

map.addControl(new HomeControl(),
    GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
 
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
    homeControlDiv);

การวางซ้อน

การวางซ้อนแสดงวัตถุที่คุณ "เพิ่ม" ลงในแผนที่เพื่อกำหนดจุด เส้น พื้นที่ หรือคอลเล็กชันของวัตถุ

ประเภทของวัตถุที่แสดงโดยการวางซ้อนจะเหมือนกันระหว่าง v2 กับ v3 แต่มีการจัดการต่างกัน

เพิ่มและนำการวางซ้อนใน v2 API ออกจากแผนที่โดยใช้เมธอด addOverlay() และ removeOverlay() ของออบเจ็กต์ GMap2 ใน v3 คุณจะกำหนดแผนที่ให้กับการวางซ้อนผ่านพร็อพเพอร์ตี้ map ของคลาสตัวเลือกการวางซ้อนที่เกี่ยวข้อง นอกจากนี้ คุณยังเพิ่มหรือนําการวางซ้อนออกได้โดยตรงโดยเรียกใช้เมธอด setMap() ของออบเจ็กต์การวางซ้อน และระบุแผนที่ที่ต้องการ การตั้งค่าพร็อพเพอร์ตี้แผนที่เป็น null จะนำการวางซ้อนออก

ไม่มีเมธอด clearOverlays() ใน v3 หากต้องการจัดการชุดการวางซ้อน คุณควรสร้างอาร์เรย์เพื่อเก็บการวางซ้อน เมื่อใช้อาร์เรย์นี้ คุณจะเรียกใช้ setMap() กับการวางซ้อนแต่ละรายการในอาร์เรย์ได้ (โดยส่ง null หากต้องการนำออก)

โดยค่าเริ่มต้น เครื่องหมายจะคลิกได้ แต่จะลากไม่ได้ ตัวอย่างต่อไปนี้จะเพิ่มเครื่องหมายที่ลากได้

var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);

var marker = new GMarker(latLng, {
  draggable: true
});
map.addOverlay(marker);
 
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: myLatLng,
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
    position: myLatLng,
    draggable: true,
    map: map
});

คุณสามารถกำหนดไอคอนที่กำหนดเองให้แสดงแทนเครื่องหมายเริ่มต้นได้ หากต้องการใช้รูปภาพที่กำหนดเองใน v2 ให้สร้างอินสแตนซ์ GIconจาก G_DEFAULT_ICON type แล้วแก้ไข หากรูปภาพมีขนาดใหญ่กว่าหรือเล็กกว่าไอคอนเริ่มต้น คุณต้องระบุรูปภาพด้วยอินสแตนซ์ GSize v3 API ลดความซับซ้อนของกระบวนการนี้ลงเล็กน้อย เพียงตั้งค่าพร็อพเพอร์ตี้ icon ของหมุดเป็น URL ของรูปภาพที่กําหนดเอง แล้ว API จะปรับขนาดไอคอนโดยอัตโนมัติ

Maps JavaScript API ยังรองรับไอคอนที่ซับซ้อนด้วย ไอคอนที่ซับซ้อนอาจมีหลายไทล์ รูปร่างที่ซับซ้อน หรือระบุ "ลําดับกอง" ของลักษณะที่รูปภาพควรแสดงสัมพันธ์กับการวางซ้อนอื่นๆ หากต้องการเพิ่มรูปร่างลงในเครื่องหมายใน v2 คุณต้องระบุพร็อพเพอร์ตี้เพิ่มเติมในแต่ละอินสแตนซ์ GIcon แล้วส่งค่านี้เป็นตัวเลือกไปยังคอนสตรคเตอร์ GMarker ใน v3 ไอคอนที่ระบุด้วยวิธีนี้ควรตั้งค่าพร็อพเพอร์ตี้ icon เป็นออบเจ็กต์ประเภท Icon เวอร์ชัน 3 ไม่รองรับเงาเครื่องหมาย

ตัวอย่างต่อไปนี้แสดงธงชายหาดที่หาดบอนไดในออสเตรเลีย โดยส่วนที่โปร่งใสของไอคอนจะคลิกไม่ได้ 

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();

var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);

map.addOverlay(new GMarker(bbLatLng, {
  icon: flagIcon
}));
 
var map = new google.maps.Map(
  document.getElementById('map'), {
  center: new google.maps.LatLng(-25.363882, 131.044922),
  zoom: 4,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);

var bbMarker = new google.maps.Marker({
    icon: '/images/beachflag.png'
    shape: shape,
    position: bbLatLng,
    map: map
});

เส้นประกอบประกอบด้วยอาร์เรย์ของ LatLng รวมถึงชุดส่วนของเส้นที่เชื่อมต่อตำแหน่งเหล่านั้นตามลำดับ การสร้างและการแสดงออบเจ็กต์ Polyline ใน v3 คล้ายกับการใช้ออบเจ็กต์ GPolyline ใน v2 ตัวอย่างต่อไปนี้วาดรูปหลายเส้นเชิงเรขาคณิตที่มีความกว้าง 3 พิกเซลและโปร่งแสงครึ่งหนึ่งจากซูริกไปซิดนีย์ผ่านสิงคโปร์

var polyline = new GPolyline(
  [
    new GLatLng(47.3690239, 8.5380326),
    new GLatLng(1.352083, 103.819836),
    new GLatLng(-33.867139, 151.207114)
  ],
  '#FF0000', 3, 0.5, {
  geodesic: true
});

map.addOverlay(polyline);
 
var polyline = new google.maps.Polyline({
  path: [
    new google.maps.LatLng(47.3690239, 8.5380326),
    new google.maps.LatLng(1.352083, 103.819836),
    new google.maps.LatLng(-33.867139, 151.207114)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
  geodesic: true
});

polyline.setMap(map);

โพลีไลน์ที่เข้ารหัส

เวอร์ชัน 3 ไม่รองรับการสร้างออบเจ็กต์ Polyline จากเส้นประกอบที่เข้ารหัสโดยตรง แต่ไลบรารีเรขาคณิตจะมีวิธีการเข้ารหัสและถอดรหัสเส้นประกอบแทน ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีโหลดไลบรารีนี้ได้ในส่วนไลบรารีใน Maps API เวอร์ชัน 3

ตัวอย่างด้านล่างวาดรูปหลายเส้นที่เข้ารหัสเดียวกัน โค้ด v3 ใช้เมธอด decodePath() จากเนมสเปซ google.maps.geometry.encoding 

var polyline = new GPolyline.fromEncoded({
  points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
  levels: 'PPP',
  zoomFactor: 2,
  numLevels: 18,
  color: '#ff0000',
  opacity: 0.8,
  weight: 3
});

map.addOverlay(polyline);
 
var polyline = new google.maps.Polyline({
  path: google.maps.geometry.encoding.decodePath(
    'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
  strokeColor: '#FF0000',
  strokeOpacity: 0.5,
  strokeWeight: 3,
});

polyline.setMap(map);

รูปหลายเหลี่ยมจะกําหนดขอบเขตภายในลูปปิด ออบเจ็กต์ Polygon ประกอบด้วยชุดจุดในลําดับที่เรียงตามลําดับ คล้ายกับออบเจ็กต์ Polyline คลาส Polygon ของ v3 คล้ายกับคลาส GPolygon ของ v2 มาก ยกเว้นคุณไม่จําเป็นต้องระบุจุดเริ่มต้นที่ปลายเส้นทางซ้ำอีกเพื่อปิดลูป API v3 จะปิดรูปหลายเหลี่ยมโดยอัตโนมัติด้วยการวาดเส้นที่เชื่อมต่อพิกัดสุดท้ายกลับไปยังพิกัดแรก ข้อมูลโค้ดต่อไปนี้สร้างรูปหลายเหลี่ยมที่แสดงสามเหลี่ยมเบอร์มิวดา

var map = new GMap2(document.getElementById('map'));

map.setCenter(new GLatLng(24.886436, -70.268554), 5);

var bermudaTriangle = new GPolygon(
  [
    new GLatLng(25.774252, -80.190262),
    new GLatLng(18.466465, -66.118292),
    new GLatLng(32.321384, -64.75737),
    new GLatLng(25.774252, -80.190262)
  ],
  '#FF0000', 2, 0.8, '#FF0000', 0.35);

map.addOverlay(bermudaTriangle);
 
var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(24.886436, -70.268554),
  mapTypeId: google.maps.MapTypeId.TERRAIN,
  zoom: 5
});

var bermudaTriangle = new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
  ],
  strokeColor: '#FF0000',
  strokeWeight: 2,
  strokeOpacity: 0.8,
  fillColor: '#FF0000',
  fillOpacity: 0.35
});

bermudaTriangle.setMap(map);

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

map.addOverlay(polyline);
polyline.enableEditing();
 
polyline.setMap(map);
polyline.setEditable(true);

ดูความสามารถในการวาดขั้นสูงเพิ่มเติมได้ในคลังภาพวาดในเอกสารประกอบ v3

InfoWindow จะแสดงเนื้อหาในหน้าต่างที่ลอยอยู่เหนือแผนที่ ความแตกต่างที่สำคัญระหว่างวิดเจ็ตข้อมูลเวอร์ชัน 2 กับเวอร์ชัน 3 มีดังนี้

  • API เวอร์ชัน 2 รองรับ GInfoWindow เพียงรายการเดียวต่อแผนที่ แต่ API เวอร์ชัน 3 รองรับ InfoWindow หลายรายการพร้อมกันในแต่ละแผนที่
  • InfoWindow เวอร์ชัน 3 จะยังคงเปิดอยู่เมื่อคุณคลิกแผนที่ GInfoWindow ของ v2 จะปิดโดยอัตโนมัติเมื่อคุณคลิกแผนที่ คุณสามารถจําลองลักษณะการทํางานของ v2 ได้โดยการเพิ่ม click listener ในออบเจ็กต์ Map
  • API เวอร์ชัน 3 ไม่รองรับInfoWindowแบบแท็บในตัว

หากต้องการวางรูปภาพบนแผนที่ คุณควรใช้ออบเจ็กต์ GroundOverlay ตัวสร้างของ GroundOverlay นั้นเหมือนกันใน v2 และ v3 โดยพื้นฐานแล้ว โดยจะระบุ URL ของรูปภาพและขอบเขตของรูปภาพเป็นพารามิเตอร์

ตัวอย่างต่อไปนี้วางแผนที่โบราณของนวร์ก รัฐนิวเจอร์ซีย์บนแผนที่เป็นการวางซ้อน

var bounds = new GLatLngBounds(
    new GLatLng(40.716216, -74.213393),
    new GLatLng(40.765641, -74.139235));

var overlay = new GGroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

map.addOverlay(overlay);
 
var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(40.716216, -74.213393),
    new google.maps.LatLng(40.765641, -74.139235));

var overlay = new google.maps.GroundOverlay(
    'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    bounds);

overlay.setMap(map);

ประเภทแผนที่

แผนที่ที่มีให้ใช้งานใน v2 และ v3 จะแตกต่างกันเล็กน้อย แต่แผนที่พื้นฐานทุกประเภทจะใช้ได้ใน API ทั้ง 2 เวอร์ชัน โดยค่าเริ่มต้น v2จะใช้ไทล์แผนที่ถนน "วาด" มาตรฐาน อย่างไรก็ตาม v3 กำหนดให้ต้องระบุประเภทแผนที่ที่เฉพาะเจาะจงเมื่อสร้างออบเจ็กต์ google.maps.Map

แผนที่พื้นฐาน 4 ประเภทมีให้บริการทั้งในเวอร์ชัน 2 และ 3 ดังนี้

  • MapTypeId.ROADMAP (แทนที่ G_NORMAL_MAP) แสดงมุมมองแผนที่ถนน
  • MapTypeId.SATELLITE (แทนที่ G_SATELLITE_MAP) แสดงภาพถ่ายดาวเทียมของ Google Earth
  • MapTypeId.HYBRID (แทนที่ G_HYBRID_MAP) แสดงมุมมองปกติและมุมมองดาวเทียมผสมกัน
  • MapTypeId.TERRAIN (แทนที่ G_PHYSICAL_MAP) แสดงแผนที่ภูมิศาสตร์ตามข้อมูลภูมิประเทศ

ด้านล่างนี้คือตัวอย่าง v2 และ v3 การตั้งค่าแผนที่เป็นมุมมองภูมิประเทศ

map.setMapType(G_PHYSICAL_MAP);
    
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

Maps JavaScript API v3 ได้ทำการเปลี่ยนแปลงบางอย่างกับแผนที่ประเภทที่ใช้ไม่บ่อยด้วย ดังนี้

  • ไทล์แผนที่สำหรับวัตถุท้องฟ้าที่ไม่ใช่โลกไม่มีให้บริการเป็นประเภทแผนที่ใน v3 API แต่เข้าถึงได้ในรูปแบบแผนที่ที่กำหนดเองตามที่แสดงในตัวอย่างนี้
  • ไม่มีแผนที่ประเภทพิเศษใน v3 ที่จะมาแทนที่ประเภท G_SATELLITE_3D_MAP จาก v2 แต่คุณสามารถผสานรวมปลั๊กอิน Google Earth ในแผนที่ v3 ได้โดยใช้คลังนี้

ภาพถ่ายดาวเทียมอาจไม่พร้อมใช้งานในระดับการซูมสูงเสมอไป หากต้องการทราบระดับการซูมสูงสุดที่ใช้ได้ก่อนที่จะตั้งค่าระดับการซูม ให้ใช้คลาส google.maps.MaxZoomService คลาสนี้จะแทนที่เมธอด GMapType.getMaxZoomAtLatLng() จาก v2

var point = new GLatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);

map.getCurrentMapType().getMaxZoomAtLatLng(point,
  function(response) {
    if (response.status) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});
 
var myLatlng = new google.maps.LatLng(
    180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
  document.getElementById("map"),{
    zoom: 0,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
  myLatlng,
  function(response) {
    if (response.status == google.maps.MaxZoomStatus.OK) {
      map.setZoom(response.zoom);
    } else {
      alert("Error in Max Zoom Service.");
    }
});

เมื่อเปิดใช้ภาพถ่ายทางอากาศใน v3 การควบคุมจะคล้ายกับการควบคุม GLargeZoomControl3D ใน v2 โดยมีการควบคุมการหมุนเพิ่มเติมเพื่อหมุนไปยังทิศทางที่รองรับ

คุณติดตามเมืองที่มีภาพมุม 45° พร้อมให้บริการได้ในแผนที่นี้ เมื่อภาพมุม 45° พร้อมใช้งาน ระบบจะเพิ่มตัวเลือกเมนูย่อยลงในปุ่มดาวเทียมของ Maps API

เลเยอร์

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

API เวอร์ชัน 3 ให้สิทธิ์เข้าถึงเลเยอร์ต่างๆ เลเยอร์เหล่านี้ซ้อนทับกับคลาส v2 GLayer ในพื้นที่ต่อไปนี้

  • ออบเจ็กต์ KmlLayer จะแสดงผลองค์ประกอบ KML และ GeoRSS เป็นการวางซ้อน v3 ซึ่งเทียบเท่ากับเลเยอร์ GeoXml v2
  • ออบเจ็กต์ TrafficLayer จะแสดงผลเลเยอร์ซึ่งแสดงสภาพการจราจร คล้ายกับการวางซ้อน GTrafficOverlay เวอร์ชัน 2

เลเยอร์เหล่านี้แตกต่างจาก v2 ความแตกต่างมีอธิบายไว้ด้านล่าง เลเยอร์สามารถเพิ่มลงในแผนที่ได้โดยเรียกใช้ setMap() โดยส่งออบเจ็กต์ Map ที่จะแสดงเลเยอร์

ดูข้อมูลเพิ่มเติมเกี่ยวกับเลเยอร์ที่ได้รับการรองรับได้ในเอกสารประกอบเกี่ยวกับเลเยอร์

Maps JavaScript API รองรับรูปแบบข้อมูล KML และ GeoRSS สำหรับการแสดงข้อมูลทางภูมิศาสตร์ ไฟล์ KML หรือ GeoRSS ต้องเข้าถึงได้แบบสาธารณะหากคุณต้องการรวมไว้ในแผนที่ ใน v3 รูปแบบข้อมูลเหล่านี้จะแสดงโดยใช้อินสแตนซ์ของ KmlLayer ซึ่งมาแทนที่ออบเจ็กต์ GGeoXml จาก v2

API เวอร์ชัน 3 มีความยืดหยุ่นมากขึ้นเมื่อแสดงผล KML ซึ่งช่วยให้คุณซ่อน InfoWindows และแก้ไขการตอบสนองต่อการคลิกได้ ดูรายละเอียดเพิ่มเติมในเอกสารเลเยอร์ KML และ GeoRSS เวอร์ชัน 3

เมื่อแสดงผล KmlLayer ระบบจะใช้ข้อจำกัดด้านขนาดและความซับซ้อน โปรดดูรายละเอียดในเอกสารประกอบของ KmlLayer

ตัวอย่างต่อไปนี้เปรียบเทียบวิธีโหลดไฟล์ KML

geoXml = new GGeoXml(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');

map.addOverlay(geoXml);
 
var layer = new google.maps.KmlLayer(
  'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
    preserveViewport: true
});
layer.setMap(map);

v3 ให้คุณเพิ่มข้อมูลการจราจรแบบเรียลไทม์ (หากรองรับ) ลงในแผนที่ได้โดยใช้ออบเจ็กต์ TrafficLayer ข้อมูลการจราจรจะแสดงตามเวลาที่ส่งคำขอ ตัวอย่างต่อไปนี้แสดงข้อมูลการจราจรสำหรับลอสแอนเจลิส 

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();

var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
 
var map = new google.maps.Map(
    document.getElementById('map'), {
  center: new google.maps.LatLng(34.0492459, -118.241043),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  zoom: 13
});

var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

ต่างจาก v2 ที่จะไม่มีตัวเลือกสำหรับตัวสร้าง TrafficLayer ใน v3 เหตุการณ์ไม่พร้อมใช้งานใน v3

บริการ

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

Geocoding API ได้รับการอัปเกรดและปรับปรุงอย่างมาก รวมถึงเพิ่มฟีเจอร์ใหม่ๆ และเปลี่ยนแปลงวิธีแสดงข้อมูล

GClientGeocoder ใน API เวอร์ชัน 2 มี 2 วิธีที่แตกต่างกันในการเปลี่ยนที่อยู่เป็นพิกัดภูมิศาสตร์แบบย้อนกลับและแบบไปข้างหน้า รวมถึงวิธีอื่นๆ ในการส่งผลต่อวิธีเปลี่ยนที่อยู่เป็นพิกัดภูมิศาสตร์ ในทางตรงกันข้าม ออบเจ็กต์ Geocoder เวอร์ชัน 3 มีเพียงเมธอด geocode() เท่านั้น ซึ่งใช้ลิเทอรัลออบเจ็กต์ที่มีคำที่ป้อน (ในรูปแบบออบเจ็กต์ Geocoding Request) และเมธอดการเรียกกลับ Geocoding API จะแสดงผลลัพธ์การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับหรือแบบส่งต่อ ทั้งนี้ขึ้นอยู่กับว่าคำขอมีแอตทริบิวต์ address แบบข้อความหรือออบเจ็กต์ LatLng คุณกำหนดวิธีดำเนินการจับคู่พิกัดภูมิศาสตร์ได้โดยส่งฟิลด์เพิ่มเติมไปยังคำขอจับคู่พิกัดภูมิศาสตร์ ดังนี้

  • การใส่ address แบบข้อความจะทริกเกอร์การแปลงพิกัดภูมิศาสตร์แบบส่งต่อ ซึ่งเทียบเท่ากับการเรียกใช้เมธอด getLatLng()
  • การใส่ออบเจ็กต์ latLng จะทริกเกอร์การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ ซึ่งเทียบเท่ากับการเรียกใช้เมธอด getLocations()
  • การใส่แอตทริบิวต์ bounds จะเปิดใช้การปรับความถ่วงของวิวพอร์ต ซึ่งเทียบเท่ากับการเรียกใช้เมธอด setViewport()
  • การใส่แอตทริบิวต์ region จะเปิดใช้การถ่วงน้ำหนักรหัสตามภูมิภาค ซึ่งเทียบเท่ากับการเรียกใช้เมธอด setBaseCountryCode()

การระบุพิกัดภูมิศาสตร์ใน v3 จะแตกต่างจากคำตอบใน v2 อย่างมาก API เวอร์ชัน 3 จะใช้โครงสร้างที่เรียบง่ายกว่าซึ่งง่ายต่อการแยกวิเคราะห์แทนโครงสร้างที่ซ้อนกันซึ่งเวอร์ชัน 2 ใช้ นอกจากนี้ คำตอบเวอร์ชัน 3 ยังละเอียดยิ่งขึ้นอีกด้วย ผลลัพธ์แต่ละรายการมีคอมโพเนนต์การแก้ไขหลายรายการที่ช่วยให้เห็นภาพการแก้ปัญหาของผลลัพธ์แต่ละรายการได้ดีขึ้น

โค้ดต่อไปนี้จะนําที่อยู่แบบข้อความและแสดงผลลัพธ์แรกจากการจับคู่ที่อยู่ตามภูมิศาสตร์ 

var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
  'Unknown accuracy', 'country level accuracy',
  'region level accuracy', 'sub-region level accuracy',
  'town level accuracy', 'post code level accuracy',
  'street level accuracy', 'intersection level accuracy',
  'address level accuracy', 'premise level accuracy',
];

function geocode_result_handler(response) {
  if (!response || response.Status.code != 200) {
    alert('Geocoding failed. ' + response.Status.code);
  } else {
    var bounds = new GLatLngBounds(new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.south,
        response.Placemark[0].ExtendedData.LatLonBox.west
    ), new GLatLng(
        response.Placemark[0].ExtendedData.LatLonBox.north,
        response.Placemark[0].ExtendedData.LatLonBox.east
    ));
    map.setCenter(bounds.getCenter(),
        map.getBoundsZoomLevel(bounds));
    var latlng = new GLatLng(
        response.Placemark[0].Point.coordinates[1],
        response.Placemark[0].Point.coordinates[0]);
    infoPanel.innerHTML += '<p>1st result is <em>' +
        // No info about location type
        response.Placemark[0].address +
        '</em> of <em>' +
        AccuracyDescription[response.Placemark[0].
            AddressDetails.Accuracy] +
        '</em> at <tt>' + latlng + '</tt></p>';
    var marker_title = response.Placemark[0].address +
        ' at ' + latlng;
    map.clearOverlays();

    var marker = marker = new GMarker(
        latlng,
        {'title': marker_title}
    );
    map.addOverlay(marker);
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.getLocations(address, geocode_result_handler);
}

function initialize() {
  map = new GMap2(document.getElementById('map'));
  map.setCenter(new GLatLng(38, 15), 2);
  map.setUIToDefault();

  infoPanel = document.getElementById('info-panel');
}
 
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;

function geocode_result_handler(result, status) {
  if (status != google.maps.GeocoderStatus.OK) {
    alert('Geocoding failed. ' + status);
  } else {
    map.fitBounds(result[0].geometry.viewport);
    infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
        result[0].geometry.location_type.toLowerCase() +
        '</em> to <em>' +
        result[0].formatted_address + '</em> of types <em>' +
        result[0].types.join('</em>, <em>').replace(/_/, ' ') +
        '</em> at <tt>' + result[0].geometry.location +
        '</tt></p>';
    var marker_title = result[0].formatted_address +
        ' at ' + latlng;
    if (marker) {
      marker.setPosition(result[0].geometry.location);
      marker.setTitle(marker_title);
    } else {
      marker = new google.maps.Marker({
        position: result[0].geometry.location,
        title: marker_title,
        map: map
      });
    }
  }
}

function geocode_address() {
  var address = document.getElementById('input-text').value;
  infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
  geocoder.geocode({'address': address}, geocode_result_handler);
}

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(38, 15),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  infoPanel = document.getElementById('info-panel');
}

Maps JavaScript API v3 ใช้คลาส DirectionsService แทนคลาส GDirections จาก v2 เพื่อคำนวณเส้นทาง

เมธอด route() ใน v3 จะแทนที่ทั้งเมธอด load() และ loadFromWaypoints() จาก API เวอร์ชัน 2 เมธอดนี้ใช้ออบเจ็กต์ DirectionsRequest เดียวที่เป็นลิเทอรัลซึ่งมีคําที่ป้อน และเมธอด Callback เพื่อเรียกใช้เมื่อได้รับคําตอบ ตัวเลือกอาจระบุไว้ในลิเทอรัลออบเจ็กต์นี้ ซึ่งคล้ายกับลิเทอรัลออบเจ็กต์ GDirectionsOptions ใน v2

ใน Maps JavaScript API v3 งานการส่งคําขอเส้นทางแยกออกจากงานแสดงผลคําขอ ซึ่งตอนนี้จัดการด้วยคลาส DirectionsRenderer คุณผูกออบเจ็กต์ DirectionsRenderer กับแผนที่หรือออบเจ็กต์ DirectionsResult ใดก็ได้ผ่านเมธอด setMap() และ setDirections() เนื่องจากโปรแกรมแสดงผลเป็น MVCObject จึงจะตรวจหาการเปลี่ยนแปลงในพร็อพเพอร์ตี้และอัปเดตแผนที่เมื่อเส้นทางที่เกี่ยวข้องมีการเปลี่ยนแปลง

โค้ดต่อไปนี้แสดงวิธีขอเส้นทางเดินไปยังสถานที่ที่เฉพาะเจาะจงโดยใช้ทางเท้าจากที่อยู่ โปรดทราบว่ามีเพียง v3 เท่านั้นที่ให้เส้นทางเดินเท้าบนทางเท้าในสวนสัตว์ดับลินได้ 

var map;
var directions;
var directionsPanel;

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsPanel = document.getElementById("route");

  map = new GMap2(document.getElementById('map'));
  map.setCenter(origin, 10);
  map.setUIToDefault();

  directions = new GDirections(map, directionsPanel);

  directions.loadFromWaypoints(
      [origin, destination], {
        travelMode: 'G_TRAVEL_MODE_WALKING',
  });
}
 
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  var origin = new google.maps.LatLng(53.348172, -6.297285);
  var destination = new google.maps.LatLng(53.355502, -6.30557);
  directionsRenderer = new google.maps.DirectionsRenderer();

  map = new google.maps.Map(
      document.getElementById('map'), {
        center: origin,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsRenderer.setPanel(document.getElementById("route"));
  directionsRenderer.setMap(map);
  directionsService.route({
    origin: origin,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.WALKING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
    }
  });
}

Google Street View แสดงภาพมุมมอง 360 องศาแบบอินเทอร์แอกทีฟจากสถานที่ที่กำหนดภายในพื้นที่ให้บริการ API เวอร์ชัน 3 รองรับ Street View โดยตรงภายในเบราว์เซอร์ ต่างจากเวอร์ชัน 2 ที่ต้องอาศัยปลั๊กอิน Flash® เพื่อแสดงภาพ Street View

ระบบรองรับรูปภาพ Street View ผ่านการใช้ออบเจ็กต์ StreetViewPanorama ใน v3 หรือออบเจ็กต์ GStreetviewPanorama ใน v2 คลาสเหล่านี้มีอินเทอร์เฟซที่แตกต่างกัน แต่มีบทบาทเหมือนกัน ซึ่งก็คือเชื่อมต่อdivคอนเทนเนอร์กับภาพ Street View และให้คุณระบุตำแหน่งและ POV (จุดมอง) ของภาพพาโนรามา Street View 

function initialize() {
  var fenwayPark = new GLatLng(42.345573, -71.098326);
  panoramaOptions = {
    latlng: fenwayPark,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new GStreetviewPanorama(
      document.getElementById('pano'),
      panoramaOptions);

  GEvent.addListener(myPano, "error", handleNoFlash);
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert('Error: Your browser does not support Flash');
    return;
  }
}
 
function initialize() {
  var fenway = new google.maps.LatLng(42.345573, -71.098326);
  var panoramaOptions = {
    position: fenway,
    pov: {
      heading: 35,
      pitch: 5,
      zoom: 1
    }
  };

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'),
      panoramaOptions);
}

คุณสามารถเข้าถึงข้อมูล Street View ได้โดยตรงผ่านออบเจ็กต์ StreetViewService ใน v3 หรือออบเจ็กต์ GStreetviewClient ที่คล้ายกันใน v2 ทั้ง 2 แพลตฟอร์มมีอินเทอร์เฟซที่คล้ายกันในการดึงข้อมูลหรือตรวจสอบความพร้อมใช้งานของข้อมูล Street View และอนุญาตให้ค้นหาตามสถานที่หรือรหัสภาพพาโนรามา

ในเวอร์ชัน 3 ระบบจะเปิดใช้ Street View โดยค่าเริ่มต้น แผนที่จะปรากฏขึ้นพร้อมตัวควบคุม Pegman ของ Street View และ API จะใช้ div แผนที่ซ้ำเพื่อแสดงภาพพาโนรามาของ Street View โค้ดต่อไปนี้แสดงวิธีจําลองลักษณะการทํางานของ v2 โดยการแยกภาพพาโนรามาของ Street View ออกเป็น div แยกต่างหาก 

var marker;
var panoClient = new GStreetviewClient();

function initialize() {
  if (GBrowserIsCompatible()) {
    var myPano = new GStreetviewPanorama(
        document.getElementById('pano'));
    GEvent.addListener(myPano, 'error', handleNoFlash);
    var map = new GMap2(document.getElementById('map'));
    map.setCenter(new GLatLng(42.345573, -71.098326), 16);
    map.setUIToDefault();

    GEvent.addListener(map, 'click', function(overlay, latlng) {
      if (marker) {
        marker.setLatLng(latlng);
      } else {
        marker = new GMarker(latlng);
        map.addOverlay(marker);
      }
      var nearestPano = panoClient.getNearestPanorama(
          latlng, processSVData);
    });

    function processSVData(panoData) {
      if (panoData.code != 200) {
        alert("Panorama data not found for this location.");
      }
      var latlng = marker.getLatLng();
      var dLat = latlng.latRadians()
          - panoData.location.latlng.latRadians();
      var dLon = latlng.lngRadians()
          - panoData.location.latlng.lngRadians();
      var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
      var x = Math.cos(panoData.location.latlng.latRadians()) *
              Math.sin(latlng.latRadians()) -
              Math.sin(panoData.location.latlng.latRadians()) *
              Math.cos(latlng.latRadians()) * Math.cos(dLon);
      var bearing = Math.atan2(y, x) * 180 / Math.PI;

      myPano.setLocationAndPOV(panoData.location.latlng, {
        yaw: bearing
      });
    }

    function handleNoFlash(errorCode) {
      if (errorCode == FLASH_UNAVAILABLE) {
        alert('Error: Your browser does not support Flash');
        return;
      }
    }
  }
}
 
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();

function radians(degrees) { return Math.PI * degrees / 180.0 };

function initialize() {

  panorama = new google.maps.StreetViewPanorama(
      document.getElementById("pano"));

  map = new google.maps.Map(
      document.getElementById('map'), {
    center: new google.maps.LatLng(42.345573, -71.098326),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 16
  });

  google.maps.event.addListener(map, 'click', function(event) {
    if (!marker) {
      marker = new google.maps.Marker({
          position: event.latLng,
          map: map
      });
    } else {
      marker.setPosition(event.latLng);
    }
    sv.getPanoramaByLocation(event.latLng, 50, processSVData);
  });
}

function processSVData(panoData, status) {
  if (status == google.maps.StreetViewStatus.OK) {
    alert("Panorama data not found for this location.");
  }
  var bearing = google.maps.geometry.spherical.computeHeading(
      panoData.location.latLng, marker.getPosition());

  panorama.setPano(panoData.location.pano);

  panorama.setPov({
    heading: bearing,
    pitch: 0,
    zoom: 1
  });

  panorama.setVisible(true);
  marker.setMap(panorama);
}