An example showing how to use custom tiles with the Google Maps JS API.
- (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_URLwith 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.
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
thank you