diff --git a/dist/index.html b/dist/index.html
index 25914378..56b0c34c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -54,6 +54,7 @@ Maps JSAPI Samples
layer-data-simple
layer-data-style
map-drawing-terradraw
+ map-projection-simple
map-simple
place-autocomplete-basic-map
place-autocomplete-data-session
diff --git a/dist/samples/map-projection-simple/app/.eslintsrc.json b/dist/samples/map-projection-simple/app/.eslintsrc.json
new file mode 100644
index 00000000..4c44dab0
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/.eslintsrc.json
@@ -0,0 +1,13 @@
+{
+ "extends": [
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "rules": {
+ "@typescript-eslint/ban-ts-comment": 0,
+ "@typescript-eslint/no-this-alias": 1,
+ "@typescript-eslint/no-empty-function": 1,
+ "@typescript-eslint/explicit-module-boundary-types": 1,
+ "@typescript-eslint/no-unused-vars": 1
+ }
+}
diff --git a/dist/samples/map-projection-simple/app/README.md b/dist/samples/map-projection-simple/app/README.md
new file mode 100644
index 00000000..c4ff6495
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/README.md
@@ -0,0 +1,40 @@
+# Google Maps JavaScript Sample
+
+This sample is generated from @googlemaps/js-samples located at
+https://github.com/googlemaps-samples/js-api-samples.
+
+## Setup
+
+### Before starting run:
+
+`npm i`
+
+### Run an example on a local web server
+
+`cd samples/map-projection-simple`
+`npm start`
+
+### Build an individual example
+
+`cd samples/map-projection-simple`
+`npm run build`
+
+From 'samples':
+
+`npm run build --workspace=map-projection-simple/`
+
+### Build all of the examples.
+
+From 'samples':
+
+`npm run build-all`
+
+### Run lint to check for problems
+
+`cd samples/map-projection-simple`
+`npx eslint index.ts`
+
+## Feedback
+
+For feedback related to this sample, please open a new issue on
+[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).
diff --git a/dist/samples/map-projection-simple/app/index.html b/dist/samples/map-projection-simple/app/index.html
new file mode 100644
index 00000000..9bb17f0b
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Custom Map Projections
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/map-projection-simple/app/index.ts b/dist/samples/map-projection-simple/app/index.ts
new file mode 100644
index 00000000..60d9a75f
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/index.ts
@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_map_projection_simple]
+// This example defines an image map type using the Gall-Peters
+// projection.
+// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+let innerMap;
+
+async function initMap() {
+ // Request the needed libraries.
+ await google.maps.importLibrary("maps");
+
+ // Create a map.
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
+ mapTypeControl: false,
+ });
+
+ // Set the Gall-Peters map type.
+ initGallPeters();
+ innerMap.mapTypes.set("gallPeters", gallPetersMapType);
+ innerMap.setMapTypeId("gallPeters");
+
+ // Show the lat and lng under the mouse cursor.
+ const coordsDiv = document.getElementById("coords") as HTMLElement;
+
+ innerMap.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
+ coordsDiv.textContent =
+ "lat: " +
+ Math.round(event.latLng!.lat()) +
+ ", " +
+ "lng: " +
+ Math.round(event.latLng!.lng());
+ });
+
+ // Add some markers to the map.
+ innerMap.data.setStyle((feature) => {
+ return {
+ title: feature.getProperty("name") as string,
+ optimized: false,
+ };
+ });
+ innerMap.data.addGeoJson(cities);
+}
+
+let gallPetersMapType;
+
+function initGallPeters() {
+ const GALL_PETERS_RANGE_X = 800;
+ const GALL_PETERS_RANGE_Y = 512;
+
+ // Fetch Gall-Peters tiles stored locally on our server.
+ gallPetersMapType = new google.maps.ImageMapType({
+ getTileUrl: function (coord, zoom) {
+ const scale = 1 << zoom;
+
+ // Wrap tiles horizontally.
+ const x = ((coord.x % scale) + scale) % scale;
+
+ // Don't wrap tiles vertically.
+ const y = coord.y;
+
+ if (y < 0 || y >= scale) return "";
+
+ return (
+ "gall-peters_" +
+ zoom +
+ "_" +
+ x +
+ "_" +
+ y +
+ ".png"
+ );
+ },
+ tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
+ minZoom: 0,
+ maxZoom: 1,
+ name: "Gall-Peters",
+ });
+
+ // Describe the Gall-Peters projection used by these tiles.
+ gallPetersMapType.projection = {
+ fromLatLngToPoint: function (latLng) {
+ const latRadians = (latLng.lat() * Math.PI) / 180;
+ return new google.maps.Point(
+ GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
+ GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
+ );
+ },
+ fromPointToLatLng: function (point, noWrap) {
+ const x = point.x / GALL_PETERS_RANGE_X;
+ const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
+
+ return new google.maps.LatLng(
+ (Math.asin(1 - 2 * y) * 180) / Math.PI,
+ -180 + 360 * x,
+ noWrap
+ );
+ },
+ };
+}
+
+// GeoJSON, describing the locations and names of some cities.
+const cities = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-87.65, 41.85] },
+ properties: { name: "Chicago" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-149.9, 61.218] },
+ properties: { name: "Anchorage" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-99.127, 19.427] },
+ properties: { name: "Mexico City" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-0.126, 51.5] },
+ properties: { name: "London" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [28.045, -26.201] },
+ properties: { name: "Johannesburg" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [15.322, -4.325] },
+ properties: { name: "Kinshasa" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [151.207, -33.867] },
+ properties: { name: "Sydney" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [0, 0] },
+ properties: { name: "0°N 0°E" },
+ },
+ ],
+};
+
+initMap();
+// [END maps_map_projection_simple]
diff --git a/dist/samples/map-projection-simple/app/package.json b/dist/samples/map-projection-simple/app/package.json
new file mode 100644
index 00000000..88e8a927
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "@js-api-samples/map-projection-simple",
+ "version": "1.0.0",
+ "scripts": {
+ "build": "tsc && bash ../jsfiddle.sh map-projection-simple && bash ../app.sh map-projection-simple && bash ../docs.sh map-projection-simple && npm run build:vite --workspace=. && bash ../dist.sh map-projection-simple",
+ "test": "tsc && npm run build:vite --workspace=.",
+ "start": "tsc && vite build --base './' && vite",
+ "build:vite": "vite build --base './'",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+
+ }
+}
diff --git a/dist/samples/map-projection-simple/app/style.css b/dist/samples/map-projection-simple/app/style.css
new file mode 100644
index 00000000..2886c37d
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/style.css
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_map_projection_simple] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+ height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#coords {
+ background-color: black;
+ color: white;
+ padding: 5px;
+}
+
+/* [END maps_map_projection_simple] */
\ No newline at end of file
diff --git a/dist/samples/map-projection-simple/app/tsconfig.json b/dist/samples/map-projection-simple/app/tsconfig.json
new file mode 100644
index 00000000..366aabb0
--- /dev/null
+++ b/dist/samples/map-projection-simple/app/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "module": "esnext",
+ "target": "esnext",
+ "strict": true,
+ "noImplicitAny": false,
+ "lib": [
+ "es2015",
+ "esnext",
+ "es6",
+ "dom",
+ "dom.iterable"
+ ],
+ "moduleResolution": "Node",
+ "jsx": "preserve"
+ }
+}
diff --git a/dist/samples/map-projection-simple/dist/assets/index-C7nmny6-.css b/dist/samples/map-projection-simple/dist/assets/index-C7nmny6-.css
new file mode 100644
index 00000000..c6a2fb27
--- /dev/null
+++ b/dist/samples/map-projection-simple/dist/assets/index-C7nmny6-.css
@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */#map{height:100%}html,body{height:100%;margin:0;padding:0}#coords{background-color:#000;color:#fff;padding:5px}
diff --git a/dist/samples/map-projection-simple/dist/assets/index-DKpd9yxg.js b/dist/samples/map-projection-simple/dist/assets/index-DKpd9yxg.js
new file mode 100644
index 00000000..7d7eb1ee
--- /dev/null
+++ b/dist/samples/map-projection-simple/dist/assets/index-DKpd9yxg.js
@@ -0,0 +1,5 @@
+(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const a of t.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&n(a)}).observe(document,{childList:!0,subtree:!0});function o(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?t.credentials="include":e.crossOrigin==="anonymous"?t.credentials="omit":t.credentials="same-origin",t}function n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */const c=document.querySelector("gmp-map");let i;async function l(){await google.maps.importLibrary("maps"),i=c.innerMap,i.setOptions({mapTypeControl:!1}),m(),i.mapTypes.set("gallPeters",p),i.setMapTypeId("gallPeters");const s=document.getElementById("coords");i.addListener("mousemove",r=>{s.textContent="lat: "+Math.round(r.latLng.lat())+", lng: "+Math.round(r.latLng.lng())}),i.data.setStyle(r=>({title:r.getProperty("name"),optimized:!1})),i.data.addGeoJson(u)}let p;function m(){p=new google.maps.ImageMapType({getTileUrl:function(o,n){const e=1<=e?"":"gall-peters_"+n+"_"+t+"_"+a+".png"},tileSize:new google.maps.Size(800,512),minZoom:0,maxZoom:1,name:"Gall-Peters"}),p.projection={fromLatLngToPoint:function(o){const n=o.lat()*Math.PI/180;return new google.maps.Point(800*(.5+o.lng()/360),512*(.5-.5*Math.sin(n)))},fromPointToLatLng:function(o,n){const e=o.x/800,t=Math.max(0,Math.min(1,o.y/512));return new google.maps.LatLng(Math.asin(1-2*t)*180/Math.PI,-180+360*e,n)}}}const u={type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[-87.65,41.85]},properties:{name:"Chicago"}},{type:"Feature",geometry:{type:"Point",coordinates:[-149.9,61.218]},properties:{name:"Anchorage"}},{type:"Feature",geometry:{type:"Point",coordinates:[-99.127,19.427]},properties:{name:"Mexico City"}},{type:"Feature",geometry:{type:"Point",coordinates:[-.126,51.5]},properties:{name:"London"}},{type:"Feature",geometry:{type:"Point",coordinates:[28.045,-26.201]},properties:{name:"Johannesburg"}},{type:"Feature",geometry:{type:"Point",coordinates:[15.322,-4.325]},properties:{name:"Kinshasa"}},{type:"Feature",geometry:{type:"Point",coordinates:[151.207,-33.867]},properties:{name:"Sydney"}},{type:"Feature",geometry:{type:"Point",coordinates:[0,0]},properties:{name:"0°N 0°E"}}]};l();
diff --git a/dist/samples/map-projection-simple/dist/gall-peters_0_0_0.png b/dist/samples/map-projection-simple/dist/gall-peters_0_0_0.png
new file mode 100644
index 00000000..f9019415
Binary files /dev/null and b/dist/samples/map-projection-simple/dist/gall-peters_0_0_0.png differ
diff --git a/dist/samples/map-projection-simple/dist/gall-peters_1_0_0.png b/dist/samples/map-projection-simple/dist/gall-peters_1_0_0.png
new file mode 100644
index 00000000..d2a41280
Binary files /dev/null and b/dist/samples/map-projection-simple/dist/gall-peters_1_0_0.png differ
diff --git a/dist/samples/map-projection-simple/dist/gall-peters_1_0_1.png b/dist/samples/map-projection-simple/dist/gall-peters_1_0_1.png
new file mode 100644
index 00000000..2a5bff9f
Binary files /dev/null and b/dist/samples/map-projection-simple/dist/gall-peters_1_0_1.png differ
diff --git a/dist/samples/map-projection-simple/dist/gall-peters_1_1_0.png b/dist/samples/map-projection-simple/dist/gall-peters_1_1_0.png
new file mode 100644
index 00000000..1b6114e4
Binary files /dev/null and b/dist/samples/map-projection-simple/dist/gall-peters_1_1_0.png differ
diff --git a/dist/samples/map-projection-simple/dist/gall-peters_1_1_1.png b/dist/samples/map-projection-simple/dist/gall-peters_1_1_1.png
new file mode 100644
index 00000000..47950d0b
Binary files /dev/null and b/dist/samples/map-projection-simple/dist/gall-peters_1_1_1.png differ
diff --git a/dist/samples/map-projection-simple/dist/index.html b/dist/samples/map-projection-simple/dist/index.html
new file mode 100644
index 00000000..742e3731
--- /dev/null
+++ b/dist/samples/map-projection-simple/dist/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Custom Map Projections
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/map-projection-simple/docs/gall-peters_0_0_0.png b/dist/samples/map-projection-simple/docs/gall-peters_0_0_0.png
new file mode 100644
index 00000000..f9019415
Binary files /dev/null and b/dist/samples/map-projection-simple/docs/gall-peters_0_0_0.png differ
diff --git a/dist/samples/map-projection-simple/docs/gall-peters_1_0_0.png b/dist/samples/map-projection-simple/docs/gall-peters_1_0_0.png
new file mode 100644
index 00000000..d2a41280
Binary files /dev/null and b/dist/samples/map-projection-simple/docs/gall-peters_1_0_0.png differ
diff --git a/dist/samples/map-projection-simple/docs/gall-peters_1_0_1.png b/dist/samples/map-projection-simple/docs/gall-peters_1_0_1.png
new file mode 100644
index 00000000..2a5bff9f
Binary files /dev/null and b/dist/samples/map-projection-simple/docs/gall-peters_1_0_1.png differ
diff --git a/dist/samples/map-projection-simple/docs/gall-peters_1_1_0.png b/dist/samples/map-projection-simple/docs/gall-peters_1_1_0.png
new file mode 100644
index 00000000..1b6114e4
Binary files /dev/null and b/dist/samples/map-projection-simple/docs/gall-peters_1_1_0.png differ
diff --git a/dist/samples/map-projection-simple/docs/gall-peters_1_1_1.png b/dist/samples/map-projection-simple/docs/gall-peters_1_1_1.png
new file mode 100644
index 00000000..47950d0b
Binary files /dev/null and b/dist/samples/map-projection-simple/docs/gall-peters_1_1_1.png differ
diff --git a/dist/samples/map-projection-simple/docs/index.html b/dist/samples/map-projection-simple/docs/index.html
new file mode 100644
index 00000000..9bb17f0b
--- /dev/null
+++ b/dist/samples/map-projection-simple/docs/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Custom Map Projections
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/map-projection-simple/docs/index.js b/dist/samples/map-projection-simple/docs/index.js
new file mode 100644
index 00000000..3fa48524
--- /dev/null
+++ b/dist/samples/map-projection-simple/docs/index.js
@@ -0,0 +1,131 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// [START maps_map_projection_simple]
+// This example defines an image map type using the Gall-Peters
+// projection.
+// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
+const mapElement = document.querySelector("gmp-map");
+let innerMap;
+async function initMap() {
+ // Request the needed libraries.
+ await google.maps.importLibrary("maps");
+ // Create a map.
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
+ mapTypeControl: false,
+ });
+ // Set the Gall-Peters map type.
+ initGallPeters();
+ innerMap.mapTypes.set("gallPeters", gallPetersMapType);
+ innerMap.setMapTypeId("gallPeters");
+ // Show the lat and lng under the mouse cursor.
+ const coordsDiv = document.getElementById("coords");
+ innerMap.addListener("mousemove", (event) => {
+ coordsDiv.textContent =
+ "lat: " +
+ Math.round(event.latLng.lat()) +
+ ", " +
+ "lng: " +
+ Math.round(event.latLng.lng());
+ });
+ // Add some markers to the map.
+ innerMap.data.setStyle((feature) => {
+ return {
+ title: feature.getProperty("name"),
+ optimized: false,
+ };
+ });
+ innerMap.data.addGeoJson(cities);
+}
+let gallPetersMapType;
+function initGallPeters() {
+ const GALL_PETERS_RANGE_X = 800;
+ const GALL_PETERS_RANGE_Y = 512;
+ // Fetch Gall-Peters tiles stored locally on our server.
+ gallPetersMapType = new google.maps.ImageMapType({
+ getTileUrl: function (coord, zoom) {
+ const scale = 1 << zoom;
+ // Wrap tiles horizontally.
+ const x = ((coord.x % scale) + scale) % scale;
+ // Don't wrap tiles vertically.
+ const y = coord.y;
+ if (y < 0 || y >= scale)
+ return "";
+ return ("gall-peters_" +
+ zoom +
+ "_" +
+ x +
+ "_" +
+ y +
+ ".png");
+ },
+ tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
+ minZoom: 0,
+ maxZoom: 1,
+ name: "Gall-Peters",
+ });
+ // Describe the Gall-Peters projection used by these tiles.
+ gallPetersMapType.projection = {
+ fromLatLngToPoint: function (latLng) {
+ const latRadians = (latLng.lat() * Math.PI) / 180;
+ return new google.maps.Point(GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)));
+ },
+ fromPointToLatLng: function (point, noWrap) {
+ const x = point.x / GALL_PETERS_RANGE_X;
+ const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
+ return new google.maps.LatLng((Math.asin(1 - 2 * y) * 180) / Math.PI, -180 + 360 * x, noWrap);
+ },
+ };
+}
+// GeoJSON, describing the locations and names of some cities.
+const cities = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-87.65, 41.85] },
+ properties: { name: "Chicago" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-149.9, 61.218] },
+ properties: { name: "Anchorage" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-99.127, 19.427] },
+ properties: { name: "Mexico City" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-0.126, 51.5] },
+ properties: { name: "London" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [28.045, -26.201] },
+ properties: { name: "Johannesburg" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [15.322, -4.325] },
+ properties: { name: "Kinshasa" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [151.207, -33.867] },
+ properties: { name: "Sydney" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [0, 0] },
+ properties: { name: "0°N 0°E" },
+ },
+ ],
+};
+initMap();
+// [END maps_map_projection_simple]
diff --git a/dist/samples/map-projection-simple/docs/index.ts b/dist/samples/map-projection-simple/docs/index.ts
new file mode 100644
index 00000000..60d9a75f
--- /dev/null
+++ b/dist/samples/map-projection-simple/docs/index.ts
@@ -0,0 +1,156 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// [START maps_map_projection_simple]
+// This example defines an image map type using the Gall-Peters
+// projection.
+// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
+const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
+let innerMap;
+
+async function initMap() {
+ // Request the needed libraries.
+ await google.maps.importLibrary("maps");
+
+ // Create a map.
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
+ mapTypeControl: false,
+ });
+
+ // Set the Gall-Peters map type.
+ initGallPeters();
+ innerMap.mapTypes.set("gallPeters", gallPetersMapType);
+ innerMap.setMapTypeId("gallPeters");
+
+ // Show the lat and lng under the mouse cursor.
+ const coordsDiv = document.getElementById("coords") as HTMLElement;
+
+ innerMap.addListener("mousemove", (event: google.maps.MapMouseEvent) => {
+ coordsDiv.textContent =
+ "lat: " +
+ Math.round(event.latLng!.lat()) +
+ ", " +
+ "lng: " +
+ Math.round(event.latLng!.lng());
+ });
+
+ // Add some markers to the map.
+ innerMap.data.setStyle((feature) => {
+ return {
+ title: feature.getProperty("name") as string,
+ optimized: false,
+ };
+ });
+ innerMap.data.addGeoJson(cities);
+}
+
+let gallPetersMapType;
+
+function initGallPeters() {
+ const GALL_PETERS_RANGE_X = 800;
+ const GALL_PETERS_RANGE_Y = 512;
+
+ // Fetch Gall-Peters tiles stored locally on our server.
+ gallPetersMapType = new google.maps.ImageMapType({
+ getTileUrl: function (coord, zoom) {
+ const scale = 1 << zoom;
+
+ // Wrap tiles horizontally.
+ const x = ((coord.x % scale) + scale) % scale;
+
+ // Don't wrap tiles vertically.
+ const y = coord.y;
+
+ if (y < 0 || y >= scale) return "";
+
+ return (
+ "gall-peters_" +
+ zoom +
+ "_" +
+ x +
+ "_" +
+ y +
+ ".png"
+ );
+ },
+ tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
+ minZoom: 0,
+ maxZoom: 1,
+ name: "Gall-Peters",
+ });
+
+ // Describe the Gall-Peters projection used by these tiles.
+ gallPetersMapType.projection = {
+ fromLatLngToPoint: function (latLng) {
+ const latRadians = (latLng.lat() * Math.PI) / 180;
+ return new google.maps.Point(
+ GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360),
+ GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians))
+ );
+ },
+ fromPointToLatLng: function (point, noWrap) {
+ const x = point.x / GALL_PETERS_RANGE_X;
+ const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
+
+ return new google.maps.LatLng(
+ (Math.asin(1 - 2 * y) * 180) / Math.PI,
+ -180 + 360 * x,
+ noWrap
+ );
+ },
+ };
+}
+
+// GeoJSON, describing the locations and names of some cities.
+const cities = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-87.65, 41.85] },
+ properties: { name: "Chicago" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-149.9, 61.218] },
+ properties: { name: "Anchorage" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-99.127, 19.427] },
+ properties: { name: "Mexico City" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-0.126, 51.5] },
+ properties: { name: "London" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [28.045, -26.201] },
+ properties: { name: "Johannesburg" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [15.322, -4.325] },
+ properties: { name: "Kinshasa" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [151.207, -33.867] },
+ properties: { name: "Sydney" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [0, 0] },
+ properties: { name: "0°N 0°E" },
+ },
+ ],
+};
+
+initMap();
+// [END maps_map_projection_simple]
diff --git a/dist/samples/map-projection-simple/docs/style.css b/dist/samples/map-projection-simple/docs/style.css
new file mode 100644
index 00000000..2886c37d
--- /dev/null
+++ b/dist/samples/map-projection-simple/docs/style.css
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* [START maps_map_projection_simple] */
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+ height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#coords {
+ background-color: black;
+ color: white;
+ padding: 5px;
+}
+
+/* [END maps_map_projection_simple] */
\ No newline at end of file
diff --git a/dist/samples/map-projection-simple/jsfiddle/demo.css b/dist/samples/map-projection-simple/jsfiddle/demo.css
new file mode 100644
index 00000000..b70f3be2
--- /dev/null
+++ b/dist/samples/map-projection-simple/jsfiddle/demo.css
@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/*
+ * Always set the map height explicitly to define the size of the div element
+ * that contains the map.
+ */
+#map {
+ height: 100%;
+}
+
+/*
+ * Optional: Makes the sample page fill the window.
+ */
+html,
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#coords {
+ background-color: black;
+ color: white;
+ padding: 5px;
+}
+
diff --git a/dist/samples/map-projection-simple/jsfiddle/demo.details b/dist/samples/map-projection-simple/jsfiddle/demo.details
new file mode 100644
index 00000000..3e5a8ea2
--- /dev/null
+++ b/dist/samples/map-projection-simple/jsfiddle/demo.details
@@ -0,0 +1,7 @@
+name: map-projection-simple
+authors:
+ - Geo Developer IX Documentation Team
+tags:
+ - google maps
+load_type: h
+description: Sample code supporting Google Maps Platform JavaScript API documentation.
diff --git a/dist/samples/map-projection-simple/jsfiddle/demo.html b/dist/samples/map-projection-simple/jsfiddle/demo.html
new file mode 100644
index 00000000..aa405f6a
--- /dev/null
+++ b/dist/samples/map-projection-simple/jsfiddle/demo.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Custom Map Projections
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/samples/map-projection-simple/jsfiddle/demo.js b/dist/samples/map-projection-simple/jsfiddle/demo.js
new file mode 100644
index 00000000..7a165526
--- /dev/null
+++ b/dist/samples/map-projection-simple/jsfiddle/demo.js
@@ -0,0 +1,131 @@
+"use strict";
+/**
+ * @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// This example defines an image map type using the Gall-Peters
+// projection.
+// https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection
+const mapElement = document.querySelector("gmp-map");
+let innerMap;
+async function initMap() {
+ // Request the needed libraries.
+ await google.maps.importLibrary("maps");
+ // Create a map.
+ innerMap = mapElement.innerMap;
+ innerMap.setOptions({
+ mapTypeControl: false,
+ });
+ // Set the Gall-Peters map type.
+ initGallPeters();
+ innerMap.mapTypes.set("gallPeters", gallPetersMapType);
+ innerMap.setMapTypeId("gallPeters");
+ // Show the lat and lng under the mouse cursor.
+ const coordsDiv = document.getElementById("coords");
+ innerMap.addListener("mousemove", (event) => {
+ coordsDiv.textContent =
+ "lat: " +
+ Math.round(event.latLng.lat()) +
+ ", " +
+ "lng: " +
+ Math.round(event.latLng.lng());
+ });
+ // Add some markers to the map.
+ innerMap.data.setStyle((feature) => {
+ return {
+ title: feature.getProperty("name"),
+ optimized: false,
+ };
+ });
+ innerMap.data.addGeoJson(cities);
+}
+let gallPetersMapType;
+function initGallPeters() {
+ const GALL_PETERS_RANGE_X = 800;
+ const GALL_PETERS_RANGE_Y = 512;
+ // Fetch Gall-Peters tiles stored locally on our server.
+ gallPetersMapType = new google.maps.ImageMapType({
+ getTileUrl: function (coord, zoom) {
+ const scale = 1 << zoom;
+ // Wrap tiles horizontally.
+ const x = ((coord.x % scale) + scale) % scale;
+ // Don't wrap tiles vertically.
+ const y = coord.y;
+ if (y < 0 || y >= scale)
+ return "";
+ return ("gall-peters_" +
+ zoom +
+ "_" +
+ x +
+ "_" +
+ y +
+ ".png");
+ },
+ tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y),
+ minZoom: 0,
+ maxZoom: 1,
+ name: "Gall-Peters",
+ });
+ // Describe the Gall-Peters projection used by these tiles.
+ gallPetersMapType.projection = {
+ fromLatLngToPoint: function (latLng) {
+ const latRadians = (latLng.lat() * Math.PI) / 180;
+ return new google.maps.Point(GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)));
+ },
+ fromPointToLatLng: function (point, noWrap) {
+ const x = point.x / GALL_PETERS_RANGE_X;
+ const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y));
+ return new google.maps.LatLng((Math.asin(1 - 2 * y) * 180) / Math.PI, -180 + 360 * x, noWrap);
+ },
+ };
+}
+// GeoJSON, describing the locations and names of some cities.
+const cities = {
+ type: "FeatureCollection",
+ features: [
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-87.65, 41.85] },
+ properties: { name: "Chicago" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-149.9, 61.218] },
+ properties: { name: "Anchorage" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-99.127, 19.427] },
+ properties: { name: "Mexico City" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [-0.126, 51.5] },
+ properties: { name: "London" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [28.045, -26.201] },
+ properties: { name: "Johannesburg" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [15.322, -4.325] },
+ properties: { name: "Kinshasa" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [151.207, -33.867] },
+ properties: { name: "Sydney" },
+ },
+ {
+ type: "Feature",
+ geometry: { type: "Point", coordinates: [0, 0] },
+ properties: { name: "0°N 0°E" },
+ },
+ ],
+};
+initMap();
+
diff --git a/dist/samples/map-projection-simple/jsfiddle/gall-peters_0_0_0.png b/dist/samples/map-projection-simple/jsfiddle/gall-peters_0_0_0.png
new file mode 100644
index 00000000..f9019415
Binary files /dev/null and b/dist/samples/map-projection-simple/jsfiddle/gall-peters_0_0_0.png differ
diff --git a/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_0.png b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_0.png
new file mode 100644
index 00000000..d2a41280
Binary files /dev/null and b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_0.png differ
diff --git a/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_1.png b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_1.png
new file mode 100644
index 00000000..2a5bff9f
Binary files /dev/null and b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_0_1.png differ
diff --git a/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_0.png b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_0.png
new file mode 100644
index 00000000..1b6114e4
Binary files /dev/null and b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_0.png differ
diff --git a/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_1.png b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_1.png
new file mode 100644
index 00000000..47950d0b
Binary files /dev/null and b/dist/samples/map-projection-simple/jsfiddle/gall-peters_1_1_1.png differ
diff --git a/index.html b/index.html
index 25914378..56b0c34c 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,7 @@ Maps JSAPI Samples
layer-data-simple
layer-data-style
map-drawing-terradraw
+ map-projection-simple
map-simple
place-autocomplete-basic-map
place-autocomplete-data-session
diff --git a/package-lock.json b/package-lock.json
index 9a8054cd..f1027688 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1417,6 +1417,10 @@
"resolved": "samples/map-drawing-terradraw",
"link": true
},
+ "node_modules/@js-api-samples/map-projection-simple": {
+ "resolved": "samples/map-projection-simple",
+ "link": true
+ },
"node_modules/@js-api-samples/map-simple": {
"resolved": "samples/map-simple",
"link": true
@@ -8797,15 +8801,19 @@
"version": "1.0.0",
"dependencies": {
"@googlemaps/js-api-loader": "^2.0.0",
- "terra-draw": "*",
- "terra-draw-google-maps-adapter": "*"
+ "terra-draw": "latest",
+ "terra-draw-google-maps-adapter": "latest"
},
"devDependencies": {
- "@types/google.maps": "*",
+ "@types/google.maps": "latest",
"typescript": "^5.9.2",
"vite": "^7.1.7"
}
},
+ "samples/map-projection-simple": {
+ "name": "@js-api-samples/map-projection-simple",
+ "version": "1.0.0"
+ },
"samples/map-simple": {
"name": "@js-api-samples/map-simple",
"version": "1.0.0"
@@ -8937,7 +8945,7 @@
"name": "@js-api-samples/react-ui-kit-place-details-latlng-compact",
"version": "1.0.0",
"dependencies": {
- "@vis.gl/react-google-maps": "*",
+ "@vis.gl/react-google-maps": "latest",
"react": "^19.2.0",
"react-dom": "^19.0.0"
},