การซ่อนฟีเจอร์แผนที่ด้วยการจัดรูปแบบ
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
นอกจากจะเปลี่ยนสไตล์ของฟีเจอร์บนแผนที่แล้ว คุณยังซ่อนฟีเจอร์เหล่านั้นทั้งหมดได้ด้วย
ตัวอย่างนี้แสดงวิธีซ่อนจุดที่น่าสนใจ (POI) ของธุรกิจ
และไอคอนขนส่งสาธารณะบนแผนที่
การจัดรูปแบบใช้ได้เฉพาะในkGMSTypeNormal
ประเภทแผนที่
การใช้รูปแบบกับแผนที่
หากต้องการใช้รูปแบบแผนที่ที่กำหนดเองกับแผนที่ ให้เรียกใช้ GMSMapStyle(...)
เพื่อสร้างอินสแตนซ์ GMSMapStyle
โดยส่ง URL สำหรับไฟล์ JSON ในเครื่อง หรือสตริง JSON
ที่มีคำจำกัดความของรูปแบบ กำหนดอินสแตนซ์ GMSMapStyle
ให้กับพร็อพเพอร์ตี้
mapStyle
ของแผนที่
การใช้ไฟล์ JSON
ตัวอย่างต่อไปนี้แสดงการเรียก GMSMapStyle(...)
และการส่ง URL สำหรับ
ไฟล์ในเครื่อง
ตัวอย่างโค้ดต่อไปนี้ถือว่าโปรเจ็กต์ของคุณมีไฟล์ชื่อ
style.json
Swift
import GoogleMaps
class MapStyling: UIViewController {
// Set the status bar style to complement night-mode.
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
override func loadView() {
let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
do {
// Set the map style by passing the URL of the local file.
if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
} else {
NSLog("Unable to find style.json")
}
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
Objective-C
#import "MapStyling.h"
@import GoogleMaps;
@interface MapStyling ()
@end
@implementation MapStyling
// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
return UIStatusBarStyleLightContent;
}
- (void)loadView {
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
longitude:151.20
zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
mapView.myLocationEnabled = YES;
NSBundle *mainBundle = [NSBundle mainBundle];
NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
NSError *error;
// Set the map style by passing the URL for style.json.
GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];
if (!style) {
NSLog(@"The style definition could not be loaded: %@", error);
}
mapView.mapStyle = style;
self.view = mapView;
}
@end
หากต้องการกำหนดตัวเลือกสไตล์ ให้เพิ่มไฟล์ใหม่ลงในโปรเจ็กต์ชื่อ style.json
แล้ววางการประกาศสไตล์ JSON ต่อไปนี้เพื่อซ่อนจุดที่น่าสนใจ (POI) ของธุรกิจและไอคอนระบบขนส่งสาธารณะ
แสดง/ซ่อน JSON
[
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
}
]
การใช้ทรัพยากรสตริง
ตัวอย่างต่อไปนี้แสดงการเรียก GMSMapStyle()
และการส่งสตริง
ทรัพยากร
Swift
class MapStylingStringResource: UIViewController {
let MapStyle = "JSON_STYLE_GOES_HERE"
// Set the status bar style to complement night-mode.
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
override func loadView() {
let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
do {
// Set the map style by passing a valid JSON string.
mapView.mapStyle = try GMSMapStyle(jsonString: MapStyle)
} catch {
NSLog("One or more of the map styles failed to load. \(error)")
}
self.view = mapView
}
}
Objective-C
@implementation MapStylingStringResource
// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";
// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
return UIStatusBarStyleLightContent;
}
- (void)loadView {
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
longitude:151.20
zoom:12];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
mapView.myLocationEnabled = YES;
NSError *error;
// Set the map style by passing a valid JSON string.
GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];
if (!style) {
NSLog(@"The style definition could not be loaded: %@", error);
}
mapView.mapStyle = style;
self.view = mapView;
}
@end
การประกาศรูปแบบต่อไปนี้จะซ่อนจุดที่น่าสนใจ (POI) ของธุรกิจและไอคอนระบบขนส่งสาธารณะ
วางสตริงรูปแบบต่อไปนี้เป็นค่าของตัวแปร kMapStyle
แสดง/ซ่อน JSON
@"["
@" {"
@" \"featureType\": \"poi.business\","
@" \"elementType\": \"all\","
@" \"stylers\": ["
@" {"
@" \"visibility\": \"off\""
@" }"
@" ]"
@" },"
@" {"
@" \"featureType\": \"transit\","
@" \"elementType\": \"labels.icon\","
@" \"stylers\": ["
@" {"
@" \"visibility\": \"off\""
@" }"
@" ]"
@" }"
@"]"
การประกาศรูปแบบ JSON
แผนที่ที่มีการจัดรูปแบบใช้แนวคิด 2 อย่างในการใช้สีและการเปลี่ยนแปลงรูปแบบอื่นๆ กับแผนที่
- ตัวเลือกจะระบุองค์ประกอบทางภูมิศาสตร์ที่คุณจัดรูปแบบได้
บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ และอื่นๆ รวมถึงป้ายกำกับ ตัวเลือกประกอบด้วยฟีเจอร์
และองค์ประกอบที่ระบุเป็นพร็อพเพอร์ตี้
featureType
และ
elementType
- Stylers คือพร็อพเพอร์ตี้สีและการมองเห็นที่คุณใช้กับองค์ประกอบของแผนที่ได้
โดยจะกำหนดสีที่แสดงผ่าน
การผสมค่าเฉดสี สี และความสว่าง/แกมมา
ดูคำอธิบายโดยละเอียดเกี่ยวกับตัวเลือกการจัดรูปแบบ JSON ได้ที่ข้อมูลอ้างอิงสไตล์
ใช้ตัวช่วยจัดรูปแบบ Maps Platform เป็นวิธีที่รวดเร็ว
ในการสร้างออบเจ็กต์การจัดรูปแบบ JSON Maps SDK สำหรับ iOS รองรับ
การประกาศรูปแบบเดียวกันกับ Maps JavaScript API
ตัวอย่างโค้ดแบบเต็ม
ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่แสดงการใช้การจัดรูปแบบ
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-31 UTC
[null,null,["อัปเดตล่าสุด 2025-08-31 UTC"],[[["\u003cp\u003eLearn how to hide map features like business POIs and transit icons using the Google Maps SDK for iOS.\u003c/p\u003e\n"],["\u003cp\u003eApply custom styles by providing a local JSON file or a JSON string containing style definitions to the \u003ccode\u003emapStyle\u003c/code\u003e property of your map.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the \u003ccode\u003efeatureType\u003c/code\u003e and \u003ccode\u003eelementType\u003c/code\u003e properties in your JSON to select the specific map components you want to style.\u003c/p\u003e\n"],["\u003cp\u003eControl the visibility and color of map elements through \u003ccode\u003estylers\u003c/code\u003e in your JSON style declaration.\u003c/p\u003e\n"],["\u003cp\u003eExplore the Maps Platform Styling Wizard for a user-friendly way to generate JSON styling objects for your map.\u003c/p\u003e\n"]]],["To style maps, you can hide features like business POIs and transit icons. Apply styles using `GMSMapStyle`, either with a local JSON file URL or a JSON string. Create a `style.json` file, and use selectors (features and elements) and stylers (visibility) to define map styles. Use the `mapStyle` property on the map to apply styles. Alternatively, you can define a JSON string with the same style options. You can utilize the [Maps Platform Styling Wizard](https://mapstyle.withgoogle.com) for an efficient JSON style object creation.\n"],null,["Select platform: [Android](/maps/documentation/android-sdk/hiding-features \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/hiding-features \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/json-styling-overview \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nAs well as changing the style of features on the map, you can also hide them\nentirely. This example shows you how to hide business points of interest (POIs)\nand public transit icons on your map.\n\nStyling works only on the `kGMSTypeNormal` map type.\n\nApplying styles to your map\n\nTo apply custom map styles to a map, call `GMSMapStyle(...)` to create a\n`GMSMapStyle` instance, passing in a URL for a local JSON file, or a JSON\nstring containing style definitions. Assign the `GMSMapStyle` instance to the\n`mapStyle` property of the map.\n\nUsing a JSON file\n\nThe following examples show calling `GMSMapStyle(...)` and passing a URL for a\nlocal file:\n\nThe following code sample assumes your project contains a file named\n`style.json`:\n\n\nSwift \n\n```swift\nimport GoogleMaps\n\nclass MapStyling: UIViewController {\n\n // Set the status bar style to complement night-mode.\n override var preferredStatusBarStyle: UIStatusBarStyle {\n return .lightContent\n }\n\n override func loadView() {\n let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)\n let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)\n\n do {\n // Set the map style by passing the URL of the local file.\n if let styleURL = Bundle.main.url(forResource: \"style\", withExtension: \"json\") {\n mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)\n } else {\n NSLog(\"Unable to find style.json\")\n }\n } catch {\n NSLog(\"One or more of the map styles failed to load. \\(error)\")\n }\n\n self.view = mapView\n }\n}\n \n```\n\nObjective-C \n\n```objective-c\n#import \"MapStyling.h\"\n@import GoogleMaps;\n\n@interface MapStyling ()\n\n@end\n\n@implementation MapStyling\n\n// Set the status bar style to complement night-mode.\n- (UIStatusBarStyle)preferredStatusBarStyle {\n return UIStatusBarStyleLightContent;\n}\n\n- (void)loadView {\n GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86\n longitude:151.20\n zoom:12];\n GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];\n mapView.myLocationEnabled = YES;\n\n NSBundle *mainBundle = [NSBundle mainBundle];\n NSURL *styleUrl = [mainBundle URLForResource:@\"style\" withExtension:@\"json\"];\n NSError *error;\n\n // Set the map style by passing the URL for style.json.\n GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];\n\n if (!style) {\n NSLog(@\"The style definition could not be loaded: %@\", error);\n }\n\n mapView.mapStyle = style;\n self.view = mapView;\n}\n\n@end\n \n```\n\n\u003cbr /\u003e\n\nTo define the style options, add a new file to your project named `style.json`,\nand paste the following JSON style declaration to hide business points of\ninterest (POIs) and public transit icons:\nShow/Hide the JSON. \n\n```text\n[\n {\n \"featureType\": \"poi.business\",\n \"elementType\": \"all\",\n \"stylers\": [\n {\n \"visibility\": \"off\"\n }\n ]\n },\n {\n \"featureType\": \"transit\",\n \"elementType\": \"labels.icon\",\n \"stylers\": [\n {\n \"visibility\": \"off\"\n }\n ]\n }\n]\n```\n\nUsing a string resource\n\nThe following examples show calling `GMSMapStyle()` and passing a string\nresource:\n\n\nSwift \n\n```swift\nclass MapStylingStringResource: UIViewController {\n\n let MapStyle = \"JSON_STYLE_GOES_HERE\"\n\n // Set the status bar style to complement night-mode.\n override var preferredStatusBarStyle: UIStatusBarStyle {\n return .lightContent\n }\n\n override func loadView() {\n let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)\n let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)\n\n do {\n // Set the map style by passing a valid JSON string.\n mapView.mapStyle = try GMSMapStyle(jsonString: MapStyle)\n } catch {\n NSLog(\"One or more of the map styles failed to load. \\(error)\")\n }\n\n self.view = mapView\n }\n}\n \n```\n\nObjective-C \n\n```objective-c\n@implementation MapStylingStringResource\n\n// Paste the JSON string to use.\nstatic NSString *const kMapStyle = @\"JSON_STYLE_GOES_HERE\";\n\n// Set the status bar style to complement night-mode.\n- (UIStatusBarStyle)preferredStatusBarStyle {\n return UIStatusBarStyleLightContent;\n}\n\n- (void)loadView {\n GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86\n longitude:151.20\n zoom:12];\n GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];\n mapView.myLocationEnabled = YES;\n\n NSError *error;\n\n // Set the map style by passing a valid JSON string.\n GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];\n\n if (!style) {\n NSLog(@\"The style definition could not be loaded: %@\", error);\n }\n\n mapView.mapStyle = style;\n self.view = mapView;\n}\n\n@end\n \n```\n\n\u003cbr /\u003e\n\nThe following style declaration hides business points of interest (POIs) and\npublic transit icons. Paste the following style string as the value of\nthe `kMapStyle` variable:\nShow/Hide the JSON. \n\n```objective-c\n@\"[\"\n@\" {\"\n@\" \\\"featureType\\\": \\\"poi.business\\\",\"\n@\" \\\"elementType\\\": \\\"all\\\",\"\n@\" \\\"stylers\\\": [\"\n@\" {\"\n@\" \\\"visibility\\\": \\\"off\\\"\"\n@\" }\"\n@\" ]\"\n@\" },\"\n@\" {\"\n@\" \\\"featureType\\\": \\\"transit\\\",\"\n@\" \\\"elementType\\\": \\\"labels.icon\\\",\"\n@\" \\\"stylers\\\": [\"\n@\" {\"\n@\" \\\"visibility\\\": \\\"off\\\"\"\n@\" }\"\n@\" ]\"\n@\" }\"\n@\"]\"\n```\n\nJSON style declarations\n\nStyled maps use two concepts to apply colors and other style changes to a\nmap:\n\n- **Selectors** specify the geographic components that you can style on the map. These include roads, parks, bodies of water, and more, as well as their labels. The selectors include *features* and *elements* , specified as `featureType` and `elementType` properties.\n- **Stylers** are color and visibility properties that you can apply to map elements. They define the displayed color through a combination of hue, color, and lightness/gamma values.\n\nSee the [style reference](/maps/documentation/ios-sdk/style-reference) for a detailed description of the\nJSON styling options.\n\nMaps Platform Styling Wizard \n[](https://mapstyle.withgoogle.com) \n[](https://mapstyle.withgoogle.com) \n[](https://mapstyle.withgoogle.com)[](https://mapstyle.withgoogle.com/) \n[](https://mapstyle.withgoogle.com/) \n[](https://mapstyle.withgoogle.com/) \n[](https://mapstyle.withgoogle.com/) \n[](https://mapstyle.withgoogle.com/) \n[](https://mapstyle.withgoogle.com/) \n[Create\ncustom styles for the Google Maps Platform APIs](https://mapstyle.withgoogle.com)\n\nUse the [Maps Platform Styling Wizard](https://mapstyle.withgoogle.com) as a quick way\nto generate a JSON styling object. The Maps SDK for iOS supports the\nsame style declarations as the Maps JavaScript API.\n\nFull code samples\n\nThe [ApiDemos repository](https://github.com/googlemaps-samples/maps-sdk-for-ios-samples) on GitHub includes\nsamples that demonstrate the use of styling."]]