D3 Examples - Custom tiles in Google Maps

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.

xxxxxxxxxx
 
<!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>
​
    <div id="map"></div>
​
    <script>
    var TILE_URL = 'https://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
​
    var map;
    var mapEl;
    var layer;
    var layerID = 'my-custom-layer';
​
    window.initMap = function() {
      // Select the element with id="map".
      mapEl = document.querySelector('#map');
      
      // Create a new map.
      map = new google.maps.Map(mapEl, {
        center: new google.maps.LatLng(39.8282, -98.5795),
        zoom: 4
      });
      
      // Create a tile layer, configured to fetch tiles from TILE_URL.
      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
      });
      
      // Apply the new tile layer to the map.
      map.mapTypes.set(layerID, layer);
      map.setMapTypeId(layerID);
    };
    </script>
    
    <!-- NOTE: The 'key' parameter should be replaced with your Google Maps API Key. -->
    <script src="https://maps.googleapis.com/maps/api/js?callback=initmap&key=aizasydaoldv31y5ls8abbpuaqt9t8rzmdfomim"></script>
    
  </body>
</html>
​
    