sushantjha8 · July 26, 2019 09:42 · Apr 15, 2019 · Apr 11, 2017 · Apr 11, 2017 · Apr 11, 2017
diff --git a/index.html b/index.html
@@ -62,7 +62,7 @@
     </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=AIzaSyCYcTO2uK_yjgU8Aa3OTplYwBEMfxIIp4w"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyDaoLdV31Y5ls8ABBpuAQt9t8RzMDfOMiM"></script>
 
   </body>
 </html>
diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ map.setMapTypeId(layerID);
 
 A complete example is shown in `index.html`.
 
-Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes).
+Further documentation at [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes).
 
 ## License
 

diff --git a/.block.yaml → .block b/.block.yaml → .block
diff --git a/README.md b/README.md
@@ -72,6 +72,6 @@ Further documentation: [Google Maps JS API: Image Map Types](https://developers.
 
 ## License
 
-Code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0).
+Sample code by Google, under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0).
 
-Watercolor map data created by [Stamen](http://maps.stamen.com/), licensed [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
+Watercolor map tiles by [Stamen Design](http://stamen.com/), under [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
diff --git a/README.md b/README.md
@@ -66,7 +66,9 @@ map.mapTypes.set(layerID, layer);
 map.setMapTypeId(layerID);
 ```
 
-A complete example is shown in `index.html`. Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
+A complete example is shown in `index.html`.
+
+Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes).
 
 ## License
 

diff --git a/README.md b/README.md
@@ -66,7 +66,7 @@ map.mapTypes.set(layerID, layer);
 map.setMapTypeId(layerID);
 ```
 
-Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
+A complete example is shown in `index.html`. Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
 
 ## License
 

diff --git a/README.md b/README.md
@@ -14,7 +14,13 @@ An example showing how to use custom tiles with the [Google Maps JS API](https:/
 <div id="map"></div>
 ```
 
-* **(6)** Create a new map, attached to the element.
+* **(6)** Add the Maps API script to your page:
+
+```html
+<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
+```
+
+* **(7)** Create a new map, attached to the element.
 
 ```javascript
 var mapEl = document.querySelector('#map');
@@ -24,13 +30,7 @@ var map = new google.maps.Map(mapEl, {
 });
 ```
 
-* **(7)** As shown in `index.html`, add the Maps API script to your page:
-
-```html
-<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
-```
-
-* **(8)** In a new script, replace the sample `TILE_URL` with your own, which should look (roughly) like: `https://example.com/sample/{z}_{x}_{y}.jpg`.
+* **(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:
 

diff --git a/README.md b/README.md
@@ -14,11 +14,11 @@ An example showing how to use custom tiles with the [Google Maps JS API](https:/
 <div id="map"></div>
 ```
 
-* **(6)** Create a new map in this element.
+* **(6)** Create a new map, attached to the element.
 
 ```javascript
 var mapEl = document.querySelector('#map');
-map = new google.maps.Map(mapEl, {
+var map = new google.maps.Map(mapEl, {
   center: new google.maps.LatLng(39.8282, -98.5795),
   zoom: 5
 });

diff --git a/README.md b/README.md
@@ -35,8 +35,13 @@ map = new google.maps.Map(mapEl, {
 Create a new tile layer using this URL:
 
 ```javascript
+// 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) {
@@ -56,6 +61,7 @@ var layer = new google.maps.ImageMapType({
 * **(9)** Add the new tile layer to your map:
 
 ```javascript
+// Register the new layer, then activate it.
 map.mapTypes.set(layerID, layer);
 map.setMapTypeId(layerID);
 ```

diff --git a/README.md b/README.md
@@ -60,7 +60,7 @@ map.mapTypes.set(layerID, layer);
 map.setMapTypeId(layerID);
 ```
 
-Further documentation: [Image Map Types • Google Maps JS API](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
+Further documentation: [Google Maps JS API: Image Map Types](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
 
 ## License
 

diff --git a/README.md b/README.md
@@ -4,17 +4,17 @@ An example showing how to use custom tiles with the [Google Maps JS API](https:/
 
 ## Instructions
 
-* (1) Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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.
+* **(1)** Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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.
 
 ```html
 <div id="map"></div>
 ```
 
-* (6) Create a new map in this element.
+* **(6)** Create a new map in this element.
 
 ```javascript
 var mapEl = document.querySelector('#map');
@@ -24,13 +24,13 @@ map = new google.maps.Map(mapEl, {
 });
 ```
 
-* (7) As shown in `index.html`, add the Maps API script to your page:
+* **(7)** As shown in `index.html`, add the Maps API script to your page:
 
 ```html
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
 ```
 
-* (8) In a new script, replace the sample `TILE_URL` with your own, which should look (roughly) like: `https://example.com/sample/{z}_{x}_{y}.jpg`.
+* **(8)** In a new script, 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:
 
@@ -53,7 +53,7 @@ var layer = new google.maps.ImageMapType({
 });
 ```
 
-* (9) Add the new tile layer to your map:
+* **(9)** Add the new tile layer to your map:
 
 ```javascript
 map.mapTypes.set(layerID, layer);

diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-# Custom tiles in Google Maps
-
 An example showing how to use custom tiles with the [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/).
 
 [▶️ Live demo](http://bl.ocks.org/donmccurdy/raw/1d3998a37c73e9435b5503e5f37457be)

diff --git a/.block.yaml b/.block.yaml
@@ -0,0 +1 @@
+license: apache-2.0
diff --git a/README.md b/README.md
@@ -6,17 +6,17 @@ An example showing how to use custom tiles with the [Google Maps JS API](https:/
 
 ## Instructions
 
-1. Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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.
+* (1) Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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.
 
 ```html
 <div id="map"></div>
 ```
 
-6. Create a new map in this element.
+* (6) Create a new map in this element.
 
 ```javascript
 var mapEl = document.querySelector('#map');
@@ -26,13 +26,13 @@ map = new google.maps.Map(mapEl, {
 });
 ```
 
-7. As shown in `index.html`, add the Maps API script to your page:
+* (7) As shown in `index.html`, add the Maps API script to your page:
 
 ```html
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
 ```
 
-8. In a new script, replace the sample `TILE_URL` with your own, which should look (roughly) like: `https://example.com/sample/{z}_{x}_{y}.jpg`.
+* (8) In a new script, 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:
 
@@ -55,7 +55,7 @@ var layer = new google.maps.ImageMapType({
 });
 ```
 
-7. Add the new tile layer to your map:
+* (9) Add the new tile layer to your map:
 
 ```javascript
 map.mapTypes.set(layerID, layer);

diff --git a/README.md b/README.md
@@ -66,4 +66,6 @@ Further documentation: [Image Map Types • Google Maps JS API](https://develope
 
 ## License
 
-Code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). Watercolor data was created by [Stamen](http://maps.stamen.com/), licensed [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
+Code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0).
+
+Watercolor map data created by [Stamen](http://maps.stamen.com/), licensed [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+# Custom tiles in Google Maps
+
 An example showing how to use custom tiles with the [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/).
 
 [▶️ Live demo](http://bl.ocks.org/donmccurdy/raw/1d3998a37c73e9435b5503e5f37457be)

diff --git a/README.md b/README.md
@@ -1,12 +1,8 @@
-Custom tiles in Google Maps
-=========================
-
 An example showing how to use custom tiles with the [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/).
 
 [▶️ Live demo](http://bl.ocks.org/donmccurdy/raw/1d3998a37c73e9435b5503e5f37457be)
 
-Instructions
-------------
+## Instructions
 
 1. Sign into the [Google Cloud Platform Console](console.cloud.google.com), or create a new account.
 2. Create a new project.
@@ -28,10 +24,8 @@ map = new google.maps.Map(mapEl, {
 });
 ```
 
-
 7. As shown in `index.html`, add the Maps API script to your page:
 
-
 ```html
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
 ```
@@ -68,7 +62,6 @@ map.setMapTypeId(layerID);
 
 Further documentation: [Image Map Types • Google Maps JS API](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
 
-License
------------------
+## License
 
 Code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). Watercolor data was created by [Stamen](http://maps.stamen.com/), licensed [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
       // Create a new map.
       map = new google.maps.Map(mapEl, {
         center: new google.maps.LatLng(39.8282, -98.5795),
-        zoom: 5
+        zoom: 4
       });
 
       // Create a tile layer, configured to fetch tiles from TILE_URL.

diff --git a/google-image-map-types.md → README.md b/google-image-map-types.md → README.md
@@ -3,7 +3,7 @@ Custom tiles in Google Maps
 
 An example showing how to use custom tiles with the [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/).
 
-[▶️ Live demo](https://google-map-types.glitch.me/)
+[▶️ Live demo](http://bl.ocks.org/donmccurdy/raw/1d3998a37c73e9435b5503e5f37457be)
 
 Instructions
 ------------

diff --git a/index.html b/index.html
@@ -0,0 +1,68 @@
+<!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: 5
+      });
+
+      // 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=AIzaSyCYcTO2uK_yjgU8Aa3OTplYwBEMfxIIp4w"></script>
+
+  </body>
+</html>
diff --git a/google-image-map-types.md b/google-image-map-types.md
@@ -11,7 +11,7 @@ Instructions
 1. Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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*. You may, optionally, add restrictions so that this new key may only be used on your domain(s).
+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.
 
 ```html

diff --git a/google-image-map-types.md b/google-image-map-types.md
@@ -0,0 +1,74 @@
+Custom tiles in Google Maps
+=========================
+
+An example showing how to use custom tiles with the [Google Maps JS API](https://developers.google.com/maps/documentation/javascript/).
+
+[▶️ Live demo](https://google-map-types.glitch.me/)
+
+Instructions
+------------
+
+1. Sign into the [Google Cloud Platform Console](console.cloud.google.com), 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*. 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.
+
+```html
+<div id="map"></div>
+```
+
+6. Create a new map in this element.
+
+```javascript
+var mapEl = document.querySelector('#map');
+map = new google.maps.Map(mapEl, {
+  center: new google.maps.LatLng(39.8282, -98.5795),
+  zoom: 5
+});
+```
+
+
+7. As shown in `index.html`, add the Maps API script to your page:
+
+
+```html
+<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
+```
+
+8. In a new script, 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:
+
+```javascript
+var TILE_URL = 'https://example.com/sample/{z}_{x}_{y}.jpg';
+var layerID = 'my_custom_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
+});
+```
+
+7. Add the new tile layer to your map:
+
+```javascript
+map.mapTypes.set(layerID, layer);
+map.setMapTypeId(layerID);
+```
+
+Further documentation: [Image Map Types • Google Maps JS API](https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
+
+License
+-----------------
+
+Code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). Watercolor data was created by [Stamen](http://maps.stamen.com/), licensed [CC-BY-3.0](https://creativecommons.org/licenses/by/3.0/).
No results found