บริการการเข้ารหัสพิกัดภูมิศาสตร์

หมายเหตุ: ไลบรารีฝั่งเซิร์ฟเวอร์

หน้านี้อธิบายบริการฝั่งไคลเอ็นต์ที่ใช้ได้กับ Maps JavaScript API หากต้องการทํางานกับบริการเว็บ Google Maps บนเซิร์ฟเวอร์ โปรดดูไคลเอ็นต์ Node.js สําหรับบริการ Google Maps นอกจากนี้ หน้าเว็บที่ลิงก์ดังกล่าวยังแสดงไคลเอ็นต์ Java, ไคลเอ็นต์ Python และไคลเอ็นต์ Go สําหรับบริการ Google Maps ด้วย

ภาพรวม

โปรดดูข้อมูลอ้างอิงของ Maps JavaScript API ด้วย: Geocoder

การเข้ารหัสพิกัดภูมิศาสตร์ คือกระบวนการแปลงที่อยู่ (เช่น "1600 Amphitheatre Parkway, Mountain View, CA") เป็นพิกัดทางภูมิศาสตร์ (เช่น ละติจูด 37.423021 และลองจิจูด -122.083739) ซึ่งคุณใช้วางเครื่องหมายหรือวางตําแหน่งแผนที่ได้

การเข้ารหัสภูมิศาสตร์ย้อนกลับ คือขั้นตอนการแปลงพิกัดภูมิศาสตร์เป็นที่อยู่ที่มนุษย์อ่านได้ (ดูการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ (การค้นหาที่อยู่))

นอกจากนี้ คุณยังใช้ไวลด์การ์ดเพื่อค้นหาที่อยู่ของรหัสสถานที่ที่ให้ไว้ได้ด้วย

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

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

ก่อนใช้บริการการเข้ารหัสพิกัดภูมิศาสตร์ใน Maps JavaScript API ก่อนอื่นให้ตรวจสอบว่า Geoแม้ว่า API เปิดใช้งานใน Google Cloud Console ซึ่งเป็นโปรเจ็กต์เดียวกับที่คุณตั้งค่าสําหรับ Maps JavaScript API

วิธีดูรายการ API ที่เปิดใช้

1. ไปที่ Google Cloud Console
2. คลิกปุ่มเลือกโปรเจ็กต์ แล้วเลือกโปรเจ็กต์เดียวกับที่ตั้งค่าไว้สําหรับ Maps JavaScript API แล้วคลิกเปิด
3. ค้นหา Geoโค้ด API จากรายการ API บนหน้าแดชบอร์ด
4. หากเห็น API ในรายการ แสดงว่าทุกอย่างพร้อมแล้ว หาก ไม่ แสดงอยู่ใน API ให้เปิดใช้
   1. ที่ด้านบนของหน้า ให้เลือกเปิดใช้ API เพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
   2. ค้นหา Geocoding API แล้วเลือกจากรายการผลลัพธ์
   3. เลือกเปิดใช้ เมื่อเสร็จสิ้นกระบวนการแล้ว Geosetting API จะปรากฏในรายการ API บนหน้าแดชบอร์ด

ราคาและนโยบาย

การกำหนดราคา

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

นโยบาย

การใช้บริการการเข้ารหัสพิกัดภูมิศาสตร์ต้องเป็นไปตามนโยบายที่อธิบายเกี่ยวกับ Geocoding API

คําขอการเข้ารหัสพิกัดภูมิศาสตร์

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

คุณเข้าถึงบริการการเข้ารหัสพิกัดภูมิศาสตร์ของ Google Maps API ภายในโค้ดของคุณผ่านทางออบเจ็กต์เครื่องมือสร้าง google.maps.Geocoder เมธอด Geocoder.geocode() เริ่มคําขอไปยังบริการการเข้ารหัสพิกัดภูมิศาสตร์ โดยการส่งผ่านค่าออบเจ็กต์ GeocoderRequest ที่มีข้อกําหนดการป้อนข้อมูลและวิธีเรียกกลับเพื่อดําเนินการเมื่อได้รับการตอบกลับ

ออบเจ็กต์ตามจริงของ GeocoderRequest จะมีช่องต่อไปนี้

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

พารามิเตอร์ที่จําเป็น: คุณต้องกรอกข้อมูลในช่องต่อไปนี้ 1 ช่องเท่านั้น

• address — ที่อยู่ที่ต้องการให้ระบบเข้ารหัส
  หรือ
  location — LatLng (หรือ LatLngLiteral) ที่คุณต้องการรับที่อยู่ที่มนุษย์อ่านได้ใกล้ที่สุด โปรแกรมเข้ารหัสโดเมนจะทําหน้าที่เข้ารหัสย้อนกลับ ดูข้อมูลเพิ่มเติมที่การเข้ารหัสแบบถอยหลัง
  หรือ
  placeId — รหัสสถานที่ของสถานที่ที่คุณต้องการรับที่อยู่ที่ใกล้ที่สุดที่มนุษย์อ่านได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการดึงข้อมูลที่อยู่สําหรับรหัสสถานที่

พารามิเตอร์ที่ไม่บังคับ:

• bounds — LatLngBounds ซึ่งจะช่วยอภิปรายผลลัพธ์ของรหัสพิกัดภูมิศาสตร์ให้เด่นชัดขึ้น พารามิเตอร์ bounds จะส่งผลกระทบเฉพาะกับผลลัพธ์จากพิกัดแบบไม่จํากัดเฉพาะ ดูข้อมูลเพิ่มเติมเกี่ยวกับความลําเอียงของวิวพอร์ตด้านล่าง
• componentRestrictions - ใช้เพื่อจํากัดผลการค้นหาให้แสดงเฉพาะพื้นที่ที่กําหนด ดูข้อมูลเพิ่มเติมเกี่ยวกับการกรององค์ประกอบด้านล่าง
• region - รหัสภูมิภาคที่ระบุเป็นแท็กย่อย Unicode แบบ 2 อักขระ (ไม่ใช่ตัวเลข) ในกรณีส่วนใหญ่ แท็กเหล่านี้จะจับคู่กับค่า 2 อักขระของ ccTLD ("โดเมนระดับบนสุด") ที่คุ้นเคยโดยตรง พารามิเตอร์ region จะส่งผลกระทบเฉพาะกับผลลัพธ์จากพิกัดแบบไม่จํากัดเฉพาะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการให้น้ําหนักพิเศษของรหัสภูมิภาคด้านล่าง

การตอบสนองที่ระบุข้อมูลทางภูมิศาสตร์

บริการการเข้ารหัสพิกัดภูมิศาสตร์ต้องใช้วิธีเรียกกลับเพื่อดําเนินการเมื่อได้ผลลัพธ์ของรหัสพิกัด โค้ดเรียกกลับนี้ควรส่งพารามิเตอร์ 2 รายการเพื่อคงรหัส results และ status ตามลําดับ

ผลการเข้ารหัสพิกัดภูมิศาสตร์

ออบเจ็กต์ GeocoderResult แสดงถึงผลลัพธ์การเขียนโค้ดแบบภูมิศาสตร์เดียว คําขอรหัสพิกัดภูมิศาสตร์อาจแสดงออบเจ็กต์ผลลัพธ์หลายรายการ ดังนี้

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

ช่องเหล่านี้อธิบายไว้ด้านล่างนี้

• types[] คืออาร์เรย์ที่ระบุประเภทที่อยู่ของผลลัพธ์ที่แสดงผล อาร์เรย์นี้มีชุดแท็กอย่างน้อย 1 แท็กที่ระบุประเภทของฟีเจอร์ที่แสดงผลในผลการค้นหา เช่น พิกัดของ "ชิคาโก" จะแสดง "ย่าน" ซึ่งบ่งชี้ว่า "ชิคาโก" เป็นเมือง และจะแสดง "การเมือง" ซึ่งบ่งชี้ว่าเป็นหน่วยงานทางการเมือง ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่อยู่และประเภทคอมโพเนนต์ที่อยู่ด้านล่าง
• formatted_address เป็นสตริงซึ่งมีที่อยู่ที่มนุษย์อ่านได้ของสถานที่นี้

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

  ที่อยู่ที่จัดรูปแบบจะประกอบด้วยส่วนประกอบที่อยู่อย่างน้อย 1 รายการ ตัวอย่างเช่น ที่อยู่ "111 8th Avenue, New York, NY" ประกอบด้วยองค์ประกอบต่อไปนี้ "111" (หมายเลขถนน) "8th Avenue" (เส้นทาง) "นิวยอร์ก" (เมือง) และ "NY" (รัฐสหรัฐอเมริกา)

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

• address_components[] คืออาร์เรย์ที่มีคอมโพเนนต์แยกต่างหากที่ใช้กับที่อยู่นี้

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

  • types[] คืออาร์เรย์ที่ระบุประเภทของคอมโพเนนต์ที่อยู่ ดูรายการประเภทที่รองรับ
  • long_name คือคําอธิบายหรือข้อความแบบเต็มของคอมโพเนนต์ที่อยู่ที่ Geocoder แสดงผล
  • short_name เป็นชื่อย่อสําหรับคอมโพเนนต์ที่อยู่ (หากมี) เช่น คอมโพเนนต์ที่อยู่ของรัฐอะแลสกาอาจมี long_name เป็น "อะแลสกา" และ short_name ของ "AK" โดยใช้ตัวย่อ 2 ตัวอักษร

  ข้อเท็จจริงต่อไปนี้เกี่ยวกับอาร์เรย์ address_components[]

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

  ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่อยู่และประเภทคอมโพเนนต์ที่อยู่ด้านล่าง

• partial_match ระบุว่าไวลด์การ์ดไม่แสดงผลการทํางานแบบตรงทั้งหมดสําหรับคําขอเดิม แต่สามารถจับคู่บางส่วนกับที่อยู่ที่ขอได้ คุณอาจต้องตรวจสอบคําขอเดิมสําหรับการสะกดผิดและ/หรือที่อยู่ที่ไม่สมบูรณ์

  รายการที่ตรงกันบางส่วนมักเกิดขึ้นสําหรับที่อยู่ที่ไม่มีอยู่ภายในพื้นที่ที่คุณส่งในคําขอ ระบบอาจส่งคืนผลลัพธ์ที่ตรงกันบางส่วนเมื่อคําขอตรงกับสถานที่ตั้งอย่างน้อย 2 แห่งในพื้นที่เดียวกัน ตัวอย่างเช่น "Hillpar St, Bristol, UK" จะแสดงผลลัพธ์บางส่วนสําหรับทั้ง Henry Street และ Henrietta Street โปรดทราบว่าหากคําขอมีคอมโพเนนต์ที่อยู่ที่สะกดผิด บริการเข้ารหัสพิกัดภูมิศาสตร์อาจแนะนําที่อยู่สํารอง คําแนะนําที่ทริกเกอร์ด้วยวิธีนี้จะมีสถานะเป็นตรงกันบางส่วนด้วย

• place_idคือตัวระบุที่ไม่ซ้ําของสถานที่ ซึ่งใช้กับ Google API อื่นๆ ได้ ตัวอย่างเช่น คุณอาจใช้ place_id กับไลบรารี Google Places API เพื่อรับรายละเอียดเกี่ยวกับธุรกิจในพื้นที่ เช่น หมายเลขโทรศัพท์ เวลาทําการ รีวิวของผู้ใช้ และอื่นๆ ดูภาพรวมรหัสสถานที่
• postcode_localities[] คืออาร์เรย์ที่แสดงถึงภูมิภาคทั้งหมดที่อยู่ในรหัสไปรษณีย์ และจะปรากฏเมื่อผลลัพธ์เป็นรหัสไปรษณีย์ที่มีหลายเมืองเท่านั้น

• geometry มีข้อมูลต่อไปนี้

  • location มีค่าละติจูดและลองจิจูดที่มีพิกัดภูมิศาสตร์ โปรดทราบว่าเราแสดงผลตําแหน่งนี้เป็นออบเจ็กต์ LatLng ไม่ใช่เป็นสตริงที่จัดรูปแบบ
  • location_type จัดเก็บข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ตั้งที่ระบุ ปัจจุบันระบบรองรับค่าต่อไปนี้
    • ROOFTOP บ่งบอกว่าผลการค้นหาที่แสดงนั้นเป็นตัวระบุโดเมนที่ถูกต้อง
    • RANGE_INTERPOLATED บ่งบอกว่าผลการค้นหาที่แสดงนั้นแสดงตําแหน่งโดยประมาณ (มักอยู่บนถนน) ซึ่งอยู่ระหว่างจุดที่แน่นอน 2 จุด (เช่น สี่แยก) โดยทั่วไปแล้ว ผลการค้นหาที่มีการรบกวนจะแสดงเมื่อพิกัดทางภูมิศาสตร์ไม่พร้อมใช้งานสําหรับที่อยู่
    • GEOMETRIC_CENTER บ่งชี้ว่าผลการค้นหาที่แสดงเป็นจุดศูนย์กลางของเรขาคณิต เช่น เส้นประกอบ (เช่น ถนน) หรือรูปหลายเหลี่ยม (ภูมิภาค)
    • APPROXIMATE บ่งชี้ว่าผลการค้นหาที่แสดงเป็นค่าประมาณ
  
  
  • viewport จะเก็บวิวพอร์ตที่แนะนําของผลลัพธ์ที่แสดงผล
  • bounds (ไม่บังคับ) จัดเก็บ LatLngBounds ซึ่งอาจมีผลการค้นหาที่ส่งคืนโดยสมบูรณ์ โปรดทราบว่าขอบเขตเหล่านี้อาจไม่ตรงกับวิวพอร์ตที่แนะนํา (เช่น ซานฟรานซิสโกมีหมู่เกาะแฟลลอน ซึ่งเป็นส่วนหนึ่งของเทคนิคของเมือง แต่ไม่ควรส่งคืนในวิวพอร์ต)

จากนั้น Geocoder จะส่งที่อยู่กลับมาโดยใช้การตั้งค่าภาษาของเบราว์เซอร์ หรือภาษาที่ระบุเมื่อโหลด JavaScript ของ API โดยใช้พารามิเตอร์ language (ดูข้อมูลเพิ่มเติมได้ในการแปล)

ประเภทที่อยู่และประเภทคอมโพเนนต์ที่อยู่

อาร์เรย์ types[] ใน GeocoderResult ระบุประเภทที่อยู่ คุณอาจแสดงผลอาร์เรย์ types[] ภายใน GeocoderAddressคอมโพเนนต์ เพื่อระบุประเภทของคอมโพเนนต์ที่อยู่ที่เจาะจง อีเมลที่แสดงโดยโปรแกรมจัดการโดเมนอาจมีหลายประเภท ประเภทเหล่านี้อาจถือว่าเป็นแท็ก ตัวอย่างเช่น เมืองหลายแห่งได้รับการติดแท็กด้วยประเภท political และ locality

เครื่องมือจัดการอีเมลรองรับและแสดงผลประเภทต่อไปนี้ทั้งในประเภทที่อยู่และคอมโพเนนต์คอมโพเนนต์

• street_address ระบุที่อยู่ที่แน่นอน
• route ระบุเส้นทางที่มีชื่อ (เช่น "US 101")
• intersection แสดงถึงสี่แยกหลัก โดยทั่วไปจะเป็นถนนสายหลัก 2 แห่ง
• political บ่งบอกว่าเป็นพรรคการเมือง โดยปกติแล้ว ประเภทนี้จะระบุรูปหลายเหลี่ยมของการปกครองพลเรือนบางแห่ง
• country บ่งบอกว่าเป็นพรรคการเมืองระดับประเทศ และโดยปกติแล้วจะเป็นประเภทคําสั่งซื้อสูงสุดที่มาจาก Geocoder
• administrative_area_level_1 ระบุเอนทิตีลําดับแรกที่ต่ํากว่าระดับประเทศ ส่วนในสหรัฐอเมริกา ระดับการจัดการดังกล่าวคือรัฐต่างๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้ ในกรณีส่วนใหญ่ ชื่อย่อของ admin_area_level_1 จะจับคู่ส่วนย่อย ISO 3166-2 กับรายชื่อที่มีการเผยแพร่อย่างแพร่หลายมากขึ้น แต่วิธีนี้ไม่รับประกันว่าผลการค้นหาทางภูมิศาสตร์ของเราจะอิงตามสัญญาณและข้อมูลตําแหน่งที่หลากหลาย
• administrative_area_level_2 ระบุเอนทิตีลําดับที่ 2 ที่ต่ํากว่าระดับประเทศ ระดับการดูแลระบบในสหรัฐอเมริกามีดังต่อไปนี้ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• administrative_area_level_3 ระบุนิติบุคคลลําดับที่ 3 ซึ่งอยู่ต่ํากว่าระดับประเทศ ประเภทนี้บ่งชี้ว่ามีการแบ่งภาคส่วนย่อยๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• administrative_area_level_4 ระบุนิติบุคคลลําดับที่ 4 ด้านล่างระดับประเทศ ประเภทนี้บ่งชี้ว่ามีการแบ่งภาคส่วนย่อยๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• administrative_area_level_5 ระบุนิติบุคคลลําดับที่ 5 ต่ํากว่าระดับประเทศ ประเภทนี้บ่งชี้ว่ามีการแบ่งภาคส่วนย่อยๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• administrative_area_level_6 ระบุเอนทิตีลําดับที่ 6 ที่ต่ํากว่าระดับประเทศ ประเภทนี้บ่งชี้ว่ามีการแบ่งภาคส่วนย่อยๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• administrative_area_level_7 ระบุนิติบุคคลลําดับที่ 7 ด้านล่างระดับประเทศ ประเภทนี้บ่งชี้ว่ามีการแบ่งภาคส่วนย่อยๆ บางประเทศอาจไม่มีระดับการดูแลระบบเหล่านี้
• colloquial_area แสดงถึงชื่ออื่นที่ใช้กันโดยทั่วไปสําหรับเอนทิตี
• locality เป็นหน่วยงานรัฐที่เป็นเมืองหรือเมือง
• sublocality ระบุเอนทิตีลําดับแรกด้านล่างย่าน สําหรับสถานที่บางแห่ง อาจได้รับประเภทเพิ่มเติมอย่างใดอย่างหนึ่ง ได้แก่ sublocality_level_1 ถึง sublocality_level_5 ระดับย่อยแต่ละระดับเป็นหน่วยงานโยธา จํานวนที่ใหญ่กว่าหมายถึงพื้นที่ทางภูมิศาสตร์ขนาดเล็กกว่า
• neighborhood แสดงถึงย่านใกล้เคียงที่มีชื่อ
• premise ระบุสถานที่ที่มีชื่อ โดยปกติแล้วจะเป็นอาคารหรือคอลเล็กชันอาคารที่มีชื่อทั่วไป
• subpremise ระบุเอนทิตีคําสั่งซื้อแรกด้านล่างสถานที่ตั้งที่มีชื่อ โดยปกติจะเป็นอาคารเอกพจน์ภายในอาคารหลายหลังที่ใช้ชื่อเดียวกัน
• plus_code บ่งบอกว่ามีการอ้างอิงตําแหน่งที่เข้ารหัสซึ่งมาจากละติจูดและลองจิจูด Plus Code สามารถใช้แทนที่อยู่จริงในสถานที่ที่ไม่มีที่อยู่ได้ (ในกรณีที่อาคารไม่มีหมายเลขถนน หรือไม่มีชื่อถนน) ดูรายละเอียดได้ที่ https://plus.codes
• postal_code ระบุรหัสไปรษณีย์ที่ใช้ในการจัดการรหัสไปรษณีย์ภายในประเทศ
• natural_feature หมายถึงฟีเจอร์ตามธรรมชาติที่โดดเด่น
• airport หมายถึงสนามบิน
• park บ่งบอกว่าเป็นอุทยานที่มีชื่อ
• point_of_interest ระบุจุดสนใจที่มีชื่อ โดยทั่วไปแล้ว "จุดที่น่าสนใจ" เหล่านี้เป็นหน่วยงานท้องถิ่นที่โดดเด่นซึ่งไม่เหมาะกับหมวดหมู่อื่น เช่น "ตึกเอ็มไพร์สเตท" หรือ "หอไอเฟล"

รายการประเภทว่างบ่งบอกว่าไม่มีประเภทที่ทราบสําหรับคอมโพเนนต์ที่อยู่หนึ่งๆ เช่น Lieu-dit ในฝรั่งเศส

นอกจากที่กล่าวมาข้างต้นแล้ว คอมโพเนนต์ที่อยู่อาจมีประเภทด้านล่าง

หมายเหตุ: รายการนี้ไม่ได้แสดงข้อมูลครบถ้วนและอาจเปลี่ยนแปลงได้

• floor หมายถึงชั้นของที่อยู่อาคาร
• โดยปกติแล้ว establishment จะระบุสถานที่ที่ยังไม่ได้จัดหมวดหมู่
• landmark บ่งชี้สถานที่ใกล้เคียงที่ใช้เป็นข้อมูลอ้างอิงเพื่อช่วยนําทาง
• point_of_interest ระบุจุดสนใจที่มีชื่อ
• parking หมายถึงที่จอดรถหรือโครงสร้างที่จอดรถ
• post_box ระบุตู้ไปรษณีย์ที่เฉพาะเจาะจง
• postal_town แสดงการจัดกลุ่มพื้นที่ทางภูมิศาสตร์ เช่น locality และ sublocality ที่ใช้สําหรับที่อยู่จัดส่งในบางประเทศ
• room จะระบุห้องของที่อยู่อาคาร
• street_number ระบุหมายเลขถนนที่ถูกต้อง
• bus_station, train_station และ transit_station ระบุตําแหน่งของรถประจําทาง รถไฟ หรือขนส่งสาธารณะ

รหัสสถานะ

รหัส status อาจแสดงค่าใดค่าหนึ่งต่อไปนี้

• "OK" ระบุว่าไม่มีข้อผิดพลาดเกิดขึ้น ระบบแยกวิเคราะห์ที่อยู่สําเร็จและมีการส่งพิกัดภูมิศาสตร์อย่างน้อย 1 กลับมา
• "ZERO_RESULTS" บ่งบอกว่ารหัสพิกัดสําเร็จ แต่ไม่แสดงผลลัพธ์ กรณีนี้อาจเกิดขึ้นหากตัวระบุพิกัดผ่าน address ที่ไม่มีอยู่จริง
• "OVER_QUERY_LIMIT" ระบุว่าคุณใช้พื้นที่เก็บข้อมูลเกินโควต้าแล้ว
• "REQUEST_DENIED" บ่งชี้ว่าคําขอถูกปฏิเสธ หน้าเว็บไม่ได้รับอนุญาตให้ใช้ไวลด์การ์ด
• โดยทั่วไป "INVALID_REQUEST" จะบ่งบอกว่าการค้นหา (address, components หรือ latlng) หายไป
• "UNKNOWN_ERROR" ระบุว่าประมวลผลคําขอไม่ได้ เนื่องจากข้อผิดพลาดของเซิร์ฟเวอร์ คําขออาจประสบความสําเร็จหากลองอีกครั้ง
• "ERROR" บ่งบอกว่าคําขอหมดเวลาหรือมีปัญหาในการติดต่อเซิร์ฟเวอร์ของ Google คําขออาจประสบความสําเร็จหากลองอีกครั้ง

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

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

ดูตัวอย่าง

การให้น้ําหนักกับวิวพอร์ต

คุณสามารถสั่งให้บริการการเข้ารหัสพิกัดภูมิศาสตร์แนะนําผลลัพธ์ที่ต้องการภายในวิวพอร์ตหนึ่งๆ ได้ (แสดงเป็นกรอบล้อมรอบ) คุณสามารถตั้งค่าพารามิเตอร์ bounds ภายในสัญพจน์ของออบเจ็กต์ GeocoderRequest เพื่อกําหนดขอบเขตของวิวพอร์ตนี้ โปรดทราบว่าการให้น้ําหนักพิเศษเฉพาะผลการค้นหาภายในขอบเขต หากมีผลลัพธ์ที่เกี่ยวข้องนอกขอบเขตเหล่านี้ อาจรวมผลลัพธ์เหล่านั้นไว้ด้วย

ตัวอย่างเช่น รหัสพิกัดทางอากาศสําหรับ "Winnetka" มักจะส่งคืนพื้นที่ชานเมืองชิคาโก

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[ -87.7417070, 42.1083080],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}

แต่การระบุพารามิเตอร์ bounds เพื่อกําหนดกรอบพื้นที่สําหรับหุบเขา San Fernando ของลอสแอนเจลิส จะทําให้พิกัดนี้แสดงย่านใกล้เคียงชื่อ "Winnetka" ในตําแหน่งดังกล่าว

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location": [34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}

การให้น้ําหนักพิเศษของรหัสภูมิภาค

คุณตั้งค่าบริการการเข้ารหัสพิกัดภูมิศาสตร์ให้แสดงผลการค้นหาที่ลําเอียงไปยังภูมิภาคใดภูมิภาคหนึ่งได้โดยใช้พารามิเตอร์ region พารามิเตอร์นี้จะใช้รหัสภูมิภาค ซึ่งระบุเป็นแท็กย่อยของ Unicode แบบ 2 อักขระ (ไม่ใช่ตัวเลข) แท็กเหล่านี้แมปกับ ccTLD ที่คุ้นเคย ("โดเมนระดับบนสุด") โดยตรง ซึ่งมีอักขระ 2 ตัว เช่น "uk" ใน "co.uk" ในบางกรณี แท็ก region รองรับรหัส ISO-3166-1 ด้วย ซึ่งบางครั้งจะแตกต่างจากค่า ccTLD (เช่น "GB" สําหรับ "บริเตนใหญ่")

สิ่งที่จะเกิดขึ้นเมื่อใช้พารามิเตอร์ region

• ระบุประเทศหรือภูมิภาคเดียวเท่านั้น ระบบจะข้ามค่าหลายค่าและอาจส่งผลให้ส่งคําขอไม่สําเร็จ
• ใช้เฉพาะแท็กภูมิภาค 2 อักขระ (รูปแบบ Unicode CLDR) และอินพุตอื่นๆ ทั้งหมดจะทําให้เกิดข้อผิดพลาด
• รองรับเฉพาะประเทศและภูมิภาคที่ระบุไว้ในรายละเอียดความครอบคลุมของ Google Maps Platform

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

เช่น ไวลด์การ์ดสําหรับ "โตเลโด" จะแสดงผลการค้นหาเฉพาะบุคคล เนื่องจากโดเมนเริ่มต้นของบริการการเข้ารหัสพิกัดภูมิศาสตร์มีการตั้งค่าเป็นสหรัฐอเมริกา

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}

รหัสพิกัดสําหรับ "โตเลโด" ที่มีช่อง region ตั้งค่าเป็น 'es' (สเปน) จะส่งคืนเมืองสเปน

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }],
  "place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}

การกรองคอมโพเนนต์

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

เครื่องมือแสดงพิกัดจะแสดงเฉพาะผลลัพธ์ที่ตรงกับตัวกรองของตัวกรองทั้งหมด กล่าวคือ จะประเมินข้อกําหนดของตัวกรองเป็น "AND" ไม่ใช่ OR

ตัวกรองคอมโพเนนต์ประกอบด้วยรายการต่อไปนี้อย่างน้อย 1 รายการ

• route ตรงกับชื่อเส้นทางที่ยาวหรือสั้น
• locality จับคู่กับประเภทย่านและย่านย่อย
• administrativeArea ตรงกับระดับทั้งหมดของระดับการดูแลระบบ
• postalCode ตรงกับรหัสไปรษณีย์และคํานําหน้ารหัสไปรษณีย์
• country ตรงกับชื่อประเทศหรือรหัสประเทศแบบ ISO 3166-1 แบบ 2 ตัวอักษร หมายเหตุ: API เป็นไปตามมาตรฐาน ISO สําหรับการกําหนดประเทศ และการกรองจะทํางานได้ดีที่สุดเมื่อใช้รหัส ISO ที่เกี่ยวข้องของประเทศดังกล่าว

ตัวอย่างต่อไปนี้สาธิตการใช้พารามิเตอร์ componentRestrictions เพื่อกรองตาม country และ postalCode

function codeAddress() {
geocoder.geocode({
  componentRestrictions: {
    country: 'AU',
    postalCode: '2000'
  }
}, function(results, status) {
  if (status == 'OK') {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
    });
  } else {
    window.alert('Geocode was not successful for the following reason: ' + status);
  }
});
}

การเข้ารหัสพื้นที่ย้อนกลับ (การค้นหาที่อยู่)

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

แทนที่จะใส่ address แบบข้อความ ให้ระบุคู่ละติจูด/ลองจิจูดที่คั่นด้วยคอมมาในพารามิเตอร์ location

หมายเหตุ: หากคุณรวมพารามิเตอร์ componentRestrictions ในคําขอ ระบบจะไม่สนใจพารามิเตอร์ location

ตัวอย่างต่อไปนี้จะเข้ารหัสค่าละติจูด/ลองจิจูดให้อยู่กึ่งกลางของแผนที่ ณ ตําแหน่งนั้น เปิดหน้าต่างข้อมูลด้วยที่อยู่ที่มีการจัดรูปแบบ:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: { lat: 40.731, lng: -73.997 },
    }
  );
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      geocodeLatLng(geocoder, map, infowindow);
    }
  );
}

function geocodeLatLng(
  geocoder: google.maps.Geocoder,
  map: google.maps.Map,
  infowindow: google.maps.InfoWindow
) {
  const input = (document.getElementById("latlng") as HTMLInputElement).value;
  const latlngStr = input.split(",", 2);
  const latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1]),
  };

  geocoder
    .geocode({ location: latlng })
    .then((response) => {
      if (response.results[0]) {
        map.setZoom(11);

        const marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });

        infowindow.setContent(response.results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: { lat: 40.731, lng: -73.997 },
  });
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();

  document.getElementById("submit").addEventListener("click", () => {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  const input = document.getElementById("latlng").value;
  const latlngStr = input.split(",", 2);
  const latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1]),
  };

  geocoder
    .geocode({ location: latlng })
    .then((response) => {
      if (response.results[0]) {
        map.setZoom(11);

        const marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });

        infowindow.setContent(response.results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

window.initMap = initMap;
index.js

หมายเหตุ: JavaScript จะรวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

โปรดทราบว่าในตัวอย่างก่อนหน้านี้ เราแสดงผลการค้นหาแรกโดยการเลือก results[0] ตัวระบุตําแหน่งย้อนกลับมักให้ผลลัพธ์มากกว่า 1 รายการ ที่อยู่ทางภูมิศาสตร์ไม่ใช่เพียงที่อยู่ทางไปรษณีย์ แต่เป็นวิธีการตั้งชื่อสถานที่ด้วยภูมิศาสตร์ ตัวอย่างเช่น เมื่อมีการระบุจุดทางภูมิศาสตร์ของเมืองชิคาโก จุดที่อยู่ทางภูมิศาสตร์อาจมีป้ายกํากับเป็นที่อยู่ เป็นเมือง (ชิคาโก) เป็นรัฐ (อิลลินอยส์) หรือเป็นประเทศ (สหรัฐอเมริกา) ทั้งหมดนี้เป็นที่อยู่ของระบบพิกัดโดเมน โปรแกรมรวบรวมข้อมูลย้อนกลับจะแสดงผลทั้งหมดเหล่านี้

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

ต่อไปนี้เป็นตัวอย่างรายการที่อยู่ที่การค้นหาข้างต้นอาจแสดง

results[0].formatted_address: "277 Bedford Ave, Brooklyn, NY 11211, USA"
results[1].formatted_address: "Grand St/Bedford Av, Brooklyn, NY 11211, USA"
results[2].formatted_address: "Williamsburg, Brooklyn, NY, USA"
results[3].formatted_address: "Brooklyn, NY, USA"
results[4].formatted_address: "New York, NY, USA"
results[5].formatted_address: "Brooklyn, NY 11211, USA"
results[6].formatted_address: "Kings County, NY, USA"
results[7].formatted_address: "New York-Northern New Jersey-Long Island, NY-NJ-PA, USA"
results[8].formatted_address: "New York Metropolitan Area, USA"
results[9].formatted_address: "New York, USA"

โดยที่อยู่จะเรียงตามลําดับที่ดีที่สุดจากน้อยไปมาก โดยทั่วไป ที่อยู่ที่แน่ชัดมากกว่าจะเป็นผลการค้นหาที่โดดเด่นที่สุดดังเช่นในกรณีนี้ โปรดทราบว่าเราแสดงที่อยู่ประเภทต่างๆ เช่น ที่อยู่ที่เจาะจงที่สุดลงในเอนทิตีทางการเมืองที่เจาะจงน้อยกว่า เช่น ละแวกบ้าน เมือง เคาน์ตี รัฐ ฯลฯ หากต้องการจับคู่ที่อยู่ทั่วไปมากขึ้น คุณอาจต้องการตรวจสอบช่อง results[].types

หมายเหตุ: การพลิกโฉมภูมิศาสตร์ไม่ใช่วิทยาศาสตร์ที่แน่นอน โปรแกรม eDiscovery จะพยายามค้นหาตําแหน่งที่ใกล้เคียงที่สุด

การดึงที่อยู่สําหรับรหัสสถานที่

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

เมื่อคุณระบุ placeId คําขอต้องไม่มีช่องต่อไปนี้

• address
• latLng
• location
• componentRestrictions

ตัวอย่างต่อไปนี้จะยอมรับรหัสสถานที่ ค้นหาที่อยู่ที่เกี่ยวข้อง และเป็นศูนย์กลางของแผนที่ ณ ตําแหน่งนั้น นอกจากนี้ยังเปิดหน้าต่างข้อมูลที่แสดงที่อยู่ที่มีการจัดรูปแบบของสถานที่ที่เกี่ยวข้องด้วย ดังนี้

TypeScript

// Initialize the map.
function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 8,
      center: { lat: 40.72, lng: -73.96 },
    }
  );
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      geocodePlaceId(geocoder, map, infowindow);
    }
  );
}

// This function is called when the user clicks the UI button requesting
// a geocode of a place ID.
function geocodePlaceId(
  geocoder: google.maps.Geocoder,
  map: google.maps.Map,
  infowindow: google.maps.InfoWindow
) {
  const placeId = (document.getElementById("place-id") as HTMLInputElement)
    .value;

  geocoder
    .geocode({ placeId: placeId })
    .then(({ results }) => {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);

        const marker = new google.maps.Marker({
          map,
          position: results[0].geometry.location,
        });

        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

// Initialize the map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: { lat: 40.72, lng: -73.96 },
  });
  const geocoder = new google.maps.Geocoder();
  const infowindow = new google.maps.InfoWindow();

  document.getElementById("submit").addEventListener("click", () => {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a geocode of a place ID.
function geocodePlaceId(geocoder, map, infowindow) {
  const placeId = document.getElementById("place-id").value;

  geocoder
    .geocode({ placeId: placeId })
    .then(({ results }) => {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);

        const marker = new google.maps.Marker({
          map,
          position: results[0].geometry.location,
        });

        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert("No results found");
      }
    })
    .catch((e) => window.alert("Geocoder failed due to: " + e));
}

window.initMap = initMap;
index.js

หมายเหตุ: JavaScript จะรวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell