Custom tiles in Google Maps

An example showing how to use custom tiles with the Google Maps JS API.

▶️ Live demo

Instructions

• (1) Sign into the Google Cloud Platform Console, or create a new account.
• (2) Create a new project.
• (3) In the console, open: Menu (☰) → API Manager → Library. Select the Google Maps JavaScript API and choose Enable.
• (4) Go to the Credentials page in the sidebar. Select Create credentials → API key. Save this key for later. You may, optionally, add restrictions so that this new key may only be used on your domain(s).
• (5) Add an element to the page, where the map should appear.

<div id="map"></div>

• (6) Add the Maps API script to your page:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

• (7) Create a new map, attached to the element.

var mapEl = document.querySelector('#map');
var map = new google.maps.Map(mapEl, {
  center: new google.maps.LatLng(39.8282, -98.5795),
  zoom: 5
});

• (8) Replace the sample TILE_URL with your own, which should look (roughly) like: https://example.com/sample/{z}_{x}_{y}.jpg.

Create a new tile layer using this URL:

// Replace this with your URL.
var TILE_URL = 'https://example.com/sample/{z}_{x}_{y}.jpg';

// Name the layer anything you like.
var layerID = 'my_custom_layer';

// Create a new ImageMapType layer.
var layer = new google.maps.ImageMapType({
  name: layerID,
  getTileUrl: function(coord, zoom) {
    console.log(coord);
    var url = TILE_URL
      .replace('{x}', coord.x)
      .replace('{y}', coord.y)
      .replace('{z}', zoom);
    return url;
  },
  tileSize: new google.maps.Size(256, 256),
  minZoom: 1,
  maxZoom: 20
});

• (9) Add the new tile layer to your map:

// Register the new layer, then activate it.
map.mapTypes.set(layerID, layer);
map.setMapTypeId(layerID);

A complete example is shown in index.html.

Further documentation at Google Maps JS API: Image Map Types.

License

Sample code by Google, under the Apache 2.0 License.

Watercolor map tiles by Stamen Design, under CC-BY-3.0.