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

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงแผนที่ของ Brooklyn ในสหรัฐอเมริกา โดยมีการจัดสไตล์เพื่อกำหนดสีเขียวสดให้กับถนนในท้องถิ่นและสีดำให้กับพื้นที่อยู่อาศัย นอกจากนี้ยังกลับค่าความสว่างของป้ายกำกับเพื่อให้ป้ายกำกับโดดเด่นยิ่งขึ้นบนพื้นหลังสีเข้ม โปรดทราบว่าตัวอย่างที่ใช้งานได้นี้ใช้การเข้ารหัส 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
 รูปแบบแผนที่ Road Atlas ของสหรัฐอเมริกา

ไวยากรณ์สไตล์

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

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

  • feature (ไม่บังคับ) ระบุฟีเจอร์ที่จะเลือก สำหรับการแก้ไขสไตล์นี้ ฟีเจอร์ต่างๆ ได้แก่ สิ่งต่างๆ ในแผนที่ เช่น ถนน สวนสาธารณะ หรือจุดที่น่าสนใจอื่นๆ หากไม่มีอาร์กิวเมนต์ feature สไตล์ที่ระบุจะมีผลกับฟีเจอร์ทั้งหมด
  • element (ไม่บังคับ) ระบุองค์ประกอบของฟีเจอร์ที่ระบุที่จะเลือกสำหรับการแก้ไขสไตล์นี้ องค์ประกอบคือ ลักษณะของฟีเจอร์ เช่น รูปทรงเรขาคณิตหรือป้ายกำกับ หากไม่มี element อาร์กิวเมนต์ สไตล์จะมีผลกับองค์ประกอบทั้งหมด ของฟีเจอร์ที่ระบุ
  • ชุด กฎสไตล์ (บังคับ) ที่จะใช้กับฟีเจอร์และองค์ประกอบที่ระบุ API จะใช้กฎตามลำดับที่ ปรากฏในประกาศ style คุณสามารถใส่กฎได้ตามจำนวนที่ต้องการภายในข้อจำกัดความยาว URL ปกติของ Maps Static API
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 (สตริงเลขฐาน 16 ของ 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 (หากเป็น true) จะกลับค่าความสว่างที่มีอยู่ ตัวเลือกนี้มีประโยชน์ เช่น ในการเปลี่ยนไปใช้แผนที่สีเข้มที่มีข้อความสีขาวอย่างรวดเร็ว

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

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

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

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

โมเดลโทนสี ความอิ่มตัว ความสว่าง

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

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

รูปแบบโทนสี ความอิ่มตัว ความสว่าง

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

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

วงล้อสี RGB

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

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