Mobile System Design and API Design of Google Maps

Designing a mobile application like Google Maps involves building a system that delivers rich, real-time navigation features. In the previous lesson, we explored the key design considerations that underpin Google Maps’ mobile experience. Now, we will look into the system architecture and API design that bring those principles to life, enabling smooth, reliable, and responsive navigation.

This lesson covers the core mobile system layers and their responsibilities, as well as how APIs facilitate communication between the app and back-end services. We will also examine how real-time updates are managed and how the system maintains resilience in offline scenarios.

High-level mobile System Design of Google Maps

When a user opens the Google Maps mobile app, the interaction starts with the view layer, which is responsible for rendering the main map interface, search bars, and navigation controls. This layer is designed to be reactive, observing data from the ViewModel and smoothly updating as the UI state changes.

User actions, such as entering a destination or selecting a route, are captured by the View and passed as commands to the ViewModel. The ViewModel acts as the state holder and logic controller for the UI, managing the UI state by:

• Maintaining live data streams (e.g., LiveData or StateFlow for the current location, active routes, and traffic alerts).

• Handling user inputs and commands.

• Managing loading and error states for the UI to display.

The ViewModel then interacts with the repository, which is a component designed to handle the complexities of data access. The repository:

• Checks local caches (e.g., saved routes, offline maps) to quickly serve data and enhance performance, especially in offline or low-connectivity scenarios.

• Makes network requests to back-end services when fresh data is needed.

• Manages the real-time data flow by subscribing to WebSocket streams for live updates when the app is active, and by responding to ...