Maps JavaScript API v2 จะใช้งานไม่ได้อีกต่อไปตั้งแต่วันที่ 26 พฤษภาคม 2021 ด้วยเหตุนี้ แผนที่ v2 ของเว็บไซต์จะหยุดทำงานและแสดงข้อผิดพลาด JavaScript หากต้องการใช้แผนที่บนเว็บไซต์ต่อไป ให้เปลี่ยนไปใช้ Maps JavaScript API v3 คู่มือนี้จะช่วยคุณ
ตลอดขั้นตอน
ภาพรวม
แอปพลิเคชันแต่ละรายการจะมีกระบวนการย้ายข้อมูลที่แตกต่างกันเล็กน้อย อย่างไรก็ตาม ทุกโปรเจ็กต์จะมีขั้นตอนเหมือนกันดังนี้
- รับคีย์ใหม่ ตอนนี้ Maps JavaScript API ใช้ Google Cloud Console เพื่อจัดการคีย์แล้ว หากคุณยังใช้คีย์ v2 อยู่ โปรดรับคีย์ API ใหม่ก่อนที่จะเริ่มการย้ายข้อมูล
- อัปเดต Bootstrap สำหรับ API ของคุณ แอปพลิเคชันส่วนใหญ่จะโหลด Maps JavaScript API v3 ด้วยรหัสต่อไปนี้
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- อัปเดตรหัสของคุณ จำนวนการเปลี่ยนแปลงที่ต้องการจะขึ้นอยู่กับแอปพลิเคชันของคุณ การเปลี่ยนแปลงทั่วไปมีดังนี้
- อ้างอิงเนมสเปซของ google.maps เสมอ ใน v3 โค้ด Maps JavaScript API ทั้งหมดจะจัดเก็บอยู่ในเนมสเปซ
google.maps.*
แทนเนมสเปซส่วนกลาง ออบเจ็กต์ส่วนใหญ่ก็มีการเปลี่ยนชื่อให้เป็นส่วนหนึ่งของกระบวนการนี้ด้วย ตัวอย่างเช่น ตอนนี้คุณจะโหลด google.maps.Map
แทน GMap2
- นำการอ้างอิงถึงวิธีการที่ล้าสมัยออก มีการนำวิธียูทิลิตีทั่วไปออกหลายรายการ เช่น
GDownloadURL
และ GLog
แทนที่ฟังก์ชันการทำงานนี้ด้วยไลบรารียูทิลิตีของบุคคลที่สาม หรือนำการอ้างอิงเหล่านี้ออกจากโค้ดของคุณ
- (ไม่บังคับ) เพิ่มไลบรารีลงในโค้ด มีฟีเจอร์หลายรายการที่มีการขยายสู่ไลบรารียูทิลิตี เพื่อให้แต่ละแอปต้องโหลดเฉพาะบางส่วนของ API ที่จะใช้เท่านั้น
- (ไม่บังคับ) กำหนดค่าโปรเจ็กต์เพื่อใช้ภายนอก v3
คุณสามารถใช้ภายนอก v3 เพื่อช่วยตรวจสอบโค้ดด้วยคอมไพเลอร์การปิด หรือเพื่อทริกเกอร์การเติมข้อความอัตโนมัติใน IDE
ดูข้อมูลเพิ่มเติมเกี่ยวกับ
การคอมไพล์ขั้นสูงและการซ่อนเนื้อหา
- ทดสอบและทำซ้ำ ถึงตอนนี้คุณจะยังคง
ยังมีงานต้องทำอีก แต่ข่าวดีคือคุณจะสามารถใช้แอปพลิเคชันแผนที่ v3 ใหม่ได้!
การเปลี่ยนแปลงใน Maps JavaScript API เวอร์ชัน 3
ก่อนวางแผนการย้ายข้อมูล คุณควรใช้เวลาทำความเข้าใจความแตกต่างระหว่าง Maps JavaScript API v2 กับ Maps JavaScript API v3 Maps JavaScript API เวอร์ชันใหม่ล่าสุดสร้างขึ้นใหม่ทั้งหมด โดยเน้นเทคนิคการเขียนโปรแกรม JavaScript ที่ทันสมัย การใช้ไลบรารีที่เพิ่มขึ้น และ API ที่ใช้งานง่าย
มีการเพิ่มฟีเจอร์ใหม่ๆ มากมายใน API และมีการเปลี่ยนแปลงหรือนำฟีเจอร์ที่คุ้นเคยหลายรายการออก ส่วนนี้จะเน้นที่ความแตกต่างหลักบางประการระหว่าง 2 รุ่นนี้
การเปลี่ยนแปลงบางอย่างใน API v3 ได้แก่
- ไลบรารีหลักที่ปรับปรุงประสิทธิภาพ ฟังก์ชันเสริมหลายรายการได้ย้ายไปอยู่ในไลบรารีเพื่อช่วยลดเวลาในการโหลดและการแยกวิเคราะห์สำหรับ Core API ซึ่งช่วยให้แผนที่โหลดได้อย่างรวดเร็วในทุกอุปกรณ์
- ปรับปรุงประสิทธิภาพของฟีเจอร์หลายรายการ เช่น การแสดงผลรูปหลายเหลี่ยมและ
ตำแหน่งเครื่องหมาย
- แนวทางใหม่ของขีดจำกัดการใช้งานฝั่งไคลเอ็นต์เพื่อรองรับที่อยู่ที่แชร์ซึ่งพร็อกซีอุปกรณ์เคลื่อนที่และไฟร์วอลล์ขององค์กรใช้ได้ดียิ่งขึ้น
- เพิ่มการรองรับเบราว์เซอร์ที่ทันสมัยและเบราว์เซอร์ในอุปกรณ์เคลื่อนที่หลายรายการ การรองรับ Internet Explorer 6 ถูกนำออกแล้ว
- นำคลาสตัวช่วยสำหรับวัตถุประสงค์ทั่วไปออก (
GLog
หรือ
GDownloadUrl
) ปัจจุบันมีไลบรารี JavaScript ที่ยอดเยี่ยมจำนวนมากที่มีฟังก์ชันการทำงานคล้ายกัน เช่น Closure หรือ jQuery
- การติดตั้งใช้งาน Street View HTML5 ที่จะโหลดบนอุปกรณ์เคลื่อนที่
- ภาพพาโนรามา Street View ที่กำหนดเองด้วยรูปภาพของคุณเอง ซึ่งช่วยให้คุณสามารถแชร์ภาพพาโนรามาของลานสกี บ้านที่ประกาศขาย หรือสถานที่ที่น่าสนใจอื่นๆ ได้
- การปรับแต่งแผนที่ที่มีการจัดรูปแบบ ซึ่งให้คุณเปลี่ยนการแสดงองค์ประกอบบนแผนที่ฐานให้เข้ากับสไตล์ภาพที่เป็นเอกลักษณ์ของคุณ
- รองรับบริการใหม่หลายรายการ เช่น ElevationService และ Distance Matrix
- บริการเส้นทางที่ปรับปรุงใหม่จะแสดงเส้นทางทางเลือก การเพิ่มประสิทธิภาพเส้นทาง (วิธีแก้ปัญหาโดยประมาณของ
ปัญหาเกี่ยวกับการเดินทางของพนักงานขาย) เส้นทางจักรยาน (ที่มี
เลเยอร์จักรยาน) เส้นทางขนส่งสาธารณะ และ
เส้นทางที่ลากได้
- รูปแบบการเข้ารหัสพิกัดภูมิศาสตร์ที่อัปเดตซึ่งมีข้อมูลประเภทที่แม่นยำมากกว่าค่า
accuracy
จาก Geoที่อยู่ในรายการ API v2
- การรองรับหน้าต่างข้อมูลหลายรายการในแผนที่เดียว
การอัปเกรดแอปพลิเคชันของคุณ
คีย์ใหม่ของคุณ
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 v3 ยังคงรองรับรหัสไคลเอ็นต์และไม่จำเป็นต้องผ่านกระบวนการอัปเกรดคีย์
การโหลด API
การแก้ไขโค้ดครั้งแรกที่คุณจะต้องทำกับโค้ดเกี่ยวข้องกับวิธีโหลด API ในเวอร์ชัน 2 คุณโหลด Maps JavaScript API ผ่านคำขอที่ส่งไปยัง http://maps.google.com/maps
หากโหลด Maps JavaScript API v3 คุณจะต้องทำการเปลี่ยนแปลงต่อไปนี้
- โหลด API จาก
//maps.googleapis.com/maps/api/js
- นำพารามิเตอร์
file
ออก
- อัปเดตพารามิเตอร์
key
ด้วยคีย์ v3 ใหม่ ลูกค้า Google Maps API for Work ควรใช้พารามิเตอร์ client
- (แพ็กเกจพรีเมียมของ Google Maps Platform เท่านั้น) ตรวจสอบว่าระบุพารามิเตอร์
client
ตามที่อธิบายไว้ใน
คู่มือนักพัฒนาซอฟต์แวร์แพ็กเกจพรีเมียมของ Google Maps Platform
- นําพารามิเตอร์
v
ออกเพื่อขอเวอร์ชันที่เผยแพร่ล่าสุด หรือเปลี่ยนค่าตามรูปแบบการกำหนดเวอร์ชัน v3
- (ไม่บังคับ) แทนที่พารามิเตอร์
hl
ด้วย language
และเก็บค่าไว้
- (ไม่บังคับ) เพิ่มพารามิเตอร์
libraries
เพื่อโหลดไลบรารีที่ไม่บังคับ
ในกรณีที่เรียบง่ายที่สุด v3 Bootstrap จะระบุเฉพาะพารามิเตอร์คีย์ 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>
ตัวอย่างด้านล่างเป็นคำขอที่เทียบเท่าสำหรับเวอร์ชัน 3
<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" อาจทำงานได้ไม่สมบูรณ์ แต่ก็เป็นไปตามกฎทั่วไปที่ควรใช้เมื่อตรวจสอบโค้ด ด้านล่างนี้คือตัวอย่างบางส่วนของคลาสที่เทียบเท่าในเวอร์ชัน 2 และ 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 v3 ทำงานเหมือนกับฟังก์ชันส่วนใหญ่ในเวอร์ชัน 2 อย่างไรก็ตาม มีบางคลาสที่ไม่รองรับอีกต่อไป ในการย้ายข้อมูล คุณควรแทนที่คลาสเหล่านี้ด้วยไลบรารียูทิลิตีของบุคคลที่สามหรือนำการอ้างอิงเหล่านี้ออกจากโค้ดของคุณ มีไลบรารี JavaScript ที่ยอดเยี่ยมจำนวนมากที่มีฟังก์ชันการทำงานคล้ายกัน เช่น Closure หรือ jQuery
คลาสต่อไปนี้ไม่มี Maps JavaScript API v3 พร้อมกัน
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
การเปรียบเทียบโค้ด
มาเปรียบเทียบแอปพลิเคชัน 2 รายการง่ายๆ ที่เขียนด้วย API v2 และ v3
<!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
- ขณะนี้คุณสมบัติจะโหลดผ่านคลาสตัวเลือก ในตัวอย่างข้างต้น เราตั้งค่าพร็อพเพอร์ตี้ 3 รายการที่จำเป็นต่อการโหลดแผนที่ ได้แก่
center
, zoom
และ mapTypeId
ผ่านออบเจ็กต์ MapOptions
ในบรรทัด
- UI เริ่มต้นจะเปิดอยู่โดยค่าเริ่มต้นใน v3 คุณปิดใช้ฟีเจอร์นี้ได้โดยตั้งค่าพร็อพเพอร์ตี้
disableDefaultUI
เป็น "จริง" ในออบเจ็กต์ MapOptions
สรุป
ถึงตอนนี้ คุณจะได้ทราบถึงประเด็นสำคัญๆ ที่เกี่ยวข้องกับการย้ายข้อมูลจาก Maps JavaScript API เวอร์ชัน 2 เป็นเวอร์ชัน 3 กันไปแล้ว
ยังมีข้อมูลเพิ่มเติมที่คุณอาจจำเป็นต้องทราบอีก แต่จะขึ้นอยู่กับใบสมัครของคุณ ในส่วนต่อไปนี้ เราได้รวมวิธีการย้ายข้อมูลสำหรับกรณีเฉพาะที่คุณอาจพบ นอกจากนี้ ยังมีแหล่งข้อมูลอื่นๆ อีกหลายรายการที่อาจเป็นประโยชน์ในระหว่างกระบวนการอัปเกรด
หากมีปัญหาหรือข้อสงสัยเกี่ยวกับบทความนี้ โปรดใช้ลิงก์ส่งความคิดเห็นที่ด้านบนของหน้านี้
ส่วนนี้แสดงการเปรียบเทียบโดยละเอียดของฟีเจอร์ยอดนิยมสำหรับทั้ง v2 และ v3 ของ Maps JavaScript API แต่ละส่วนของข้อมูลอ้างอิงออกแบบมาให้อ่านแยกกัน เราขอแนะนำว่าคุณไม่ควรอ่านข้อมูลอ้างอิงนี้ทั้งหมด แต่ให้ใช้เนื้อหานี้เพื่อช่วยในการย้ายข้อมูลเป็นกรณีๆ ไป
- เหตุการณ์ - การลงทะเบียนและการจัดการเหตุการณ์
- การควบคุม - การควบคุมตัวควบคุมทิศทางที่ปรากฏในแผนที่
- การวางซ้อน - การเพิ่มและการแก้ไขวัตถุใน
แผนที่
- ประเภทแผนที่ - ชิ้นส่วนแผนที่ฐาน
- เลเยอร์ - การเพิ่มและแก้ไขเนื้อหาเป็นกลุ่ม เช่น เลเยอร์ KML หรือเลเยอร์การจราจร
- บริการ - การทำงานร่วมกับบริการพิกัดภูมิศาสตร์ เส้นทาง หรือบริการ Street View ของ Google
กิจกรรม
โมเดลเหตุการณ์สำหรับ Maps JavaScript API v3 นั้นคล้ายกับที่ใช้ใน v2 แม้ว่าจะมีการเปลี่ยนแปลงไปอย่างมาก
เหตุการณ์ใหม่สำหรับการรองรับ MVC
API v3 จะเพิ่มเหตุการณ์ประเภทใหม่เพื่อแสดงการเปลี่ยนแปลงสถานะ 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 เหตุการณ์ออกเมื่อไม่จำเป็นต้องใช้อีกต่อไป การนำ Listener เหตุการณ์ออกจะทำงานในลักษณะเดียวกันใน v2 และ v3 ดังนี้
- เมื่อคุณสร้าง Listener เหตุการณ์ ระบบจะแสดงผลออบเจ็กต์ทึบแสง (GEventListener ใน v2, MapsEventListener ใน v3)
- เมื่อต้องการนำ Listener เหตุการณ์ออก ให้ส่งออบเจ็กต์นี้ไปยังเมธอด
removeListener()
(GEvent.removeListener()
ใน v2 หรือ google.maps.event.removeListener()
ใน v3) เพื่อนำ Listener เหตุการณ์ออก
กำลังฟังเหตุการณ์ DOM
หากต้องการจับภาพและตอบสนองต่อเหตุการณ์ DOM (Document Object Model) v3 จะระบุเมธอดแบบคงที่ google.maps.event.addDomListener()
ซึ่งเทียบเท่ากับเมธอด GEvent.addDomListener()
ใน v2
การใช้อาร์กิวเมนต์ที่ส่งต่อในเหตุการณ์
เหตุการณ์ 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
ประเภทด้วย API v3
- API v3 รองรับประเภทแผนที่เพิ่มเติม รวมถึงแผนที่ภูมิประเทศและความสามารถในการเพิ่มประเภทแผนที่ที่กำหนดเอง
- การควบคุมลำดับชั้น v2
GHierarchicalMapTypeControl
ใช้ไม่ได้อีกต่อไป
คุณได้ผลลัพธ์ที่คล้ายกันได้โดยใช้ตัวควบคุม google.maps.MapTypeControlStyle.HORIZONTAL_BAR
- เลย์เอาต์แนวนอนที่
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 ช่วยให้คุณสร้างตัวควบคุมทิศทางที่กำหนดเองได้
หากต้องการปรับแต่งการควบคุมด้วย API v2 คุณจะต้องคลาสย่อยของคลาส GControl
และกำหนดเครื่องจัดการสำหรับเมธอด initialize()
และ getDefaultPosition()
ไม่มีสิ่งที่เทียบเท่ากับคลาส GControl
ใน v3 แต่การควบคุมจะแสดงเป็นองค์ประกอบ DOM หากต้องการเพิ่มตัวควบคุมที่กำหนดเองด้วย v3 API ให้สร้างโครงสร้าง DOM สำหรับการควบคุมในเครื่องมือสร้างเป็นรายการย่อยของ Node
(เช่น องค์ประกอบ <div>
) และเพิ่ม Listener เหตุการณ์เพื่อจัดการเหตุการณ์ 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 แต่จะมีการจัดการแตกต่างกัน
มีการเพิ่มและนำการวางซ้อนใน API v2 ออกจากแผนที่โดยใช้เมธอด addOverlay()
และ removeOverlay()
ของออบเจ็กต์ GMap2
ในเวอร์ชัน 3 คุณจะกำหนดแผนที่ให้กับการวางซ้อนผ่านพร็อพเพอร์ตี้ map
ของคลาสตัวเลือกการวางซ้อนที่เกี่ยวข้อง
คุณยังอาจเพิ่มหรือนำการวางซ้อนออกได้โดยตรง โดยเรียกใช้เมธอด setMap()
ของออบเจ็กต์การวางซ้อน และระบุแผนที่ที่ต้องการ การตั้งค่าคุณสมบัติของแผนที่เป็น null
จะนำการวางซ้อนออก
ไม่มีเมธอด clearOverlays()
ใน v3
หากต้องการจัดการชุดการวางซ้อน คุณควรสร้างอาร์เรย์เพื่อเก็บการวางซ้อน เมื่อใช้อาร์เรย์นี้ คุณจะสามารถเรียกใช้ setMap()
บนการวางซ้อนแต่ละรายการในอาร์เรย์ (ส่งผ่าน null
หากต้องการนำออก)
เครื่องหมายที่ลากได้
ตามค่าเริ่มต้น เครื่องหมายสามารถคลิกได้แต่ลากไม่ได้ ตัวอย่าง 2 ตัวอย่างต่อไปนี้เพิ่มเครื่องหมายที่ลากได้
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
API v3 จะช่วยให้ขั้นตอนนี้ง่ายขึ้นเล็กน้อย
เพียงตั้งค่าพร็อพเพอร์ตี้ icon
ของเครื่องหมายเป็น URL ของรูปภาพที่กำหนดเอง และ API จะกำหนดขนาดไอคอนโดยอัตโนมัติ
Maps JavaScript API ยังรองรับไอคอนที่ซับซ้อนด้วย
ไอคอนที่ซับซ้อนอาจมีชิ้นส่วนหลายชิ้น รูปร่างที่ซับซ้อน หรือระบุ "ลำดับการซ้อน" ของวิธีการแสดงรูปภาพเมื่อเทียบกับการวางซ้อนอื่นๆ หากต้องการเพิ่มรูปร่างไปยังเครื่องหมายใน v2 คุณต้องระบุพร็อพเพอร์ตี้เพิ่มเติมในแต่ละอินสแตนซ์ GIcon
และส่งรายการนี้เป็นตัวเลือกไปยังเครื่องมือสร้าง GMarker
ใน v3 ไอคอนที่ระบุในลักษณะนี้ควรตั้งค่าพร็อพเพอร์ตี้ icon
เป็นออบเจ็กต์ประเภท Icon
ไม่สนับสนุนเงาของเครื่องหมายใน v3
ตัวอย่างต่อไปนี้แสดงธงชายหาดที่หาดบอนไดในออสเตรเลีย โดยส่วนที่โปร่งใสของไอคอนไม่สามารถคลิกได้
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 นั้นคล้ายกับคลาส v2 GPolygon
มาก แต่มีข้อยกเว้นที่สำคัญคือคุณไม่ต้องพิมพ์จุดยอดมุมเริ่มต้นซ้ำในตอนท้ายของเส้นทางเพื่อปิดการวนซ้ำ v3 API จะปิดรูปหลายเหลี่ยมโดยอัตโนมัติด้วยการวาดเส้นโครงร่างที่เชื่อมพิกัดสุดท้ายกลับไปที่พิกัดแรก ข้อมูลโค้ดต่อไปนี้จะสร้างรูปหลายเหลี่ยมที่แสดงถึงสามเหลี่ยมเบอร์มิวดา
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);
หากต้องการดูความสามารถในการวาดภาพขั้นสูงเพิ่มเติม โปรดดูไลบรารีภาพวาดในเอกสารประกอบเวอร์ชัน 3
หน้าต่างข้อมูล
InfoWindow
แสดงเนื้อหาในหน้าต่างแบบลอยเหนือแผนที่ ข้อแตกต่างที่สำคัญระหว่างหน้าต่างข้อมูล v2 และ v3 ได้แก่
- API v2 รองรับ
GInfoWindow
ต่อแมปเท่านั้น ขณะที่ API v3 รองรับ InfoWindow
พร้อมกันหลายรายการในแต่ละแมป
InfoWindow
v3 จะยังคงเปิดอยู่เมื่อคุณคลิกแผนที่ GInfoWindow
v2 จะปิดโดยอัตโนมัติเมื่อคุณคลิกแผนที่ คุณจำลองลักษณะการทำงาน v2 ได้โดยการเพิ่ม Listener click
ในออบเจ็กต์ Map
- v3 API ไม่รองรับในตัวสำหรับ
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 ทั้งสองเวอร์ชัน โดยค่าเริ่มต้น v2
จะใช้ชิ้นส่วนแผนที่โรดแมปแบบมาตรฐาน อย่างไรก็ตาม v3 กำหนดให้ต้องระบุประเภทแผนที่ที่เจาะจงเมื่อสร้างออบเจ็กต์ google.maps.Map
ประเภทแผนที่ทั่วไป
แผนที่พื้นฐาน 4 ประเภทพร้อมใช้งานในทั้ง v2 และ v3:
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 ได้ทำการเปลี่ยนแปลงบางอย่างกับประเภทแผนที่ที่พบไม่บ่อย ดังนี้
- ชิ้นส่วนแผนที่สำหรับวัตถุท้องฟ้าที่ไม่ใช่ Earth แสดงเป็นประเภทแผนที่ใน 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 v3 ให้สิทธิ์การเข้าถึงเลเยอร์ต่างๆ เลเยอร์เหล่านี้ทับซ้อนกับคลาส GLayer
v2 ในพื้นที่ต่อไปนี้
-
ออบเจ็กต์
KmlLayer
แสดงผลองค์ประกอบ KML และ GeoRSS เป็นการวางซ้อน v3 ซึ่งเทียบเท่ากับเลเยอร์ v2 GeoXml
- ออบเจ็กต์
TrafficLayer
แสดงเลเยอร์ที่แสดงสภาพการจราจร คล้ายกับการวางซ้อน GTrafficOverlay
v2
เลเยอร์เหล่านี้แตกต่างจากเวอร์ชัน 2 ดูความแตกต่างได้ที่ด้านล่าง สามารถเพิ่มลงในแผนที่โดยการเรียก setMap()
โดยส่งผ่านออบเจ็กต์ Map
เพื่อแสดงเลเยอร์
ดูข้อมูลเพิ่มเติมเกี่ยวกับเลเยอร์ที่รองรับได้ในเอกสารประกอบเกี่ยวกับเลเยอร์
เลเยอร์ KML และ GeoRSS
Maps JavaScript API รองรับรูปแบบข้อมูล KML และ GeoRSS สำหรับการแสดงข้อมูลทางภูมิศาสตร์ ไฟล์ KML หรือ GeoRSS ต้องเข้าถึงได้แบบสาธารณะหากต้องการรวมไว้ในแผนที่ ใน v3 รูปแบบข้อมูลเหล่านี้จะแสดงโดยใช้อินสแตนซ์ของ KmlLayer
ซึ่งจะแทนที่ออบเจ็กต์ GGeoXml
จาก v2
v3 API มีความยืดหยุ่นมากขึ้นเมื่อแสดงภาพ KML ซึ่งทำให้คุณระงับ InfoWindows และแก้ไขการตอบสนองการคลิกได้ ดูรายละเอียดเพิ่มเติมในเอกสารประกอบเกี่ยวกับเลเยอร์ KML และ GeoRSS v3
เมื่อแสดงผล 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);
ตัวสร้าง TrafficLayer
ใน v3 จะไม่มีตัวเลือกสำหรับสร้าง ซึ่งต่างจาก v2 ไม่มีเหตุการณ์ใน v3
บริการ
การระบุพิกัดทางภูมิศาสตร์
Maps JavaScript API มีออบเจ็กต์ geocoder
สำหรับที่อยู่ที่ระบุพิกัดทางภูมิศาสตร์จากข้อมูลที่ผู้ใช้ป้อนแบบไดนามิก หากคุณต้องการเข้ารหัสพิกัดภูมิศาสตร์ที่อยู่คงที่ซึ่งเป็นที่อยู่ที่รู้จัก โปรดดูเอกสารประกอบเกี่ยวกับ Geocoding API
API การระบุพิกัดทางภูมิศาสตร์ได้รับการอัปเกรดและปรับปรุงอย่างมาก รวมถึงเพิ่มฟีเจอร์ใหม่ๆ และเปลี่ยนวิธีแสดงข้อมูล
GClientGeocoder
ใน API v2 มีวิธีการระบุพิกัดทางภูมิศาสตร์แบบไปข้างหน้าและย้อนกลับ 2 วิธี รวมถึงวิธีการอื่นๆ ที่มีผลกับประสิทธิภาพในการเข้ารหัสพิกัดภูมิศาสตร์ ในทางตรงกันข้าม ออบเจ็กต์ Geocoder
v3 จะมีเมธอด geocode()
เท่านั้น ซึ่งจะใช้ Object Literal ที่มีคำอินพุต (ในรูปแบบของออบเจ็กต์คำขอการระบุพิกัดทางภูมิศาสตร์) และวิธีเรียกกลับ Geocode API จะแสดงการตอบสนองที่เข้ารหัสพิกัดภูมิศาสตร์แบบไปข้างหน้าหรือย้อนกลับ โดยขึ้นอยู่กับว่าคำขอมีแอตทริบิวต์ address
ที่เป็นข้อความหรือออบเจ็กต์ LatLng
คุณควบคุมการทำงานของการระบุพิกัดทางภูมิศาสตร์ได้โดยส่งช่องเพิ่มเติมไปยังคำขอการระบุพิกัดทางภูมิศาสตร์ ดังนี้
- การใส่ข้อความ
address
จะทริกเกอร์การระบุพิกัดทางภูมิศาสตร์ไปข้างหน้า ซึ่งเทียบเท่ากับการเรียกใช้เมธอด getLatLng()
- การรวมออบเจ็กต์
latLng
จะทริกเกอร์การเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ ซึ่งเทียบเท่ากับการเรียกใช้เมธอด getLocations()
- การรวมแอตทริบิวต์
bounds
จะเปิดใช้การให้น้ำหนักวิวพอร์ต ซึ่งเทียบเท่ากับการเรียกใช้เมธอด setViewport()
- การรวมแอตทริบิวต์
region
จะเปิดใช้การให้น้ำหนักรหัสภูมิภาค ซึ่งเทียบเท่ากับการเรียกใช้เมธอด setBaseCountryCode()
การตอบกลับที่มีการเข้ารหัสพิกัดภูมิศาสตร์ใน v3 แตกต่างจากการตอบกลับ V2 อย่างมาก v3 API จะแทนที่โครงสร้างที่ซ้อนกันซึ่ง v2 ใช้ด้วยโครงสร้างที่เรียบง่ายซึ่งแยกวิเคราะห์ได้ง่ายขึ้น นอกจากนี้ การตอบกลับ V3 จะให้รายละเอียดมากขึ้น ผลการค้นหาแต่ละรายการมีคอมโพเนนต์ที่อยู่หลายรายการ ซึ่งช่วยให้เห็นภาพความละเอียดของผลการค้นหาแต่ละรายการได้ดีขึ้น
โค้ดต่อไปนี้จะมีที่อยู่แบบข้อความและแสดงผลลัพธ์แรกจากการระบุพิกัดทางภูมิศาสตร์
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 จะแทนที่คลาส GDirections
จาก v2 ด้วยคลาส DirectionsService
ในการคำนวณเส้นทาง
เมธอด route()
ใน v3 จะแทนที่ทั้งเมธอด load()
และ loadFromWaypoints()
จาก API v2 เมธอดนี้จะใช้ออบเจ็กต์ DirectionsRequest
รายการเดียวที่มีคำที่ป้อนและเมธอดโค้ดเรียกกลับเพื่อดำเนินการเมื่อได้รับคำตอบ โดยคุณมีตัวเลือกใน Object Literal นี้ ซึ่งคล้ายกับ Object Literal ของ GDirectionsOptions
ใน v2
ใน Maps JavaScript API v3 งานการส่งคำขอเส้นทางได้แยกออกจากงานการแสดงผลคำขอ ซึ่งตอนนี้ได้รับการจัดการด้วยคลาส DirectionsRenderer
คุณจะเชื่อมโยงออบเจ็กต์ DirectionsRenderer
กับแมปหรือออบเจ็กต์ DirectionsResult
ใดก็ได้ผ่านเมธอด setMap()
และ setDirections()
เนื่องจากโหมดแสดงภาพเป็น MVCObject
จึงจะตรวจจับการเปลี่ยนแปลงคุณสมบัติและอัปเดตแผนที่เมื่อเส้นทางที่เกี่ยวข้องมีการเปลี่ยนแปลง
โค้ดต่อไปนี้แสดงวิธีขอเส้นทางเดินเท้าไปยังสถานที่ที่เจาะจงโดยใช้ทางเท้าจากที่อยู่ โปรดทราบว่ามีเพียง v3 เท่านั้นที่ระบุเส้นทางเดินเท้าในสวนสัตว์ Dublin's Zoo ได้
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);
}
});
}
Street View
โดย Google Street View จะแสดงมุมมอง 360° แบบอินเทอร์แอกทีฟจากตำแหน่งที่กำหนดไว้ภายในพื้นที่ที่ครอบคลุม API v3 รองรับ
Street View ภายในเบราว์เซอร์ ต่างจาก v2 ที่ต้องใช้
ปลั๊กอิน 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 อุปกรณ์ทั้งสองมีอินเทอร์เฟซที่คล้ายกันสำหรับเรียกดูหรือตรวจสอบความพร้อมใช้งานของข้อมูล Street View และอนุญาตให้ค้นหาตามตำแหน่งหรือรหัสพาโนรามา
ในเวอร์ชัน 3 จะมีการเปิดใช้ Street View โดยค่าเริ่มต้น แผนที่จะปรากฏขึ้นพร้อมกับการควบคุมเพ็กแมนของ Street View และ API จะใช้ div ของแผนที่อีกครั้งเพื่อแสดงภาพพาโนรามาของ StreetView โค้ดต่อไปนี้แสดงวิธีจำลองลักษณะการทำงาน 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);
}