googlemaps-samples · willum070 · Oct 8, 2025 · Oct 8, 2025
diff --git a/samples/map-projection-simple/README.md b/samples/map-projection-simple/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/samples/map-projection-simple/index.html b/samples/map-projection-simple/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ @license
+ Copyright 2019 Google LLC. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+-->
+<!-- [START maps_map_projection_simple] -->
+<html>
+  <head>
+    <title>Custom Map Projections</title>
+
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script type="module" src="./index.js"></script>
+    <!-- prettier-ignore -->
+    <script>(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })
+      ({ key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta" });</script>
+  </head>
+  <body>
+    <gmp-map center="0,0" zoom="0">
+      <div id="coords" slot="control-block-start-inline-center"></div>
+    </gmp-map>
+  </body>
+</html>
+<!-- [END maps_map_projection_simple] -->
diff --git a/samples/map-projection-simple/index.ts b/samples/map-projection-simple/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/samples/map-projection-simple/package.json b/samples/map-projection-simple/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/samples/map-projection-simple/public/gall-peters_0_0_0.png b/samples/map-projection-simple/public/gall-peters_0_0_0.png
diff --git a/samples/map-projection-simple/public/gall-peters_1_0_0.png b/samples/map-projection-simple/public/gall-peters_1_0_0.png
diff --git a/samples/map-projection-simple/public/gall-peters_1_0_1.png b/samples/map-projection-simple/public/gall-peters_1_0_1.png
diff --git a/samples/map-projection-simple/public/gall-peters_1_1_0.png b/samples/map-projection-simple/public/gall-peters_1_1_0.png
diff --git a/samples/map-projection-simple/public/gall-peters_1_1_1.png b/samples/map-projection-simple/public/gall-peters_1_1_1.png
diff --git a/samples/map-projection-simple/style.css b/samples/map-projection-simple/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] */
diff --git a/samples/map-projection-simple/tsconfig.json b/samples/map-projection-simple/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"
+  }
+}