Custom tiles in Google Maps

.block

license: apache-2.0

README.md

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.

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

index.html

<!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 = 'http://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>

thank you

Thanks for share the snippet.

Can you explain the process of creating custom tiles for particular city or country?

@PavanKu

If you have the GeoTIFF file for a particular area, you can generate tiles for google maps using gdal
(https://github.com/OSGeo/gdal/blob/master/gdal/swig/python/scripts/gdal2tiles.py)
then you can serve them with a static web server.

Or you can use the website that this gist uses http://maps.stamen.com/

Thanks @tteke,

and how can i get GeoTIFF file for a particular area? I am a newbie in custom tile generation.

any updates how to get GeoTIFF file for a particular area

What type of GeoTIFF data are you looking for? GeoTIFF is a file format that stores raster Geo data, it has many different use cases such as vegetation, elevation, satellite / aerial imagery, etc.

This didn't quite work for me, i changed these lines:

map.mapTypes.set(layerID, layer);
map.setMapTypeId(layerID);

to

map.mapTypes.set(layerID, layer);
map.overlayMapTypes.insertAt(1, layer); 

Thanks for great gist anyway!