App and Website Maps
A map displays outdoor or indoor geographical data in your iOS, macOS, or tvOS app, or on your website, in a familiar interface that supports most of the functionality provided by Apple’s standard Maps apps. A map supports zooming, panning, and rotation; can include annotations and overlays; can show routing information; and can be configured to show a a standard map, satellite imagery, or both. watchOS apps can also display maps—for design guidance, see Apple Watch Maps.
In general, keep your map interactive. People are accustomed to using gestures—like pinch-to-zoom and swipe-to-pan—to interact with the Maps app. They expect to interact with other maps in similar ways.
Use annotations that match the visual style of your app. Annotations identify points of interest on your map. The default annotation marker has a red tint and a white pin glyph. You can change the tint to match the color scheme of your app. You can also change the glyph to a string or image, like a logo. A glyph string can be any characters, including Unicode characters, but should be limited to 2-3 characters in length for readability. For developer guidance, see MKAnnotationView.
Help people quickly find points of interest. Consider offering a search feature, combined with a way to filter locations by category. The search field for a shopping mall map, for example, might include filters that make it easy to find common store types, like clothing, housewares, electronics, jewelry, and toys.
Cluster overlapping points of interest to improve map legibility. A cluster uses a single pin to represent multiple points of interest within close proximity. As a map is zoomed in, clusters should expand to progressively reveal individual points of interest.
Make sure the Apple logo and legal link are visible. Your app should never intentionally hide or obscure these elements. These elements should only be obscured when a temporary view, like a search screen, is displayed over a map.
Ensure sufficient contrast between custom controls and the map. Insufficient contrast makes controls hard to see and can cause them to blend in with the map. If necessary, consider using a thin stroke or light drop shadow to help a custom control stand out.
For additional design guidance specific to indoor venues, see Indoor Maps. For developer guidance on adding maps to your iOS, macOS, or tvOS app, see MapKit. To learn how to add maps to your website, see MapKit JS.