Custom tiles in Google Maps

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

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.

forked from donmccurdy's block: Custom tiles in Google Maps

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
    /* styles */

html, body {
      margin: 0;
      padding: 0;
    }

#map {
      width: 100vw;
      height: 100vh;
    }
    </style>
  </head>
  <body>

var map;
    var mapEl;
    var layer;
    var layerID = 'my-custom-layer';

Updated missing url https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM to https://maps.googleapis.com/maps/api/js?callback=initmap&key=aizasydaoldv31y5ls8abbpuaqt9t8rzmdfomim

https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM