Skip to content

Maps and location

Does your app need a map, address search or directions?

Start with the visitor’s task. Show a known venue with a readable address and a directions link. Add a map, address lookup or in-app routing when the visitor needs that extra step.

What should a venue page show first?

Put the venue name, address and entrance details in the page text. Someone reading on a small screen should still know where to go if the map is slow to load.

Add a directions link when the next step is getting there. Use an embedded map when seeing the surroundings or comparing locations helps the visitor decide.

Which service does each location task need?

A map shows where a place is. Address search finds a place or turns an address into coordinates, a pair of numbers marking its position. Routing works out how to travel between points.

Start with the parts your app needs. List map loads, searches and routes as separate actions when you estimate usage.

Compare tools

Scroll the table sideways to read every column.

Compare map display, location services and the usage you have to track.
ToolWhat shows the placeThe way you add a map or hand off to a map app.How search and directions workWhich work needs a separate service or action.What affects costWhich event is counted or which resources you provide.What to keep under your controlThe venue information, credits or usage terms to check.
Google Maps PlatformUse a Maps URL for a handoff or JavaScript API for an interactive map.Use Places and Routes services for in-app search and routes.Dynamic Maps counts loads. Other services have separate units.Keep your own venue details and check the terms for any provider data you use.
MapboxStyle a web map and add markers for your venues.Add Search Box or Geocoding for lookup and Directions API for routes.Count web map loads and check each search and routing unit.Keep required attribution and check storage rights for returned coordinates.
MapLibreDraw a map in the browser using a style and data sources you choose.Choose any search or route service separately.BSD-3-Clause library. Check tile hosting and other service costs.Keep source attribution and your venue data separately from the map style.
LeafletDraw an interactive web map and pin. Supply a tile layer for the background.Choose separate address search or directions when the app needs them.BSD-licensed library. Tiles and other services have their own pricing and terms.Keep your venue details, pin coordinates and the tile source’s required credit.
OpenStreetMapUse community map data through a renderer and a tile source.Public Nominatim is limited and excludes autocomplete. Choose separate services for other needs.Open data and hosting have separate terms. Foundation raster tiles are best effort.Keep venue details, visible OpenStreetMap attribution and applicable data license information.
GeoapifyUse hosted raster or vector tiles with a compatible map library.Use hosted geocoding for addresses and routing for directions.Free lists 3,000 credits per day. A tile request uses a quarter credit and a standard address lookup uses one.Keep original venue details and the attribution for stored results. Free also requires Geoapify credit.
LocationIQUse hosted tiles and show the chosen pin in a map.Look up a written address or add typing suggestions. Routing is a separate operation.Free lists 5,000 requests daily plus shorter limits and commercial attribution conditions.Keep original venue details. Check request-cache and map-tile rules separately.
HEREChoose a HERE map display or show the verified address separately.Search for the destination, then route between positions using the intended travel mode.Check the transaction unit for each feature. Traffic-aware routing may add charges.Keep your own entrance data and check storage terms for returned results.
openrouteserviceDraw the returned route in a separate map or show written directions.Pass positions and a travel mode. Written addresses need a separate lookup step.Hosted quotas depend on the operation. Self-hosting adds server and data upkeep.Keep your own place details and review hosted attribution and reuse terms.
RadarUse the map product if you need to draw the venue.Use a geofence for entry or exit events. Keep a manual check-in path.Tracked-user pricing and Core Maps request pricing are separate units.Keep your venue boundaries and check terms for stored address results and event data.

When should you ask where the visitor is?

Ask only when it helps with a task they chose, such as finding venues nearby. Keep an alternative such as typing a neighborhood or postal code if they decline the browser’s location request.

Decide how exact the starting point needs to be and whether to keep it at all. Before storing a coordinate returned by a service, check its storage terms.

How can you rehearse a venue listing without sending any location?

Draw a page for a fictional library event. Use no location permission, real address, account or API request.

  1. Write the venue card
    Show a made-up address and entrance note. Draw a directions link and mark where it hands the task to another app.
  2. Draw the map failing
    Cross out the map. Check whether the card still tells the visitor where to go.
  3. Draw a second task
    Sketch someone looking for a closer branch. Write whether they type a place or choose to share location, and mark which service or app needs that input.