Maps

A map displays outdoor or indoor geographical data in your app or on your website.

A map uses a familiar interface that supports most of the functionality provided by the system-provided Maps apps such as zooming, panning, and rotation. A map can also include annotations and overlays, show routing information, and be configured to show 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 contain any characters, including Unicode characters, but should be limited to two to three 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 people zoom in on a map, clusters should expand to progressively reveal individual points of interest.

Help people see the Apple logo and legal link. It's fine when parts of your interface temporarily cover the logo and link, but these elements shouldn't be covered all the time. To help you maintain the visibility of the Apple logo and legal link, follow these recommendations.

• Use adequate padding to separate the logo and link from the map boundaries and your custom controls. For example, it works well to use 7 points of padding on the sides of the elements and 10 points above and below them.
• Avoid causing the logo and link to move with your interface. It's best when the Apple logo and legal link appear to be fixed to the map.
• If your custom interface can move relative to the map, use the lowest position of the custom element to determine the placement of the logo and link. For example, if your app lets people pull up a custom card from the bottom of the screen, place the Apple logo and legal link 10 points above the lowest resting position of the card.

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.