แผนที่ที่มีการปรับลักษณะ

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

หากต้องการอัปเดตสไตล์เดียวกันในแอปหลายแอป ให้ดูการปรับแต่งในระบบคลาวด์ ซึ่งมีอยู่ในคอนโซล Google Cloud และต้องใช้รหัสแผนที่ อย่ารวมการปรับแต่งในระบบคลาวด์กับการจัดสไตล์แบบฮาร์ดโค้ดไว้ในแอปเดียวกัน

เพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้น

ตัวอย่าง

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

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

ตัวอย่างต่อไปนี้ใช้การดำเนินการจัดสไตล์และการทำให้เข้าใจง่ายเพื่อเลียนแบบลักษณะแผนที่ถนนของสหรัฐอเมริกา

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE

ไวยากรณ์ของสไตล์

หากต้องการสร้างแผนที่ที่มีสไตล์ที่กำหนดเอง ให้ใส่พารามิเตอร์ style อย่างน้อย 1 รายการใน URL คำขอ

การประกาศ style แต่ละรายการอาจมีอาร์กิวเมนต์ต่อไปนี้ โดยคั่นด้วยอักขระไปป์แนวตั้ง ("|")

• feature (ไม่บังคับ) ระบุฟีเจอร์ที่จะเลือกสำหรับการปรับสไตล์นี้ องค์ประกอบต่างๆ ประกอบด้วยสิ่งต่างๆ ในแผนที่ เช่น ถนน สวนสาธารณะ หรือจุดที่น่าสนใจอื่นๆ หากไม่มีอาร์กิวเมนต์ feature สไตล์ที่ระบุจะมีผลกับฟีเจอร์ทั้งหมด
• element (ไม่บังคับ) ระบุองค์ประกอบของฟีเจอร์ที่ระบุเพื่อเลือกสำหรับการแก้ไขสไตล์นี้ องค์ประกอบคือลักษณะขององค์ประกอบ เช่น เรขาคณิตหรือป้ายกำกับ หากไม่มีอาร์กิวเมนต์ element สไตล์จะมีผลกับองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ
• ชุดกฎสไตล์ (ต้องระบุ) เพื่อใช้กับฟีเจอร์และองค์ประกอบที่ระบุ API จะใช้กฎตามลําดับที่ปรากฏในประกาศ style คุณใส่กฎได้เท่าใดก็ได้ภายในข้อจำกัดความยาว URL ปกติของ Maps Static API

หมายเหตุ: การประกาศ style ต้องระบุอาร์กิวเมนต์ข้างต้นตามลำดับที่ระบุ ตัวอย่างต่อไปนี้แสดงไวยากรณ์ที่ถูกต้องสำหรับฟีเจอร์และการเลือกองค์ประกอบที่มี 2 กฎ

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

ฟีเจอร์

การประกาศ style ต่อไปนี้จะเปลี่ยนสีถนนทั้งหมดบนแผนที่

style=feature:road|color:0xffffff

ตัวอย่างการเลือกฟีเจอร์ที่พบบ่อยมีดังนี้

• feature:all (ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมดของแผนที่
• feature:road เลือกถนนทั้งหมดบนแผนที่
• feature:road.local เลือกถนนท้องถิ่นทั้งหมด

สถานที่หรือประเภทสถานที่คือลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ ธุรกิจ และอื่นๆ

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

ฟีเจอร์บางอย่างมีฟีเจอร์ย่อยที่คุณระบุโดยใช้เครื่องหมายจุด เช่น landscape.natural หรือ road.local หากคุณระบุเฉพาะฟีเจอร์หลัก เช่น road สไตล์ที่คุณระบุสำหรับฟีเจอร์หลักจะมีผลกับฟีเจอร์ย่อยทั้งหมด เช่น road.local และ road.highway

โปรดทราบว่าฟีเจอร์หลักอาจมีองค์ประกอบบางอย่างที่ไม่ได้รวมอยู่ในฟีเจอร์ย่อยทั้งหมด

ฟีเจอร์ต่อไปนี้พร้อมใช้งาน

• all (ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมด
• administrative เลือกพื้นที่บริหารทั้งหมด การจัดรูปแบบจะมีผลกับป้ายกำกับของเขตบริหารเท่านั้น โดยจะไม่มีผลกับเส้นขอบหรือการเติมทางภูมิศาสตร์
  • administrative.country เลือกประเทศ
  • administrative.land_parcel เลือกแปลงที่ดิน
  • administrative.locality เลือกย่าน
  • administrative.neighborhood เลือกย่านใกล้เคียง
  • administrative.province เลือกจังหวัด
• landscape เลือกภาพแนวนอนทั้งหมด
  • landscape.man_made เลือกองค์ประกอบที่มนุษย์สร้างขึ้น เช่น อาคารและสิ่งก่อสร้างอื่นๆ
  • landscape.natural เลือกลักษณะทางธรรมชาติ เช่น ภูเขา แม่น้ำ ทะเลทราย และเอลกิลาส
  • landscape.natural.landcover เลือกองค์ประกอบสิ่งปกคลุมดิน ซึ่งเป็นวัสดุที่ปกคลุมพื้นผิวโลก เช่น ป่า ทุ่งหญ้า พื้นที่ชุ่มน้ำ และพื้นดินเปล่า
  • landscape.natural.terrain เลือกลักษณะภูมิประเทศของพื้นดิน เช่น ความสูงชัน ความลาดชัน และการวางแนว
• poi เลือกจุดที่น่าสนใจทั้งหมด
  • poi.attraction เลือกสถานที่ท่องเที่ยว
  • poi.business เลือกธุรกิจ
  • poi.government เลือกอาคารสถานที่ราชการ
  • poi.medical เลือกบริการฉุกเฉิน ซึ่งรวมถึงโรงพยาบาล ร้านขายยา ตำรวจ แพทย์ และอื่นๆ
  • poi.park เลือกสวนสาธารณะ
  • poi.place_of_worship เลือกสถานที่สักการะ รวมถึงโบสถ์ วัด มัสยิด และอื่นๆ
  • poi.school เลือกโรงเรียน
  • poi.sports_complex เลือกศูนย์กีฬา
• road เลือกถนนทั้งหมด
  • road.arterial เลือกถนนสายหลัก
  • road.highway เลือกทางหลวง
  • road.highway.controlled_access เลือกทางด่วนที่มีการควบคุมการเข้าถึง
  • road.local เลือกถนนท้องถิ่น
• transit เลือกสถานีและสายขนส่งสาธารณะทั้งหมด
  • transit.line เลือกเส้นทางขนส่งสาธารณะ
  • transit.station เลือกสถานีขนส่งสาธารณะทั้งหมด
  • transit.station.airport เลือกสนามบิน
  • transit.station.bus เลือกป้ายรถประจำทาง
  • transit.station.rail เลือกสถานีรถไฟ
• water เลือกแหล่งน้ำ

องค์ประกอบ

การประกาศ style ต่อไปนี้จะกำหนดสีป้ายกำกับถนนท้องถิ่นทั้งหมด

style=feature:road.local|element:labels|color:0xffffff

องค์ประกอบคือส่วนย่อยขององค์ประกอบ ตัวอย่างเช่น ถนนประกอบด้วยเส้นกราฟิก (เรขาคณิต) ในแผนที่ และข้อความที่ระบุชื่อ (ป้ายกำกับ)

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

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

• all (ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ
• geometry เลือกองค์ประกอบเรขาคณิตทั้งหมดขององค์ประกอบที่ระบุ
  • geometry.fill เลือกเฉพาะการเติมของเรขาคณิตขององค์ประกอบ
  • geometry.stroke เลือกเฉพาะเส้นของเรขาคณิตขององค์ประกอบ
• labels เลือกป้ายกำกับข้อความที่เชื่อมโยงกับองค์ประกอบที่ระบุ
  • labels.icon เลือกเฉพาะไอคอนที่แสดงภายในป้ายกำกับของฟีเจอร์
  • labels.text เลือกเฉพาะข้อความของป้ายกำกับ
  • labels.text.fill เลือกเฉพาะการเติมของป้ายกำกับ โดยปกติแล้วการเติมของป้ายกำกับจะแสดงผลเป็นเส้นขอบสีที่ล้อมรอบข้อความของป้ายกำกับ
  • labels.text.stroke เลือกเฉพาะเส้นขีดของข้อความป้ายกำกับ

กฎของรูปแบบ

กฎรูปแบบคือตัวเลือกการจัดรูปแบบที่ใช้กับฟีเจอร์และองค์ประกอบที่ระบุภายในประกาศ style แต่ละรายการ

การประกาศ style ต่อไปนี้ใช้กฎสไตล์ 2 ข้อกับถนนในแผนที่ กฎแรกใช้สีกับถนน กฎข้อที่ 2 แสดงถนนให้เข้าใจง่ายขึ้น จึงมีเส้นที่บางลงโดยไม่มีเส้นขอบ

style=feature:road|color:0xffffff|visibility:simplified

การประกาศ style แต่ละรายการต้องมีการดำเนินการอย่างน้อย 1 รายการที่คั่นด้วยอักขระไปป์ ("|") การดำเนินการแต่ละรายการจะระบุค่าอาร์กิวเมนต์โดยใช้อักขระโคลอน (":") และการดำเนินการทั้งหมดจะมีผลกับการเลือกตามลำดับที่คุณระบุ

ระบบรองรับตัวเลือกสไตล์ต่อไปนี้

• hue (สตริงสี RGB แบบเลขฐานสิบหกในรูปแบบ #RRGGBB) ระบุสีพื้นฐาน

  หมายเหตุ: ตัวเลือกนี้จะกำหนดสีในขณะที่คงความอิ่มตัวและความสว่างที่ระบุไว้ในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกสไตล์อื่นๆ ที่คุณกำหนดไว้ในแผนที่) สีที่ได้จะสัมพันธ์กับสไตล์ของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดสไตล์ด้วย hue เราขอแนะนำให้ใช้เงื่อนไข color แบบสัมบูรณ์หากเป็นไปได้

• lightness (ค่าทศนิยมระหว่าง -100 ถึง 100) ระบุเปอร์เซ็นต์การเปลี่ยนแปลงความสว่างขององค์ประกอบ ค่าลบจะเพิ่มความมืด (โดย -100 หมายถึงสีดํา) ส่วนค่าบวกจะเพิ่มความสว่าง (โดย +100 หมายถึงสีขาว)

  หมายเหตุ: ตัวเลือกนี้จะกำหนดความสว่างโดยคงความอิ่มตัวและสีที่ระบุไว้ในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกสไตล์อื่นๆ ที่คุณกำหนดไว้ในแผนที่) สีที่ได้จะสัมพันธ์กับสไตล์ของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดสไตล์ด้วย lightness เราขอแนะนำให้ใช้เงื่อนไข color แบบสัมบูรณ์หากเป็นไปได้

• saturation (ค่าทศนิยมระหว่าง -100 ถึง 100) ระบุเปอร์เซ็นต์การเปลี่ยนแปลงความเข้มของสีพื้นฐานที่จะใช้กับองค์ประกอบ

  หมายเหตุ: ตัวเลือกนี้จะตั้งค่าความอิ่มตัวขณะที่ยังคงความเข้มและระดับความสว่างที่ระบุไว้ในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกสไตล์อื่นๆ ที่คุณกำหนดไว้ในแผนที่) สีที่ได้จะสัมพันธ์กับสไตล์ของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดสไตล์ด้วย saturation เราขอแนะนำให้ใช้เงื่อนไข color แบบสัมบูรณ์หากเป็นไปได้

• gamma (ค่าทศนิยมระหว่าง 0.01 ถึง 10.0 โดยที่ 1.0 จะไม่ใช้การแก้ไข) ระบุปริมาณการแก้ไขแกมมาที่จะใช้กับองค์ประกอบ การแก้ไขแกมมาจะปรับเปลี่ยนความสว่างของสีในลักษณะที่ไม่เชิงเส้น โดยไม่ส่งผลต่อค่าสีขาวหรือสีดำ โดยปกติแล้ว การแก้ไขแกมมาจะใช้เพื่อแก้ไขคอนทราสต์ขององค์ประกอบหลายรายการ เช่น คุณอาจแก้ไขค่าแกมมาเพื่อเพิ่มหรือลดคอนทราสต์ระหว่างขอบกับส่วนในขององค์ประกอบ

  หมายเหตุ: ตัวเลือกนี้จะปรับความสว่างตามสไตล์เริ่มต้นของ Google โดยใช้เส้นโค้งการมากของแสง หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่ฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดสไตล์ด้วย gamma คุณควรใช้ตัวจัดรูปแบบ color แบบสัมบูรณ์หากเป็นไปได้

• invert_lightness (if true) กลับค่าความสว่างที่มีอยู่ ซึ่งมีประโยชน์ เช่น สำหรับการสลับไปยังแผนที่ที่เข้มขึ้นและมีข้อความสีขาวอย่างรวดเร็ว

  หมายเหตุ: ตัวเลือกนี้จะเปลี่ยนสไตล์เริ่มต้นของ Google เป็นสีกลับ หาก Google เปลี่ยนแปลงสไตล์แผนที่พื้นฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดสไตล์ด้วย invert_lightness เราขอแนะนำให้ใช้เงื่อนไข color แบบสัมบูรณ์หากเป็นไปได้

• visibility (on, off หรือ simplified) ระบุว่าองค์ประกอบจะปรากฏบนแผนที่หรือไม่และอย่างไร ระดับการมองเห็น simplified จะนําองค์ประกอบบางอย่างของรูปแบบออกจากองค์ประกอบที่ได้รับผลกระทบ เช่น ถนนจะเปลี่ยนเป็นเส้นที่บางลงโดยไม่มีเส้นขอบ ส่วนสวนสาธารณะจะสูญเสียข้อความป้ายกำกับแต่ยังคงมีไอคอนป้ายกำกับ
• color (สตริงเลขฐานสิบหก RGB ในรูปแบบ #RRGGBB) กำหนดสีขององค์ประกอบ
• weight (ค่าจำนวนเต็มที่มากกว่าหรือเท่ากับ 0) จะกำหนดน้ำหนักขององค์ประกอบเป็นพิกเซล การตั้งค่าน้ำหนักเป็นค่าสูงอาจส่งผลให้มีการตัดออกบริเวณขอบของการ์ด

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

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

รูปแบบสี ความอิ่มตัว และความสว่าง

หมายเหตุ: ผลของการตั้งค่าสี ระดับความอิ่มตัว ความสว่าง และค่าแกมมาจะสัมพันธ์กับสไตล์ของแผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่พื้นฐาน การเปลี่ยนแปลงดังกล่าวจะส่งผลต่อฟีเจอร์ของแผนที่ที่มีสไตล์ตามตัวเลือกเหล่านี้ คุณควรใช้เงื่อนไขแบบสัมบูรณ์ color หากทำได้

แผนที่ที่มีสไตล์ใช้รูปแบบ hue, saturation, lightness (HSL) เพื่อระบุสีภายในการดำเนินการของเครื่องมือแต่ง โทนสีระบุสีพื้นฐาน ความอิ่มตัวระบุความเข้มของสีนั้น และความสว่างระบุปริมาณสีขาวหรือสีดําสัมพัทธ์ในสีประกอบ

การแก้แกมม่าจะปรับเปลี่ยนความสว่างในพื้นที่สี โดยปกติแล้วเพื่อเพิ่มหรือลดคอนทราสต์ นอกจากนี้ รูปแบบ HSL ยังกำหนดสีภายในพื้นที่พิกัด โดยที่ hue ระบุการวางแนวภายในวงล้อสี ส่วนความอิ่มตัวและความสว่างจะระบุแอมพลิจูดตามแกนต่างๆ ระบบจะวัดสีภายในพื้นที่สี RGB ซึ่งคล้ายกับพื้นที่สี RGB ส่วนใหญ่ ยกเว้นที่ไม่มีเฉดสีขาวและดำ

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

เช่น คุณอาจกำหนดสีสำหรับสีเขียวบริสุทธิ์เป็น hue:0x00ff00 หรือ hue:0x000100 โทนสีทั้ง 2 รายการเหมือนกัน ค่าทั้ง 2 ค่าชี้ไปที่สีเขียวบริสุทธิ์ในโมเดลสี HSL

วงล้อสี RGB

ค่า hue ของ RGB ที่ประกอบด้วยสีแดง เขียว และน้ำเงินเท่าๆ กันไม่ได้ระบุสีเนื่องจากไม่มีค่าใดที่ระบุการวางแนวในพื้นที่พิกัด HSL เช่น "#000000" (สีดํา) "#FFFFFF" (สีขาว) และเฉดสีเทาล้วนทั้งหมด หากต้องการระบุสีดํา ขาว หรือเทา คุณต้องนํา saturation ออกทั้งหมด (ตั้งค่าเป็น -100) และปรับ lightness แทน

นอกจากนี้ เมื่อแก้ไขฟีเจอร์ที่มีอยู่ซึ่งมีรูปแบบสีอยู่แล้ว การเปลี่ยนแปลงค่า เช่น hue จะไม่เปลี่ยน saturation หรือ lightness ที่มีอยู่