Select platform: [Android](https://developers.google.com/maps/documentation/places/android-sdk/icons.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/places/ios-sdk/icons.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/place-icons.md.txt "View this page for the JavaScript platform docs.") [Web Service](https://developers.google.com/maps/documentation/places/web-service/icons.md.txt "View this page for the Web Service platform docs.") Place icons indicate the various types of places (for example coffee shops, libraries, and museums). You can request URLs for icons in PNG format, as well as the corresponding icon background color, with [Current Place](https://developers.google.com/maps/documentation/places/ios-sdk/current-place), and [Place Details](https://developers.google.com/maps/documentation/places/ios-sdk/place-details) requests. To request an icon image and background color for a place, include the following fields in your request: - `GMSPlaceFieldIconImageURL` - `GMSPlaceFieldIconBackgroundColor` The following examples demonstrate using the icon image and background color from a Current Place or Place Details request: ### Places Swift SDK for iOS ```swift // Initialize Places Swift client let placesClient = PlacesClient.shared // A hotel in Saigon with an attribution. let placeID = "ChIJV4k8_9UodTERU5KXbkYpSYs" // Specify the place data types to return. let fetchPlaceRequest = FetchPlaceRequest( placeID: placeID, placeProperties: [.displayName, .iconMaskURL, .iconBackgroundColor] ) Task { switch await placesClient.fetchPlace(with: fetchPlaceRequest) { case .success(let place): // Print displayName using String(describing:) print("The selected place is: \(String(describing: place.displayName))") // We primarily need the iconMaskURL to proceed with image loading. // iconBackgroundColor can be handled even if nil. guard let iconMaskURL = place.iconMaskURL else { print("Icon mask URL not available for this place. Cannot display icon.") return // Exit if iconMaskURL is missing } print("The icon mask URL is: \(iconMaskURL)") // Print iconBackgroundColor using String(describing:) print("The icon background color is: \(String(describing: place.iconBackgroundColor))") // Asynchronously load the icon image DispatchQueue.global().async { // The iconMaskURL from the new Places SDK is already a URL guard let imageData = try? Data(contentsOf: iconMaskURL) else { print("Could not download image data from URL: \(iconMaskURL)") return } DispatchQueue.main.async { guard let iconImage = UIImage(data: imageData) else { print("Could not create UIImage from downloaded data.") return } // --- Example of how you might use the icon and background color --- // Ensure you have an imageView outlet connected in your UI // For example: // @IBOutlet weak var myImageViewContainer: UIView! // @IBOutlet weak var myIconImageView: UIImageView! // For this example, we'll create them programmatically: let iconBackgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 50)) // Adjust frame as needed // Directly assign the optional UIColor. If nil, background will be clear. iconBackgroundView.backgroundColor = place.iconBackgroundColor let imageView = UIImageView() // Initialize an empty UIImageView imageView.frame = iconBackgroundView.bounds // Make icon view same size as background imageView.contentMode = .scaleAspectFit // Adjust content mode as needed // Tint the icon image (mask) to white // The icon from iconMaskURL is intended to be used as a mask. let templateImage = iconImage.withRenderingMode(.alwaysTemplate) imageView.image = templateImage imageView.tintColor = UIColor.white // Add the image view on top of the background view iconBackgroundView.addSubview(imageView) } } } } ``` ### Swift ```swift // Icon image URL let url = URL(string: place.iconImageUrl) DispatchQueue.global().async { guard let url = url, let imageData = try? Data(contentsOf: url) else { print("Could not get image") return } DispatchQueue.main.async { let iconImage = UIImage(data: iconImageData) // Icon image background color let iconBackgroundView = UIView(frame: .zero) iconBackgroundView.backgroundColor = place.iconBackgroundColor // Change icon image color to white let templateImage = iconImage.imageWithRenderingMode(UIImageRenderingModeAlwaysTemplate) imageView.image = templateImage imageView.tintColor = UIColor.white } } ``` ### Objective-C ```objective-c GMSPlace *place; dispatch_async(dispatch_get_global_queue(0, 0), ^{ // Icon image URL NSData * iconImageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: place.iconImageUrl]]; if (!iconImageData) return; dispatch_async(dispatch_get_main_queue(), ^{ UIImage *iconImage = [UIImage imageWithData:iconImageData]; // Icon image background color UIView *iconBackgroundView = [[UIView alloc] initWithFrame:CGRectZero]; [iconBackgroundView setBackgroundColor:place.iconBackgroundColor]; // Change icon image color to white iconImage = [iconImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; [imageView setTintColor:[UIColor whiteColor]]; }); }); ``` > [!CAUTION] > Icon URLs may change, so be sure to always use `iconImageUrl` to look up the URL for an icon. ## Fields Each Place icon contains these fields: - `iconImageUrl` returns the base URL for a non-colored PNG icon. - `iconBackgroundColor` returns the default `UIExtendedSRGBColorSpace` color code for the place's category. ## Place icon and background color requests The following tables show all of the available place icons by category. By default these display with a black glyph. The icon background color is dictated by the place's category. | **Place category: Food and drink** (icon background color #FF9E67) |||| |---|---|---|---| | ![Bar](https://maps.gstatic.com/mapfiles/place_api/icons/v2/bar_pinlet.svg) Bar, Night club | ![Cafe](https://maps.gstatic.com/mapfiles/place_api/icons/v2/cafe_pinlet.svg) Cafe | ![Restaurant](https://maps.gstatic.com/mapfiles/place_api/icons/v2/restaurant_pinlet.svg) Restaurant, Bakery | | ![Bookstore](https://maps.gstatic.com/mapfiles/place_api/icons/v2/shopping_pinlet.svg) Books, Clothing, Electronics, Jewelry, Shoes, Shopping center/Mall | ![Convenience store](https://maps.gstatic.com/mapfiles/place_api/icons/v2/convenience_pinlet.png) Convenience store | ![Grocery](https://maps.gstatic.com/mapfiles/place_api/icons/v2/shoppingcart_pinlet.svg) Grocery, Supermarket | ![Pharmacy](https://maps.gstatic.com/mapfiles/place_api/icons/v2/pharmacy_pinlet.svg) Pharmacy | | ![ATM](https://maps.gstatic.com/mapfiles/place_api/icons/v2/atm_pinlet.svg) ATM | ![Bank](https://maps.gstatic.com/mapfiles/place_api/icons/v2/bank-intl_pinlet.svg) Bank | ![Gas](https://maps.gstatic.com/mapfiles/place_api/icons/v2/gas_pinlet.svg) Gas | ![Lodging](https://maps.gstatic.com/mapfiles/place_api/icons/v2/hotel_pinlet.svg) Lodging | | ![Post office](https://maps.gstatic.com/mapfiles/place_api/icons/v2/postoffice_pinlet.svg) Post office | | ![Aquarium, Tourist](https://maps.gstatic.com/mapfiles/place_api/icons/v2/dolphin_pinlet.svg) Aquarium, Tourist | ![Golf](https://maps.gstatic.com/mapfiles/place_api/icons/v2/golf_pinlet.svg) Golf | ![Historic](https://maps.gstatic.com/mapfiles/place_api/icons/v2/historic_pinlet.svg) Historic | ![Movie](https://maps.gstatic.com/mapfiles/place_api/icons/v2/movie_pinlet.svg) Movie | | ![Museum](https://maps.gstatic.com/mapfiles/place_api/icons/v2/museum_pinlet.svg) Museum | ![Theater](https://maps.gstatic.com/mapfiles/place_api/icons/v2/theater_pinlet.svg) Theater | | ![Airport](https://maps.gstatic.com/mapfiles/place_api/icons/v2/airport_pinlet.svg) Airport | ![Bus](https://maps.gstatic.com/mapfiles/place_api/icons/v2/bus_share_taxi_pinlet.svg) Bus, rideshare, taxi | ![Train/Rail](https://maps.gstatic.com/mapfiles/place_api/icons/v2/train_rail_1_pinlet.svg) Train/Rail | | ![Cemetery](https://maps.gstatic.com/mapfiles/place_api/icons/v2/cemetery_pinlet.svg) Cemetery | ![Civic building](https://maps.gstatic.com/mapfiles/place_api/icons/v2/civic-bldg_pinlet.svg) Civic building | ![Library](https://maps.gstatic.com/mapfiles/place_api/icons/v2/library_pinlet.svg) Library | ![Monument](https://maps.gstatic.com/mapfiles/place_api/icons/v2/monument_pinlet.svg) Monument | | ![Parking](https://maps.gstatic.com/mapfiles/place_api/icons/v2/parking_pinlet.svg) Parking | ![School (primary, secondary, university)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/school_pinlet.svg) School (primary, secondary, university) | ![Worship (Christian)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_christian_pinlet.svg) Worship (Christian) | | ![Worship (Hindu)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_hindu_pinlet.svg) Worship (Hindu) | ![Worship (Islam)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_islam_pinlet.svg) Worship (Islam) | ![Worship (Jain)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_jain_pinlet.svg) Worship (Jain) | ![Worship (Jewish)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_jewish_pinlet.svg) Worship (Jewish) | | ![Worship (Sikh)](https://maps.gstatic.com/mapfiles/place_api/icons/v2/worship_sikh_pinlet.svg) Worship (Sikh) | ![Generic business](https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet.svg) Generic business | | ![Boating](https://maps.gstatic.com/mapfiles/place_api/icons/v2/boating_pinlet.svg) Boating | ![Camping](https://maps.gstatic.com/mapfiles/place_api/icons/v2/camping_pinlet.svg) Camping | ![Park](https://maps.gstatic.com/mapfiles/place_api/icons/v2/tree_pinlet.svg) Park | ![Stadium](https://maps.gstatic.com/mapfiles/place_api/icons/v2/stadium_pinlet.svg) Stadium | | ![Zoo](https://maps.gstatic.com/mapfiles/place_api/icons/v2/paw_pinlet.svg) Zoo | | ![Hospital](https://maps.gstatic.com/mapfiles/place_api/icons/v2/hospital-H_pinlet.svg) Hospital | ![Police](https://maps.gstatic.com/mapfiles/place_api/icons/v2/police_pinlet.svg) Police |