2D Tiles overview

Map Tiles are simply the division of the world into an indexed grid. It lets you access and utilize map data efficiently and dynamically at multiple cartographic scales. Map Tiles API gives you access to multiple thematic geodatasets, including Google-curated:

• Roadmap image tiles based on vector topographic data with Google’s cartographic styling.

• Orthophotography captured by both satellite and airborne cameras that deliver top down (nadir) imagery of the earth.

• Hillshade contour maps.

2D Map Tiles are all georeferenced and aligned to each other. They're selected based on the geographic extent of the viewport and the zoom level. Zoom levels range from zero (to view the world in its entirety) to 22 (to view streets and blocks).

Map themes

You can get map tiles for the following map themes.

To request map tiles from Map Tiles API, you must first request a session token. The session token tracks the current state of your map and viewport. When you set up your session token, you must set the mapType value to match the map theme that you want. Then, you must include the session token in each of your requests to Map Tiles API.

Viewport information requests

The viewport defines the size of the box that frames the world scene. Viewport information requests return details about the map tiles that make up your current viewport. The reason that you request viewport information is to ensure that you avoid requesting imagery at zoom levels that don't exist.

For example, most cities have imagery at zoom level 22, but not the ocean since it would just end up displaying featureless blue squares.

The viewport request is an HTTPS GET request in the following form.

curl "https://tile.googleapis.com/tile/v1/viewport?session=YOUR_SESSION_TOKEN&key=YOUR_API_KEY&zoom=zoom&north=north&south=south&east=east&west=west"

The request contains the following fields:

zoom

The zoom level of the viewport.

north, south, east, west

The furthest north, south, east, and west points in the viewport, expressed in degrees. North and south must be in the range (-90,90), east and west must be in the range (-180, 180). To express bounds crossing the antimeridian, west can be positive (for example, 170) and east can be negative (for example, -170). All parameters are required.

Viewport information responses

The viewport response tells you which areas have imagery, and at which zoom levels. A viewport information response has the following form.

{
  "copyright": "Map data ©2023",
  "maxZoomRects": [
    {
      "maxZoom": 19,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 9,
      "north": 90,
      "south": -90,
      "east": 180,
      "west": -180
    },
    {
      "maxZoom": 14,
      "north": 84.375,
      "south": -84.375,
      "east": 180,
      "west": -180
    }, ...
  ]
}

The response body contains the following fields.

copyright

Contains an attribution string that you must display on your map when you display roadmap and satellite tiles. For more information, see the Map Tiles API Policies.

maxZoomRect

Contains an array of bounding rectangles that overlap with the current viewport. Also contains the maximum zoom level available within each rectangle.

Tile coordinate functions

Tools (simple functions) are available in most programming languages to convert from latitude/longitude pairs to tile coordinates at a specific zoom level. Consider the following JavaScript code example that first converts from a latLng to a point, and then from a point to tile coordinates.

var TILE_SIZE = 256;

function fromLatLngToPoint(latLng) {
  var mercator = -Math.log(Math.tan((0.25 + latLng.lat() / 360) * Math.PI));
  return {
    x: TILE_SIZE * (latLng.lng() / 360 + 0.5),
    y: TILE_SIZE / 2 * (1 +  mercator / Math.PI)
  };
}

function fromLatLngToTileCoord(latLng, zoom) {
  var point = fromLatLngToPoint(latLng);
  var scale = Math.pow(2, zoom);

  return {
    x: Math.floor(point.x * scale / TILE_SIZE),
    y: Math.floor(point.y * scale / TILE_SIZE),
    z: zoom
  };
}