-
-
- My Google Maps Demo
-
-
-
- My Google Maps Demo
-
-
-
- My Google Maps Demo
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-animation/app/index.ts b/dist/samples/advanced-markers-animation/app/index.ts
deleted file mode 100644
index de359c1ac..000000000
--- a/dist/samples/advanced-markers-animation/app/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_advanced_markers_animation]
-/**
- * Returns a random lat lng position within the map bounds.
- * @param {!google.maps.Map} map
- * @return {!google.maps.LatLngLiteral}
- */
-function getRandomPosition(map) {
- const bounds = map.getBounds();
- const minLat = bounds.getSouthWest().lat();
- const minLng = bounds.getSouthWest().lng();
- const maxLat = bounds.getNorthEast().lat();
- const maxLng = bounds.getNorthEast().lng();
-
- const latRange = maxLat - minLat;
-
- // Note: longitude can span from a positive longitude in the west to a
- // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
- // span that covers the whole USA.
- let lngRange = maxLng - minLng;
- if (maxLng < minLng) {
- lngRange += 360;
- }
-
- return {
- lat: minLat + Math.random() * latRange,
- lng: minLng + Math.random() * lngRange,
- };
-}
-
-const total = 100;
-const intersectionObserver = new IntersectionObserver((entries) => {
- for (const entry of entries) {
- if (entry.isIntersecting) {
- entry.target.classList.add('drop');
- intersectionObserver.unobserve(entry.target);
- }
- }
-});
-
-async function initMap(): Promise
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-animation/docs/index.html b/dist/samples/advanced-markers-animation/docs/index.html
deleted file mode 100644
index f4e62d739..000000000
--- a/dist/samples/advanced-markers-animation/docs/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-animation/docs/index.js b/dist/samples/advanced-markers-animation/docs/index.js
deleted file mode 100644
index 0cfb0dfa2..000000000
--- a/dist/samples/advanced-markers-animation/docs/index.js
+++ /dev/null
@@ -1,97 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_advanced_markers_animation]
-/**
- * Returns a random lat lng position within the map bounds.
- * @param {!google.maps.Map} map
- * @return {!google.maps.LatLngLiteral}
- */
-function getRandomPosition(map) {
- const bounds = map.getBounds();
- const minLat = bounds.getSouthWest().lat();
- const minLng = bounds.getSouthWest().lng();
- const maxLat = bounds.getNorthEast().lat();
- const maxLng = bounds.getNorthEast().lng();
- const latRange = maxLat - minLat;
- // Note: longitude can span from a positive longitude in the west to a
- // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
- // span that covers the whole USA.
- let lngRange = maxLng - minLng;
- if (maxLng < minLng) {
- lngRange += 360;
- }
- return {
- lat: minLat + Math.random() * latRange,
- lng: minLng + Math.random() * lngRange,
- };
-}
-const total = 100;
-const intersectionObserver = new IntersectionObserver((entries) => {
- for (const entry of entries) {
- if (entry.isIntersecting) {
- entry.target.classList.add('drop');
- intersectionObserver.unobserve(entry.target);
- }
- }
-});
-async function initMap() {
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
- const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
- const map = new Map(document.getElementById('map'), {
- zoom: 14,
- center: position,
- mapId: '4504f8b37365c3d0',
- });
- // Create 100 markers to animate.
- google.maps.event.addListenerOnce(map, 'idle', () => {
- for (let i = 0; i < 100; i++) {
- createMarker(map, AdvancedMarkerElement, PinElement);
- }
- });
- // Add a button to reset the example.
- const controlDiv = document.createElement('div');
- const controlUI = document.createElement('button');
- controlUI.classList.add('ui-button');
- controlUI.innerText = 'Reset the example';
- controlUI.addEventListener('click', () => {
- // Reset the example by reloading the map iframe.
- refreshMap();
- });
- controlDiv.appendChild(controlUI);
- map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
-}
-function createMarker(map, AdvancedMarkerElement, PinElement) {
- const pinElement = new PinElement();
- const content = pinElement.element;
- const advancedMarker = new AdvancedMarkerElement({
- position: getRandomPosition(map),
- map: map,
- content: content,
- });
- content.style.opacity = '0';
- content.addEventListener('animationend', (event) => {
- content.classList.remove('drop');
- content.style.opacity = '1';
- });
- const time = 2 + Math.random(); // 2s delay for easy to see the animation
- content.style.setProperty('--delay-time', time + 's');
- intersectionObserver.observe(content);
-}
-function refreshMap() {
- // Refresh the map.
- const mapContainer = document.getElementById('mapContainer');
- const map = document.getElementById('map');
- map.remove();
- const mapDiv = document.createElement('div');
- mapDiv.id = 'map';
- mapContainer.appendChild(mapDiv);
- initMap();
-}
-initMap();
-// [END maps_advanced_markers_animation]
diff --git a/dist/samples/advanced-markers-animation/docs/index.ts b/dist/samples/advanced-markers-animation/docs/index.ts
deleted file mode 100644
index de359c1ac..000000000
--- a/dist/samples/advanced-markers-animation/docs/index.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_advanced_markers_animation]
-/**
- * Returns a random lat lng position within the map bounds.
- * @param {!google.maps.Map} map
- * @return {!google.maps.LatLngLiteral}
- */
-function getRandomPosition(map) {
- const bounds = map.getBounds();
- const minLat = bounds.getSouthWest().lat();
- const minLng = bounds.getSouthWest().lng();
- const maxLat = bounds.getNorthEast().lat();
- const maxLng = bounds.getNorthEast().lng();
-
- const latRange = maxLat - minLat;
-
- // Note: longitude can span from a positive longitude in the west to a
- // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
- // span that covers the whole USA.
- let lngRange = maxLng - minLng;
- if (maxLng < minLng) {
- lngRange += 360;
- }
-
- return {
- lat: minLat + Math.random() * latRange,
- lng: minLng + Math.random() * lngRange,
- };
-}
-
-const total = 100;
-const intersectionObserver = new IntersectionObserver((entries) => {
- for (const entry of entries) {
- if (entry.isIntersecting) {
- entry.target.classList.add('drop');
- intersectionObserver.unobserve(entry.target);
- }
- }
-});
-
-async function initMap(): Promise
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-animation/jsfiddle/demo.js b/dist/samples/advanced-markers-animation/jsfiddle/demo.js
deleted file mode 100644
index d38dbe926..000000000
--- a/dist/samples/advanced-markers-animation/jsfiddle/demo.js
+++ /dev/null
@@ -1,97 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * Returns a random lat lng position within the map bounds.
- * @param {!google.maps.Map} map
- * @return {!google.maps.LatLngLiteral}
- */
-function getRandomPosition(map) {
- const bounds = map.getBounds();
- const minLat = bounds.getSouthWest().lat();
- const minLng = bounds.getSouthWest().lng();
- const maxLat = bounds.getNorthEast().lat();
- const maxLng = bounds.getNorthEast().lng();
- const latRange = maxLat - minLat;
- // Note: longitude can span from a positive longitude in the west to a
- // negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
- // span that covers the whole USA.
- let lngRange = maxLng - minLng;
- if (maxLng < minLng) {
- lngRange += 360;
- }
- return {
- lat: minLat + Math.random() * latRange,
- lng: minLng + Math.random() * lngRange,
- };
-}
-const total = 100;
-const intersectionObserver = new IntersectionObserver((entries) => {
- for (const entry of entries) {
- if (entry.isIntersecting) {
- entry.target.classList.add('drop');
- intersectionObserver.unobserve(entry.target);
- }
- }
-});
-async function initMap() {
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker'));
- const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
- const map = new Map(document.getElementById('map'), {
- zoom: 14,
- center: position,
- mapId: '4504f8b37365c3d0',
- });
- // Create 100 markers to animate.
- google.maps.event.addListenerOnce(map, 'idle', () => {
- for (let i = 0; i < 100; i++) {
- createMarker(map, AdvancedMarkerElement, PinElement);
- }
- });
- // Add a button to reset the example.
- const controlDiv = document.createElement('div');
- const controlUI = document.createElement('button');
- controlUI.classList.add('ui-button');
- controlUI.innerText = 'Reset the example';
- controlUI.addEventListener('click', () => {
- // Reset the example by reloading the map iframe.
- refreshMap();
- });
- controlDiv.appendChild(controlUI);
- map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
-}
-function createMarker(map, AdvancedMarkerElement, PinElement) {
- const pinElement = new PinElement();
- const content = pinElement.element;
- const advancedMarker = new AdvancedMarkerElement({
- position: getRandomPosition(map),
- map: map,
- content: content,
- });
- content.style.opacity = '0';
- content.addEventListener('animationend', (event) => {
- content.classList.remove('drop');
- content.style.opacity = '1';
- });
- const time = 2 + Math.random(); // 2s delay for easy to see the animation
- content.style.setProperty('--delay-time', time + 's');
- intersectionObserver.observe(content);
-}
-function refreshMap() {
- // Refresh the map.
- const mapContainer = document.getElementById('mapContainer');
- const map = document.getElementById('map');
- map.remove();
- const mapDiv = document.createElement('div');
- mapDiv.id = 'map';
- mapContainer.appendChild(mapDiv);
- initMap();
-}
-initMap();
-
diff --git a/dist/samples/advanced-markers-basic-style/app/.eslintsrc.json b/dist/samples/advanced-markers-basic-style/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/advanced-markers-basic-style/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/advanced-markers-basic-style/app/README.md b/dist/samples/advanced-markers-basic-style/app/README.md
deleted file mode 100644
index 3a41fe3d3..000000000
--- a/dist/samples/advanced-markers-basic-style/app/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Google Maps JavaScript Sample
-
-## advanced-markers-basic-style
-
-The advanced-markers-basic-style sample demonstrates how to apply basic styling to advanced markers.
-
-Follow these instructions to set up and run advanced-markers-basic-style sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-First `cd` to the folder for the sample to run, then:
-
-`npm start`
-
-### Build an individual example
-
-From `samples/`:
-
-`npm run build --workspace=advanced-markers-basic-style/`
-
-### Build all of the examples.
-
-From `samples/`:
-
-`npm run build-all`
-
-## 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/advanced-markers-basic-style/app/index.html b/dist/samples/advanced-markers-basic-style/app/index.html
deleted file mode 100644
index bb5ea7d88..000000000
--- a/dist/samples/advanced-markers-basic-style/app/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-collision/app/index.ts b/dist/samples/advanced-markers-collision/app/index.ts
deleted file mode 100644
index a62fe82bc..000000000
--- a/dist/samples/advanced-markers-collision/app/index.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// eslint-disable no-undef
-// [START maps_advanced_markers_collision]
-const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
-
-// Initialize and add the map
-async function initMap(): Promise
-
-
-
-
diff --git a/dist/samples/advanced-markers-collision/docs/index.html b/dist/samples/advanced-markers-collision/docs/index.html
deleted file mode 100644
index 4dce23637..000000000
--- a/dist/samples/advanced-markers-collision/docs/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/advanced-markers-collision/docs/index.js b/dist/samples/advanced-markers-collision/docs/index.js
deleted file mode 100644
index 6c577dea5..000000000
--- a/dist/samples/advanced-markers-collision/docs/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// eslint-disable no-undef
-// [START maps_advanced_markers_collision]
-const mapElement = document.querySelector('gmp-map');
-// Initialize and add the map
-async function initMap() {
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
- let markers = [];
- let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
- // @ts-ignore
- const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
- select.listen('MDCSelect:change', () => {
- collisionBehavior = select.value;
- markers.forEach((marker) => {
- marker.collisionBehavior = collisionBehavior;
- });
- });
- select.value = collisionBehavior;
- // Create some markers on the map
- let locations = [
- [-122.3402, 47.6093],
- [-122.3402, 47.6094],
- [-122.3403, 47.6094],
- [-122.3384, 47.6098],
- [-122.3389, 47.6095],
- [-122.3396, 47.6095],
- [-122.3379, 47.6097],
- [-122.3378, 47.6097],
- [-122.3396, 47.6091],
- [-122.3383, 47.6089],
- [-122.3379, 47.6093],
- [-122.3381, 47.6095],
- [-122.3378, 47.6095],
- ];
- locations.forEach(([lng, lat]) => {
- // [START maps_advanced_markers_collision_create_marker]
- const advancedMarker = new AdvancedMarkerElement({
- position: new google.maps.LatLng({ lat, lng }),
- collisionBehavior: collisionBehavior,
- });
- mapElement.appendChild(advancedMarker);
- // [END maps_advanced_markers_collision_create_marker]
- markers.push(advancedMarker);
- });
-}
-initMap();
-// [END maps_advanced_markers_collision]
diff --git a/dist/samples/advanced-markers-collision/docs/index.ts b/dist/samples/advanced-markers-collision/docs/index.ts
deleted file mode 100644
index a62fe82bc..000000000
--- a/dist/samples/advanced-markers-collision/docs/index.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// eslint-disable no-undef
-// [START maps_advanced_markers_collision]
-const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
-
-// Initialize and add the map
-async function initMap(): Promise
-
-
-
-
diff --git a/dist/samples/advanced-markers-collision/jsfiddle/demo.js b/dist/samples/advanced-markers-collision/jsfiddle/demo.js
deleted file mode 100644
index dcdce3370..000000000
--- a/dist/samples/advanced-markers-collision/jsfiddle/demo.js
+++ /dev/null
@@ -1,54 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// eslint-disable no-undef
-
-const mapElement = document.querySelector('gmp-map');
-// Initialize and add the map
-async function initMap() {
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
- let markers = [];
- let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
- // @ts-ignore
- const select = new mdc.select.MDCSelect(document.querySelector('.mdc-select'));
- select.listen('MDCSelect:change', () => {
- collisionBehavior = select.value;
- markers.forEach((marker) => {
- marker.collisionBehavior = collisionBehavior;
- });
- });
- select.value = collisionBehavior;
- // Create some markers on the map
- let locations = [
- [-122.3402, 47.6093],
- [-122.3402, 47.6094],
- [-122.3403, 47.6094],
- [-122.3384, 47.6098],
- [-122.3389, 47.6095],
- [-122.3396, 47.6095],
- [-122.3379, 47.6097],
- [-122.3378, 47.6097],
- [-122.3396, 47.6091],
- [-122.3383, 47.6089],
- [-122.3379, 47.6093],
- [-122.3381, 47.6095],
- [-122.3378, 47.6095],
- ];
- locations.forEach(([lng, lat]) => {
-
- const advancedMarker = new AdvancedMarkerElement({
- position: new google.maps.LatLng({ lat, lng }),
- collisionBehavior: collisionBehavior,
- });
- mapElement.appendChild(advancedMarker);
-
- markers.push(advancedMarker);
- });
-}
-initMap();
-
diff --git a/dist/samples/advanced-markers-draggable/app/.eslintsrc.json b/dist/samples/advanced-markers-draggable/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/advanced-markers-draggable/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/advanced-markers-draggable/app/README.md b/dist/samples/advanced-markers-draggable/app/README.md
deleted file mode 100644
index f23c355ac..000000000
--- a/dist/samples/advanced-markers-draggable/app/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Google Maps JavaScript Sample
-
-## advanced-markers-draggable
-
-The advanced-markers-draggable sample demonstrates how to make advanced markers draggable.
-
-Follow these instructions to set up and run advanced-markers-draggable sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-First `cd` to the folder for the sample to run, then:
-
-`npm start`
-
-### Build an individual example
-
-From `samples/`:
-
-`npm run build --workspace=advanced-markers-draggable/`
-
-### Build all of the examples.
-
-From `samples/`:
-
-`npm run build-all`
-
-## 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/advanced-markers-draggable/app/index.html b/dist/samples/advanced-markers-draggable/app/index.html
deleted file mode 100644
index 9e0976c34..000000000
--- a/dist/samples/advanced-markers-draggable/app/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
- ${property.type}
-
-
-
- `;
- return content;
-}
-
-const properties = [
- {
- address: '215 Emily St, MountainView, CA',
- description: 'Single family house with modern design',
- price: '$ 3,889,000',
- type: 'home',
- bed: 5,
- bath: 4.5,
- size: 300,
- position: {
- lat: 37.50024109655184,
- lng: -122.28528451834352,
- },
- },
- {
- address: '108 Squirrel Ln 🐿, Menlo Park, CA',
- description: 'Townhouse with friendly neighbors',
- price: '$ 3,050,000',
- type: 'building',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.44440882321596,
- lng: -122.2160620727,
- },
- },
- // [END maps_advanced_markers_html_snippet]
- {
- address: '100 Chris St, Portola Valley, CA',
- description: 'Spacious warehouse great for small business',
- price: '$ 3,125,000',
- type: 'warehouse',
- bed: 4,
- bath: 4,
- size: 800,
- position: {
- lat: 37.39561833718522,
- lng: -122.21855116258479,
- },
- },
- {
- address: '98 Aleh Ave, Palo Alto, CA',
- description: 'A lovely store on busy road',
- price: '$ 4,225,000',
- type: 'store-alt',
- bed: 2,
- bath: 1,
- size: 210,
- position: {
- lat: 37.423928529779644,
- lng: -122.1087629822001,
- },
- },
- {
- address: '2117 Su St, MountainView, CA',
- description: 'Single family house near golf club',
- price: '$ 1,700,000',
- type: 'home',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.40578635332598,
- lng: -122.15043378466069,
- },
- },
- {
- address: '197 Alicia Dr, Santa Clara, CA',
- description: 'Multifloor large warehouse',
- price: '$ 5,000,000',
- type: 'warehouse',
- bed: 5,
- bath: 4,
- size: 700,
- position: {
- lat: 37.36399747905774,
- lng: -122.10465384268522,
- },
- },
- {
- address: '700 Jose Ave, Sunnyvale, CA',
- description: '3 storey townhouse with 2 car garage',
- price: '$ 3,850,000',
- type: 'building',
- bed: 4,
- bath: 4,
- size: 600,
- position: {
- lat: 37.38343706184458,
- lng: -122.02340436985183,
- },
- },
- {
- address: '868 Will Ct, Cupertino, CA',
- description: 'Single family house in great school zone',
- price: '$ 2,500,000',
- type: 'home',
- bed: 3,
- bath: 2,
- size: 100,
- position: {
- lat: 37.34576403052,
- lng: -122.04455090047453,
- },
- },
- {
- address: '655 Haylee St, Santa Clara, CA',
- description: '2 storey store with large storage room',
- price: '$ 2,500,000',
- type: 'store-alt',
- bed: 3,
- bath: 2,
- size: 450,
- position: {
- lat: 37.362863347890716,
- lng: -121.97802139023555,
- },
- },
- {
- address: '2019 Natasha Dr, San Jose, CA',
- description: 'Single family house',
- price: '$ 2,325,000',
- type: 'home',
- bed: 4,
- bath: 3.5,
- size: 500,
- position: {
- lat: 37.41391636421949,
- lng: -121.94592071575907,
- },
- },
-];
-
-initMap();
-// [END maps_advanced_markers_html]
diff --git a/dist/samples/advanced-markers-html/app/package.json b/dist/samples/advanced-markers-html/app/package.json
deleted file mode 100644
index 18d467c0b..000000000
--- a/dist/samples/advanced-markers-html/app/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "@js-api-samples/advanced-markers-html",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh advanced-markers-html && bash ../app.sh advanced-markers-html && bash ../docs.sh advanced-markers-html && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-html",
- "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/advanced-markers-html/app/style.css b/dist/samples/advanced-markers-html/app/style.css
deleted file mode 100644
index b4a465e2c..000000000
--- a/dist/samples/advanced-markers-html/app/style.css
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_advanced_markers_html] */
-:root {
- --building-color: #ff9800;
- --house-color: #0288d1;
- --shop-color: #7b1fa2;
- --warehouse-color: #558b2f;
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
-#map {
- height: 100%;
- width: 100%;
-}
-
-/*
- * Property styles in unhighlighted state.
- */
-.property {
- align-items: center;
- background-color: #ffffff;
- border-radius: 50%;
- color: #263238;
- display: flex;
- font-size: 14px;
- gap: 15px;
- height: 30px;
- justify-content: center;
- padding: 4px;
- position: relative;
- position: relative;
- transition: all 0.3s ease-out;
- width: 30px;
- transform: translateY(-9px);
-}
-
-.property::after {
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- border-top: 9px solid #ffffff;
- content: '';
- height: 0;
- left: 50%;
- position: absolute;
- top: 95%;
- transform: translate(-50%, 0);
- transition: all 0.3s ease-out;
- width: 0;
- z-index: 1;
-}
-
-.property .icon {
- align-items: center;
- display: flex;
- justify-content: center;
- color: #ffffff;
-}
-
-.property .icon svg {
- height: 20px;
- width: auto;
-}
-
-.property .details {
- display: none;
- flex-direction: column;
- flex: 1;
-}
-
-.property .address {
- color: #9e9e9e;
- font-size: 10px;
- margin-bottom: 10px;
- margin-top: 5px;
-}
-
-.property .features {
- align-items: flex-end;
- display: flex;
- flex-direction: row;
- gap: 10px;
-}
-
-.property .features > div {
- align-items: center;
- background: #f5f5f5;
- border-radius: 5px;
- border: 1px solid #ccc;
- display: flex;
- font-size: 10px;
- gap: 5px;
- padding: 5px;
-}
-
-/*
- * Property styles in highlighted state.
- */
-.property.highlight {
- background-color: #ffffff;
- border-radius: 8px;
- box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
- height: 80px;
- padding: 8px 15px;
- width: auto;
-}
-
-.property.highlight::after {
- border-top: 9px solid #ffffff;
-}
-
-.property.highlight .details {
- display: flex;
-}
-
-.property.highlight .icon svg {
- width: 50px;
- height: 50px;
-}
-
-.property .bed {
- color: #ffa000;
-}
-
-.property .bath {
- color: #03a9f4;
-}
-
-.property .size {
- color: #388e3c;
-}
-
-/*
- * House icon colors.
- */
-.property.highlight:has(.fa-house) .icon {
- color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house) {
- background-color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house)::after {
- border-top: 9px solid var(--house-color);
-}
-
-/*
- * Building icon colors.
- */
-.property.highlight:has(.fa-building) .icon {
- color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building) {
- background-color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building)::after {
- border-top: 9px solid var(--building-color);
-}
-
-/*
- * Warehouse icon colors.
- */
-.property.highlight:has(.fa-warehouse) .icon {
- color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse) {
- background-color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse)::after {
- border-top: 9px solid var(--warehouse-color);
-}
-
-/*
- * Shop icon colors.
- */
-.property.highlight:has(.fa-shop) .icon {
- color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop) {
- background-color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop)::after {
- border-top: 9px solid var(--shop-color);
-}
-
-/* [END maps_advanced_markers_html] */
diff --git a/dist/samples/advanced-markers-html/app/tsconfig.json b/dist/samples/advanced-markers-html/app/tsconfig.json
deleted file mode 100644
index 366aabb04..000000000
--- a/dist/samples/advanced-markers-html/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "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/advanced-markers-html/dist/assets/index-D13F9GjG.js b/dist/samples/advanced-markers-html/dist/assets/index-D13F9GjG.js
deleted file mode 100644
index a22484422..000000000
--- a/dist/samples/advanced-markers-html/dist/assets/index-D13F9GjG.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const i of e)if(i.type==="childList")for(const n of i.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&a(n)}).observe(document,{childList:!0,subtree:!0});function o(e){const i={};return e.integrity&&(i.integrity=e.integrity),e.referrerPolicy&&(i.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?i.credentials="include":e.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function a(e){if(e.ep)return;e.ep=!0;const i=o(e);fetch(e.href,i)}})();async function r(){const{Map:t}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),o={lat:37.43238031167444,lng:-122.16795397128632},a=new t(document.getElementById("map"),{zoom:11,center:o,mapId:"4504f8b37365c3d0"});for(const e of c){const i=new google.maps.marker.AdvancedMarkerElement({map:a,content:d(e),position:e.position,title:e.description});i.addListener("click",()=>{l(i)})}}function l(t,s){t.content.classList.contains("highlight")?(t.content.classList.remove("highlight"),t.zIndex=null):(t.content.classList.add("highlight"),t.zIndex=1)}function d(t){const s=document.createElement("div");return s.classList.add("property"),s.innerHTML=`
- ${property.price}
- ${property.address}
-
-
-
-
- bedroom
- ${property.bed}
-
-
-
- bathroom
- ${property.bath}
-
-
-
- size
- ${property.size} ft2
-
-
-
- ${t.type}
-
-
-
- `,s}const c=[{address:"215 Emily St, MountainView, CA",description:"Single family house with modern design",price:"$ 3,889,000",type:"home",bed:5,bath:4.5,size:300,position:{lat:37.50024109655184,lng:-122.28528451834352}},{address:"108 Squirrel Ln 🐿, Menlo Park, CA",description:"Townhouse with friendly neighbors",price:"$ 3,050,000",type:"building",bed:4,bath:3,size:200,position:{lat:37.44440882321596,lng:-122.2160620727}},{address:"100 Chris St, Portola Valley, CA",description:"Spacious warehouse great for small business",price:"$ 3,125,000",type:"warehouse",bed:4,bath:4,size:800,position:{lat:37.39561833718522,lng:-122.21855116258479}},{address:"98 Aleh Ave, Palo Alto, CA",description:"A lovely store on busy road",price:"$ 4,225,000",type:"store-alt",bed:2,bath:1,size:210,position:{lat:37.423928529779644,lng:-122.1087629822001}},{address:"2117 Su St, MountainView, CA",description:"Single family house near golf club",price:"$ 1,700,000",type:"home",bed:4,bath:3,size:200,position:{lat:37.40578635332598,lng:-122.15043378466069}},{address:"197 Alicia Dr, Santa Clara, CA",description:"Multifloor large warehouse",price:"$ 5,000,000",type:"warehouse",bed:5,bath:4,size:700,position:{lat:37.36399747905774,lng:-122.10465384268522}},{address:"700 Jose Ave, Sunnyvale, CA",description:"3 storey townhouse with 2 car garage",price:"$ 3,850,000",type:"building",bed:4,bath:4,size:600,position:{lat:37.38343706184458,lng:-122.02340436985183}},{address:"868 Will Ct, Cupertino, CA",description:"Single family house in great school zone",price:"$ 2,500,000",type:"home",bed:3,bath:2,size:100,position:{lat:37.34576403052,lng:-122.04455090047453}},{address:"655 Haylee St, Santa Clara, CA",description:"2 storey store with large storage room",price:"$ 2,500,000",type:"store-alt",bed:3,bath:2,size:450,position:{lat:37.362863347890716,lng:-121.97802139023555}},{address:"2019 Natasha Dr, San Jose, CA",description:"Single family house",price:"$ 2,325,000",type:"home",bed:4,bath:3.5,size:500,position:{lat:37.41391636421949,lng:-121.94592071575907}}];r();
diff --git a/dist/samples/advanced-markers-html/dist/assets/index-DYS5x8td.css b/dist/samples/advanced-markers-html/dist/assets/index-DYS5x8td.css
deleted file mode 100644
index 9229e6247..000000000
--- a/dist/samples/advanced-markers-html/dist/assets/index-DYS5x8td.css
+++ /dev/null
@@ -1 +0,0 @@
-:root{--building-color: #ff9800;--house-color: #0288d1;--shop-color: #7b1fa2;--warehouse-color: #558b2f}html,body{height:100%;margin:0;padding:0}#map{height:100%;width:100%}.property{align-items:center;background-color:#fff;border-radius:50%;color:#263238;display:flex;font-size:14px;gap:15px;height:30px;justify-content:center;padding:4px;position:relative;transition:all .3s ease-out;width:30px;transform:translateY(-9px)}.property:after{border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #ffffff;content:"";height:0;left:50%;position:absolute;top:95%;transform:translate(-50%);transition:all .3s ease-out;width:0;z-index:1}.property .icon{align-items:center;display:flex;justify-content:center;color:#fff}.property .icon svg{height:20px;width:auto}.property .details{display:none;flex-direction:column;flex:1}.property .address{color:#9e9e9e;font-size:10px;margin-bottom:10px;margin-top:5px}.property .features{align-items:flex-end;display:flex;flex-direction:row;gap:10px}.property .features>div{align-items:center;background:#f5f5f5;border-radius:5px;border:1px solid #ccc;display:flex;font-size:10px;gap:5px;padding:5px}.property.highlight{background-color:#fff;border-radius:8px;box-shadow:10px 10px 5px #0003;height:80px;padding:8px 15px;width:auto}.property.highlight:after{border-top:9px solid #ffffff}.property.highlight .details{display:flex}.property.highlight .icon svg{width:50px;height:50px}.property .bed{color:#ffa000}.property .bath{color:#03a9f4}.property .size{color:#388e3c}.property.highlight:has(.fa-house) .icon{color:var(--house-color)}.property:not(.highlight):has(.fa-house){background-color:var(--house-color)}.property:not(.highlight):has(.fa-house):after{border-top:9px solid var(--house-color)}.property.highlight:has(.fa-building) .icon{color:var(--building-color)}.property:not(.highlight):has(.fa-building){background-color:var(--building-color)}.property:not(.highlight):has(.fa-building):after{border-top:9px solid var(--building-color)}.property.highlight:has(.fa-warehouse) .icon{color:var(--warehouse-color)}.property:not(.highlight):has(.fa-warehouse){background-color:var(--warehouse-color)}.property:not(.highlight):has(.fa-warehouse):after{border-top:9px solid var(--warehouse-color)}.property.highlight:has(.fa-shop) .icon{color:var(--shop-color)}.property:not(.highlight):has(.fa-shop){background-color:var(--shop-color)}.property:not(.highlight):has(.fa-shop):after{border-top:9px solid var(--shop-color)}
diff --git a/dist/samples/advanced-markers-html/dist/index.html b/dist/samples/advanced-markers-html/dist/index.html
deleted file mode 100644
index fde1a20f8..000000000
--- a/dist/samples/advanced-markers-html/dist/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- ${t.price}
- ${t.address}
-
-
-
-
- bedroom
- ${t.bed}
-
-
-
- bathroom
- ${t.bath}
-
-
-
- size
- ${t.size} ft2
-
-
-
- ${property.type}
-
-
-
- `;
- return content;
-}
-const properties = [
- {
- address: '215 Emily St, MountainView, CA',
- description: 'Single family house with modern design',
- price: '$ 3,889,000',
- type: 'home',
- bed: 5,
- bath: 4.5,
- size: 300,
- position: {
- lat: 37.50024109655184,
- lng: -122.28528451834352,
- },
- },
- {
- address: '108 Squirrel Ln 🐿, Menlo Park, CA',
- description: 'Townhouse with friendly neighbors',
- price: '$ 3,050,000',
- type: 'building',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.44440882321596,
- lng: -122.2160620727,
- },
- },
- // [END maps_advanced_markers_html_snippet]
- {
- address: '100 Chris St, Portola Valley, CA',
- description: 'Spacious warehouse great for small business',
- price: '$ 3,125,000',
- type: 'warehouse',
- bed: 4,
- bath: 4,
- size: 800,
- position: {
- lat: 37.39561833718522,
- lng: -122.21855116258479,
- },
- },
- {
- address: '98 Aleh Ave, Palo Alto, CA',
- description: 'A lovely store on busy road',
- price: '$ 4,225,000',
- type: 'store-alt',
- bed: 2,
- bath: 1,
- size: 210,
- position: {
- lat: 37.423928529779644,
- lng: -122.1087629822001,
- },
- },
- {
- address: '2117 Su St, MountainView, CA',
- description: 'Single family house near golf club',
- price: '$ 1,700,000',
- type: 'home',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.40578635332598,
- lng: -122.15043378466069,
- },
- },
- {
- address: '197 Alicia Dr, Santa Clara, CA',
- description: 'Multifloor large warehouse',
- price: '$ 5,000,000',
- type: 'warehouse',
- bed: 5,
- bath: 4,
- size: 700,
- position: {
- lat: 37.36399747905774,
- lng: -122.10465384268522,
- },
- },
- {
- address: '700 Jose Ave, Sunnyvale, CA',
- description: '3 storey townhouse with 2 car garage',
- price: '$ 3,850,000',
- type: 'building',
- bed: 4,
- bath: 4,
- size: 600,
- position: {
- lat: 37.38343706184458,
- lng: -122.02340436985183,
- },
- },
- {
- address: '868 Will Ct, Cupertino, CA',
- description: 'Single family house in great school zone',
- price: '$ 2,500,000',
- type: 'home',
- bed: 3,
- bath: 2,
- size: 100,
- position: {
- lat: 37.34576403052,
- lng: -122.04455090047453,
- },
- },
- {
- address: '655 Haylee St, Santa Clara, CA',
- description: '2 storey store with large storage room',
- price: '$ 2,500,000',
- type: 'store-alt',
- bed: 3,
- bath: 2,
- size: 450,
- position: {
- lat: 37.362863347890716,
- lng: -121.97802139023555,
- },
- },
- {
- address: '2019 Natasha Dr, San Jose, CA',
- description: 'Single family house',
- price: '$ 2,325,000',
- type: 'home',
- bed: 4,
- bath: 3.5,
- size: 500,
- position: {
- lat: 37.41391636421949,
- lng: -121.94592071575907,
- },
- },
-];
-initMap();
-// [END maps_advanced_markers_html]
diff --git a/dist/samples/advanced-markers-html/docs/index.ts b/dist/samples/advanced-markers-html/docs/index.ts
deleted file mode 100644
index 2b730dced..000000000
--- a/dist/samples/advanced-markers-html/docs/index.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_advanced_markers_html]
-// [START maps_advanced_markers_html_snippet]
-async function initMap() {
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary(
- 'maps'
- )) as google.maps.MapsLibrary;
- const { AdvancedMarkerElement } = (await google.maps.importLibrary(
- 'marker'
- )) as google.maps.MarkerLibrary;
-
- const center = { lat: 37.43238031167444, lng: -122.16795397128632 };
- const map = new Map(document.getElementById('map') as HTMLElement, {
- zoom: 11,
- center,
- mapId: '4504f8b37365c3d0',
- });
-
- for (const property of properties) {
- const advancedMarkerElement =
- new google.maps.marker.AdvancedMarkerElement({
- map,
- content: buildContent(property),
- position: property.position,
- title: property.description,
- });
-
- advancedMarkerElement.addListener('click', () => {
- toggleHighlight(advancedMarkerElement, property);
- });
- }
-}
-
-function toggleHighlight(markerView, property) {
- if (markerView.content.classList.contains('highlight')) {
- markerView.content.classList.remove('highlight');
- markerView.zIndex = null;
- } else {
- markerView.content.classList.add('highlight');
- markerView.zIndex = 1;
- }
-}
-
-function buildContent(property) {
- const content = document.createElement('div');
- content.classList.add('property');
- content.innerHTML = `
- ${property.price}
- ${property.address}
-
-
-
-
- bedroom
- ${property.bed}
-
-
-
- bathroom
- ${property.bath}
-
-
-
- size
- ${property.size} ft2
-
-
-
- ${property.type}
-
-
-
- `;
- return content;
-}
-
-const properties = [
- {
- address: '215 Emily St, MountainView, CA',
- description: 'Single family house with modern design',
- price: '$ 3,889,000',
- type: 'home',
- bed: 5,
- bath: 4.5,
- size: 300,
- position: {
- lat: 37.50024109655184,
- lng: -122.28528451834352,
- },
- },
- {
- address: '108 Squirrel Ln 🐿, Menlo Park, CA',
- description: 'Townhouse with friendly neighbors',
- price: '$ 3,050,000',
- type: 'building',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.44440882321596,
- lng: -122.2160620727,
- },
- },
- // [END maps_advanced_markers_html_snippet]
- {
- address: '100 Chris St, Portola Valley, CA',
- description: 'Spacious warehouse great for small business',
- price: '$ 3,125,000',
- type: 'warehouse',
- bed: 4,
- bath: 4,
- size: 800,
- position: {
- lat: 37.39561833718522,
- lng: -122.21855116258479,
- },
- },
- {
- address: '98 Aleh Ave, Palo Alto, CA',
- description: 'A lovely store on busy road',
- price: '$ 4,225,000',
- type: 'store-alt',
- bed: 2,
- bath: 1,
- size: 210,
- position: {
- lat: 37.423928529779644,
- lng: -122.1087629822001,
- },
- },
- {
- address: '2117 Su St, MountainView, CA',
- description: 'Single family house near golf club',
- price: '$ 1,700,000',
- type: 'home',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.40578635332598,
- lng: -122.15043378466069,
- },
- },
- {
- address: '197 Alicia Dr, Santa Clara, CA',
- description: 'Multifloor large warehouse',
- price: '$ 5,000,000',
- type: 'warehouse',
- bed: 5,
- bath: 4,
- size: 700,
- position: {
- lat: 37.36399747905774,
- lng: -122.10465384268522,
- },
- },
- {
- address: '700 Jose Ave, Sunnyvale, CA',
- description: '3 storey townhouse with 2 car garage',
- price: '$ 3,850,000',
- type: 'building',
- bed: 4,
- bath: 4,
- size: 600,
- position: {
- lat: 37.38343706184458,
- lng: -122.02340436985183,
- },
- },
- {
- address: '868 Will Ct, Cupertino, CA',
- description: 'Single family house in great school zone',
- price: '$ 2,500,000',
- type: 'home',
- bed: 3,
- bath: 2,
- size: 100,
- position: {
- lat: 37.34576403052,
- lng: -122.04455090047453,
- },
- },
- {
- address: '655 Haylee St, Santa Clara, CA',
- description: '2 storey store with large storage room',
- price: '$ 2,500,000',
- type: 'store-alt',
- bed: 3,
- bath: 2,
- size: 450,
- position: {
- lat: 37.362863347890716,
- lng: -121.97802139023555,
- },
- },
- {
- address: '2019 Natasha Dr, San Jose, CA',
- description: 'Single family house',
- price: '$ 2,325,000',
- type: 'home',
- bed: 4,
- bath: 3.5,
- size: 500,
- position: {
- lat: 37.41391636421949,
- lng: -121.94592071575907,
- },
- },
-];
-
-initMap();
-// [END maps_advanced_markers_html]
diff --git a/dist/samples/advanced-markers-html/docs/style.css b/dist/samples/advanced-markers-html/docs/style.css
deleted file mode 100644
index b4a465e2c..000000000
--- a/dist/samples/advanced-markers-html/docs/style.css
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_advanced_markers_html] */
-:root {
- --building-color: #ff9800;
- --house-color: #0288d1;
- --shop-color: #7b1fa2;
- --warehouse-color: #558b2f;
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
-#map {
- height: 100%;
- width: 100%;
-}
-
-/*
- * Property styles in unhighlighted state.
- */
-.property {
- align-items: center;
- background-color: #ffffff;
- border-radius: 50%;
- color: #263238;
- display: flex;
- font-size: 14px;
- gap: 15px;
- height: 30px;
- justify-content: center;
- padding: 4px;
- position: relative;
- position: relative;
- transition: all 0.3s ease-out;
- width: 30px;
- transform: translateY(-9px);
-}
-
-.property::after {
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- border-top: 9px solid #ffffff;
- content: '';
- height: 0;
- left: 50%;
- position: absolute;
- top: 95%;
- transform: translate(-50%, 0);
- transition: all 0.3s ease-out;
- width: 0;
- z-index: 1;
-}
-
-.property .icon {
- align-items: center;
- display: flex;
- justify-content: center;
- color: #ffffff;
-}
-
-.property .icon svg {
- height: 20px;
- width: auto;
-}
-
-.property .details {
- display: none;
- flex-direction: column;
- flex: 1;
-}
-
-.property .address {
- color: #9e9e9e;
- font-size: 10px;
- margin-bottom: 10px;
- margin-top: 5px;
-}
-
-.property .features {
- align-items: flex-end;
- display: flex;
- flex-direction: row;
- gap: 10px;
-}
-
-.property .features > div {
- align-items: center;
- background: #f5f5f5;
- border-radius: 5px;
- border: 1px solid #ccc;
- display: flex;
- font-size: 10px;
- gap: 5px;
- padding: 5px;
-}
-
-/*
- * Property styles in highlighted state.
- */
-.property.highlight {
- background-color: #ffffff;
- border-radius: 8px;
- box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
- height: 80px;
- padding: 8px 15px;
- width: auto;
-}
-
-.property.highlight::after {
- border-top: 9px solid #ffffff;
-}
-
-.property.highlight .details {
- display: flex;
-}
-
-.property.highlight .icon svg {
- width: 50px;
- height: 50px;
-}
-
-.property .bed {
- color: #ffa000;
-}
-
-.property .bath {
- color: #03a9f4;
-}
-
-.property .size {
- color: #388e3c;
-}
-
-/*
- * House icon colors.
- */
-.property.highlight:has(.fa-house) .icon {
- color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house) {
- background-color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house)::after {
- border-top: 9px solid var(--house-color);
-}
-
-/*
- * Building icon colors.
- */
-.property.highlight:has(.fa-building) .icon {
- color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building) {
- background-color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building)::after {
- border-top: 9px solid var(--building-color);
-}
-
-/*
- * Warehouse icon colors.
- */
-.property.highlight:has(.fa-warehouse) .icon {
- color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse) {
- background-color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse)::after {
- border-top: 9px solid var(--warehouse-color);
-}
-
-/*
- * Shop icon colors.
- */
-.property.highlight:has(.fa-shop) .icon {
- color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop) {
- background-color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop)::after {
- border-top: 9px solid var(--shop-color);
-}
-
-/* [END maps_advanced_markers_html] */
diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.css b/dist/samples/advanced-markers-html/jsfiddle/demo.css
deleted file mode 100644
index 3335f6672..000000000
--- a/dist/samples/advanced-markers-html/jsfiddle/demo.css
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-:root {
- --building-color: #ff9800;
- --house-color: #0288d1;
- --shop-color: #7b1fa2;
- --warehouse-color: #558b2f;
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
-#map {
- height: 100%;
- width: 100%;
-}
-
-/*
- * Property styles in unhighlighted state.
- */
-.property {
- align-items: center;
- background-color: #ffffff;
- border-radius: 50%;
- color: #263238;
- display: flex;
- font-size: 14px;
- gap: 15px;
- height: 30px;
- justify-content: center;
- padding: 4px;
- position: relative;
- position: relative;
- transition: all 0.3s ease-out;
- width: 30px;
- transform: translateY(-9px);
-}
-
-.property::after {
- border-left: 9px solid transparent;
- border-right: 9px solid transparent;
- border-top: 9px solid #ffffff;
- content: '';
- height: 0;
- left: 50%;
- position: absolute;
- top: 95%;
- transform: translate(-50%, 0);
- transition: all 0.3s ease-out;
- width: 0;
- z-index: 1;
-}
-
-.property .icon {
- align-items: center;
- display: flex;
- justify-content: center;
- color: #ffffff;
-}
-
-.property .icon svg {
- height: 20px;
- width: auto;
-}
-
-.property .details {
- display: none;
- flex-direction: column;
- flex: 1;
-}
-
-.property .address {
- color: #9e9e9e;
- font-size: 10px;
- margin-bottom: 10px;
- margin-top: 5px;
-}
-
-.property .features {
- align-items: flex-end;
- display: flex;
- flex-direction: row;
- gap: 10px;
-}
-
-.property .features > div {
- align-items: center;
- background: #f5f5f5;
- border-radius: 5px;
- border: 1px solid #ccc;
- display: flex;
- font-size: 10px;
- gap: 5px;
- padding: 5px;
-}
-
-/*
- * Property styles in highlighted state.
- */
-.property.highlight {
- background-color: #ffffff;
- border-radius: 8px;
- box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
- height: 80px;
- padding: 8px 15px;
- width: auto;
-}
-
-.property.highlight::after {
- border-top: 9px solid #ffffff;
-}
-
-.property.highlight .details {
- display: flex;
-}
-
-.property.highlight .icon svg {
- width: 50px;
- height: 50px;
-}
-
-.property .bed {
- color: #ffa000;
-}
-
-.property .bath {
- color: #03a9f4;
-}
-
-.property .size {
- color: #388e3c;
-}
-
-/*
- * House icon colors.
- */
-.property.highlight:has(.fa-house) .icon {
- color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house) {
- background-color: var(--house-color);
-}
-
-.property:not(.highlight):has(.fa-house)::after {
- border-top: 9px solid var(--house-color);
-}
-
-/*
- * Building icon colors.
- */
-.property.highlight:has(.fa-building) .icon {
- color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building) {
- background-color: var(--building-color);
-}
-
-.property:not(.highlight):has(.fa-building)::after {
- border-top: 9px solid var(--building-color);
-}
-
-/*
- * Warehouse icon colors.
- */
-.property.highlight:has(.fa-warehouse) .icon {
- color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse) {
- background-color: var(--warehouse-color);
-}
-
-.property:not(.highlight):has(.fa-warehouse)::after {
- border-top: 9px solid var(--warehouse-color);
-}
-
-/*
- * Shop icon colors.
- */
-.property.highlight:has(.fa-shop) .icon {
- color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop) {
- background-color: var(--shop-color);
-}
-
-.property:not(.highlight):has(.fa-shop)::after {
- border-top: 9px solid var(--shop-color);
-}
-
-
diff --git a/dist/samples/advanced-markers-html/jsfiddle/demo.details b/dist/samples/advanced-markers-html/jsfiddle/demo.details
deleted file mode 100644
index d0f136a87..000000000
--- a/dist/samples/advanced-markers-html/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: advanced-markers-html
-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/advanced-markers-html/jsfiddle/demo.html b/dist/samples/advanced-markers-html/jsfiddle/demo.html
deleted file mode 100644
index c390a5c6c..000000000
--- a/dist/samples/advanced-markers-html/jsfiddle/demo.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- ${property.price}
- ${property.address}
-
-
-
-
- bedroom
- ${property.bed}
-
-
-
- bathroom
- ${property.bath}
-
-
-
- size
- ${property.size} ft2
-
-
-
- ${property.type}
-
-
-
- `;
- return content;
-}
-const properties = [
- {
- address: '215 Emily St, MountainView, CA',
- description: 'Single family house with modern design',
- price: '$ 3,889,000',
- type: 'home',
- bed: 5,
- bath: 4.5,
- size: 300,
- position: {
- lat: 37.50024109655184,
- lng: -122.28528451834352,
- },
- },
- {
- address: '108 Squirrel Ln 🐿, Menlo Park, CA',
- description: 'Townhouse with friendly neighbors',
- price: '$ 3,050,000',
- type: 'building',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.44440882321596,
- lng: -122.2160620727,
- },
- },
-
- {
- address: '100 Chris St, Portola Valley, CA',
- description: 'Spacious warehouse great for small business',
- price: '$ 3,125,000',
- type: 'warehouse',
- bed: 4,
- bath: 4,
- size: 800,
- position: {
- lat: 37.39561833718522,
- lng: -122.21855116258479,
- },
- },
- {
- address: '98 Aleh Ave, Palo Alto, CA',
- description: 'A lovely store on busy road',
- price: '$ 4,225,000',
- type: 'store-alt',
- bed: 2,
- bath: 1,
- size: 210,
- position: {
- lat: 37.423928529779644,
- lng: -122.1087629822001,
- },
- },
- {
- address: '2117 Su St, MountainView, CA',
- description: 'Single family house near golf club',
- price: '$ 1,700,000',
- type: 'home',
- bed: 4,
- bath: 3,
- size: 200,
- position: {
- lat: 37.40578635332598,
- lng: -122.15043378466069,
- },
- },
- {
- address: '197 Alicia Dr, Santa Clara, CA',
- description: 'Multifloor large warehouse',
- price: '$ 5,000,000',
- type: 'warehouse',
- bed: 5,
- bath: 4,
- size: 700,
- position: {
- lat: 37.36399747905774,
- lng: -122.10465384268522,
- },
- },
- {
- address: '700 Jose Ave, Sunnyvale, CA',
- description: '3 storey townhouse with 2 car garage',
- price: '$ 3,850,000',
- type: 'building',
- bed: 4,
- bath: 4,
- size: 600,
- position: {
- lat: 37.38343706184458,
- lng: -122.02340436985183,
- },
- },
- {
- address: '868 Will Ct, Cupertino, CA',
- description: 'Single family house in great school zone',
- price: '$ 2,500,000',
- type: 'home',
- bed: 3,
- bath: 2,
- size: 100,
- position: {
- lat: 37.34576403052,
- lng: -122.04455090047453,
- },
- },
- {
- address: '655 Haylee St, Santa Clara, CA',
- description: '2 storey store with large storage room',
- price: '$ 2,500,000',
- type: 'store-alt',
- bed: 3,
- bath: 2,
- size: 450,
- position: {
- lat: 37.362863347890716,
- lng: -121.97802139023555,
- },
- },
- {
- address: '2019 Natasha Dr, San Jose, CA',
- description: 'Single family house',
- price: '$ 2,325,000',
- type: 'home',
- bed: 4,
- bath: 3.5,
- size: 500,
- position: {
- lat: 37.41391636421949,
- lng: -121.94592071575907,
- },
- },
-];
-initMap();
-
diff --git a/dist/samples/advanced-markers-simple/app/.eslintsrc.json b/dist/samples/advanced-markers-simple/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/advanced-markers-simple/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/advanced-markers-simple/app/README.md b/dist/samples/advanced-markers-simple/app/README.md
deleted file mode 100644
index 8c8edf545..000000000
--- a/dist/samples/advanced-markers-simple/app/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Google Maps JavaScript Sample
-
-## advanced-markers-simple
-
-The advanced-markers-simple sample demonstrates a simple example of how to use advanced markers.
-
-Follow these instructions to set up and run advanced-markers-simple sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-First `cd` to the folder for the sample to run, then:
-
-`npm start`
-
-### Build an individual example
-
-From `samples/`:
-
-`npm run build --workspace=advanced-markers-simple/`
-
-### Build all of the examples.
-
-From `samples/`:
-
-`npm run build-all`
-
-## 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/advanced-markers-simple/app/index.html b/dist/samples/advanced-markers-simple/app/index.html
deleted file mode 100644
index 27ae7b0c3..000000000
--- a/dist/samples/advanced-markers-simple/app/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- ${property.price}
- ${property.address}
-
-
-
-
- bedroom
- ${property.bed}
-
-
-
- bathroom
- ${property.bath}
-
-
-
- size
- ${property.size} ft2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- - -
- - -
- - -
-
-
- -
- - -
- - -
- - -
-
-
- -
- - -
- - -
- - -
-
-
- -
- - -
- - -
- - -
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
- Data source: NYC Open Data
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
- Data source: NYC Open Data
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bike Parking Heatmap
- - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-heatmap/app/index.ts b/dist/samples/deckgl-heatmap/app/index.ts
deleted file mode 100644
index 532bf6734..000000000
--- a/dist/samples/deckgl-heatmap/app/index.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/* [START maps_deckgl_heatmap] */
-// Initialize and add the map
-let map: google.maps.Map;
-// Use global types for Deck.gl components
-let heatmapLayer: deck.HeatmapLayer;
-let googleMapsOverlay: deck.GoogleMapsOverlay;
-let marker: google.maps.marker.AdvancedMarkerElement | undefined;
-let infoWindow: google.maps.InfoWindow;
-
-// Declare global namespace for Deck.gl to satisfy TypeScript compiler
-declare namespace deck {
- class HeatmapLayer {
- constructor(props: any);
- props: any;
- clone(props: any): HeatmapLayer;
- pickable: boolean; // Added pickable property
- }
- class GoogleMapsOverlay {
- constructor(props: any);
- setMap(map: google.maps.Map | null): void;
- setProps(props: any): void;
- }
- // Add other Deck.gl types used globally if needed
-}
-
-async function initMap(): PromiseBike Parking Spaces
-0 - 33
- 34 - 66
- 67 - 100
- 101 - 133
- 134 - 166
- 167+
- Bike Parking Info:
'; // Updated title - if (info.object.ADDRESS !== undefined) { - tooltipContent += `Address: ${info.object.ADDRESS}`; - } - if (info.object.RACKS !== undefined) { - tooltipContent += `Racks: ${info.object.RACKS}
`; - } - if (info.object.SPACES !== undefined) { - tooltipContent += `Spaces: ${info.object.SPACES}
`; - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = info.x + 'px'; - tooltip.style.top = info.y + 'px'; - tooltip.style.display = 'block'; - } else { - tooltip.style.display = 'none'; - } - console.log('Tooltip content set to:', tooltip.innerHTML); - } - }, - }); - - heatmapLayer.pickable = true; // Ensure pickable is true after creation - - // Use global deck object - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [heatmapLayer], - controller: true, // Enable Deck.gl to control map view - }); - - googleMapsOverlay.setMap(map); - - // Hide progress bar after data is loaded and layer is added - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - - // Create a single InfoWindow instance - infoWindow = new InfoWindow(); - - // Add click listener to the map - map.addListener('click', async (event: google.maps.MapMouseEvent) => { - const latLng = event.latLng; - if (!latLng) return; // Ensure latLng is not null - - if (!marker) { - // Create the marker on the first click - marker = new AdvancedMarkerElement({ - map: map, - position: latLng, - gmpClickable: true, - }); - - // Add click listener to the marker - marker.addListener('click', () => { - infoWindow.close(); - const content = ` -
Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- });
-
- // Open InfoWindow immediately on first click
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- } else {
- // Move the existing marker on subsequent clicks
- marker.position = latLng;
- // InfoWindow remains open
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- });
-
- // Button functionality
- const toggleButton = document.getElementById('toggleButton');
- if (toggleButton) {
- // Check if toggleButton is found
- toggleButton.addEventListener('click', () => {
- const currentVisible = heatmapLayer.props.visible;
- // Create a new layer instance with toggled visibility and update the overlay
- const newLayer = heatmapLayer.clone({ visible: !currentVisible });
- googleMapsOverlay.setProps({
- layers: [newLayer],
- });
- heatmapLayer = newLayer; // Update the heatmapLayer variable
-
- toggleButton.textContent = !currentVisible
- ? 'Hide Heatmap Layer'
- : 'Show Heatmap Layer';
- });
- }
-}
-
-initMap();
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-heatmap/app/package.json b/dist/samples/deckgl-heatmap/app/package.json
deleted file mode 100644
index bb8828d55..000000000
--- a/dist/samples/deckgl-heatmap/app/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "@js-api-samples/deckgl-heatmap",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh deckgl-heatmap && bash ../app.sh deckgl-heatmap && bash ../docs.sh deckgl-heatmap && npm run build:vite --workspace=. && bash ../dist.sh deckgl-heatmap",
- "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/deckgl-heatmap/app/style.css b/dist/samples/deckgl-heatmap/app/style.css
deleted file mode 100644
index d1fa5ae64..000000000
--- a/dist/samples/deckgl-heatmap/app/style.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_heatmap] */
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
-#map {
- height: 100%;
- flex-grow: 1; /* Make map take up remaining space */
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- display: flex; /* Use flexbox for layout */
- flex-direction: column; /* Stack children vertically */
- position: relative; /* Set body as positioning context */
- font-family: 'Roboto', Arial, sans-serif; /* Set font family */
-}
-
-#toggleButton {
- position: absolute;
- top: 70px; /* Position towards the top of the map area */
- left: 50%;
- transform: translateX(-50%);
- z-index: 1000; /* Ensure it's above the map */
-}
-
-#tooltip {
- position: absolute;
- z-index: 1001; /* Ensure it's above the button and map */
- padding: 10px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 4px;
- pointer-events: none; /* Allows interaction with elements behind the tooltip */
- display: none; /* Hidden by default */
- font-size: 126x;
-}
-
-h1 {
- text-align: center;
- margin: 10px;
-}
-
-#legend {
- position: absolute;
- top: 90px; /* Adjust position as needed */
- right: 10px; /* Position on the left */
- z-index: 1000; /* Ensure it's above the map */
- background-color: rgba(255, 255, 255, 0.9);
- padding: 10px;
- border-radius: 4px;
- font-size: 14px;
-}
-
-#legend h4 {
- margin-top: 0;
- margin-bottom: 5px;
-}
-
-#legend div {
- display: flex;
- align-items: center;
- margin-bottom: 3px;
-}
-
-#legend span {
- display: inline-block;
- width: 20px;
- height: 14px;
- margin-right: 5px;
- border: 1px solid #000; /* Add a border for visibility */
-}
-
-/* Media query for mobile devices */
-@media (max-width: 600px) {
- #legend {
- position: absolute;
- bottom: 50px; /* Position above the button */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- right: auto; /* Remove right positioning */
- }
-
- #toggleButton {
- position: absolute;
- bottom: 10px; /* Position at the bottom */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- }
-}
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-heatmap/app/tsconfig.json b/dist/samples/deckgl-heatmap/app/tsconfig.json
deleted file mode 100644
index 09179087c..000000000
--- a/dist/samples/deckgl-heatmap/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "compilerOptions": {
- "module": "esnext",
- "target": "esnext",
- "strict": true,
- "noImplicitAny": false,
- "lib": [
- "es2015",
- "esnext",
- "es6",
- "dom",
- "dom.iterable"
- ],
- "moduleResolution": "Node",
- "jsx": "preserve"
- }
- }
\ No newline at end of file
diff --git a/dist/samples/deckgl-heatmap/dist/assets/index-0erI5V3n.css b/dist/samples/deckgl-heatmap/dist/assets/index-0erI5V3n.css
deleted file mode 100644
index 38cf66fd4..000000000
--- a/dist/samples/deckgl-heatmap/dist/assets/index-0erI5V3n.css
+++ /dev/null
@@ -1 +0,0 @@
-#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}#toggleButton{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:1000}#tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:126x}h1{text-align:center;margin:10px}#legend{position:absolute;top:90px;right:10px;z-index:1000;background-color:#ffffffe6;padding:10px;border-radius:4px;font-size:14px}#legend h4{margin-top:0;margin-bottom:5px}#legend div{display:flex;align-items:center;margin-bottom:3px}#legend span{display:inline-block;width:20px;height:14px;margin-right:5px;border:1px solid #000}@media (max-width: 600px){#legend{position:absolute;inset:auto auto 50px 50%;transform:translate(-50%)}#toggleButton{position:absolute;bottom:10px;left:50%;transform:translate(-50%);top:auto}}
diff --git a/dist/samples/deckgl-heatmap/dist/assets/index-LtoqKko5.js b/dist/samples/deckgl-heatmap/dist/assets/index-LtoqKko5.js
deleted file mode 100644
index 87ecd1177..000000000
--- a/dist/samples/deckgl-heatmap/dist/assets/index-LtoqKko5.js
+++ /dev/null
@@ -1,10 +0,0 @@
-(function(){const a=document.createElement("link").relList;if(a&&a.supports&&a.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))g(o);new MutationObserver(o=>{for(const n of o)if(n.type==="childList")for(const d of n.addedNodes)d.tagName==="LINK"&&d.rel==="modulepreload"&&g(d)}).observe(document,{childList:!0,subtree:!0});function u(o){const n={};return o.integrity&&(n.integrity=o.integrity),o.referrerPolicy&&(n.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?n.credentials="include":o.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function g(o){if(o.ep)return;o.ep=!0;const n=u(o);fetch(o.href,n)}})();let l,p,f,c,s;async function b(){var r,a=document.querySelector(".mdc-linear-progress");a&&(r=new mdc.linearProgress.MDCLinearProgress(a),r.open(),r.determinate=!1,r.done=function(){r.close(),a?.remove()});const u={lat:37.77325660358167,lng:-122.41712341793448},{Map:g,InfoWindow:o}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:n}=await google.maps.importLibrary("marker"),d=document.getElementById("map");if(!d){console.error("Map element not found!");return}l=new g(d,{zoom:13,center:u,tilt:90,heading:-25,mapId:"6b73a9fe7e831a00",fullscreenControl:!1,clickableIcons:!1}),p=new deck.HeatmapLayer({id:"HeatmapLayer",data:"https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json",getPosition:t=>t.COORDINATES,getWeight:t=>t.SPACES,radiusPixels:25,visible:!0,pickable:!0,onHover:t=>{const e=document.getElementById("tooltip");if(e){if(console.log("Hovered object:",t.object),t.object){let i="Bike Parking Info:
";t.object.ADDRESS!==void 0&&(i+=`Address: ${t.object.ADDRESS}`),t.object.RACKS!==void 0&&(i+=`Racks: ${t.object.RACKS}
`),t.object.SPACES!==void 0&&(i+=`Spaces: ${t.object.SPACES}
`),e.innerHTML=i,e.style.left=t.x+"px",e.style.top=t.y+"px",e.style.display="block"}else e.style.display="none";console.log("Tooltip content set to:",e.innerHTML)}}}),p.pickable=!0,f=new deck.GoogleMapsOverlay({layers:[p],controller:!0}),f.setMap(l),r&&setTimeout(()=>{r.done()},100),s=new o,l.addListener("click",async t=>{const e=t.latLng;if(e)if(c){c.position=e;const i=` -
Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
- `;s.setContent(i),s.open(l,c)}else{c=new n({map:l,position:e,gmpClickable:!0}),c.addListener("click",()=>{s.close();const y=`
- Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
- `;s.setContent(y),s.open(l,c)});const i=`
- Location: ${e.lat().toFixed(3)}, ${e.lng().toFixed(3)}
-
- `;s.setContent(i),s.open(l,c)}});const m=document.getElementById("toggleButton");m&&m.addEventListener("click",()=>{const t=p.props.visible,e=p.clone({visible:!t});f.setProps({layers:[e]}),p=e,m.textContent=t?"Show Heatmap Layer":"Hide Heatmap Layer"})}b();
diff --git a/dist/samples/deckgl-heatmap/dist/index.html b/dist/samples/deckgl-heatmap/dist/index.html
deleted file mode 100644
index e1128afe0..000000000
--- a/dist/samples/deckgl-heatmap/dist/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bike Parking Heatmap
- - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-heatmap/docs/index.html b/dist/samples/deckgl-heatmap/docs/index.html
deleted file mode 100644
index 80ae4d075..000000000
--- a/dist/samples/deckgl-heatmap/docs/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-
-
-
-
- Bike Parking Spaces
-0 - 33
- 34 - 66
- 67 - 100
- 101 - 133
- 134 - 166
- 167+
-
-
-
-
-
-
-
-
-
-
- Bike Parking Heatmap
- - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-heatmap/docs/index.js b/dist/samples/deckgl-heatmap/docs/index.js
deleted file mode 100644
index 4ea6f90cf..000000000
--- a/dist/samples/deckgl-heatmap/docs/index.js
+++ /dev/null
@@ -1,170 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_heatmap] */
-// Initialize and add the map
-let map;
-// Use global types for Deck.gl components
-let heatmapLayer;
-let googleMapsOverlay;
-let marker;
-let infoWindow;
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center.
- const position = { lat: 37.77325660358167, lng: -122.41712341793448 }; // Using the center from original deckgl-polygon.js
- // Request needed libraries.
- const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 13, // Using the zoom from original deckgl-polygon.js
- center: position,
- tilt: 90, // Add tilt
- heading: -25, // Add heading
- mapId: '6b73a9fe7e831a00',
- fullscreenControl: false, // Disable fullscreen control
- clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- // Use global deck object
- heatmapLayer = new deck.HeatmapLayer({
- // Assign to the outer heatmapLayer
- id: 'HeatmapLayer', // Change layer ID
- data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json', // Use the loaded data
- getPosition: (d) => d.COORDINATES, // Use 'any' for simplicity, or define a proper type
- getWeight: (d) => d.SPACES, // Use 'any' for simplicity, or define a proper type
- radiusPixels: 25, // Adjust radius as in user's example
- visible: true,
- pickable: true,
- onHover: (info) => {
- // Use 'any' for info for simplicity, or define a proper type
- const tooltip = document.getElementById('tooltip');
- if (tooltip) {
- console.log('Hovered object:', info.object);
- if (info.object) {
- // Format data for tooltip (display ADDRESS, RACKS, SPACES)
- let tooltipContent = 'Bike Parking Spaces
-0 - 33
- 34 - 66
- 67 - 100
- 101 - 133
- 134 - 166
- 167+
- Bike Parking Info:
'; // Updated title - if (info.object.ADDRESS !== undefined) { - tooltipContent += `Address: ${info.object.ADDRESS}`; - } - if (info.object.RACKS !== undefined) { - tooltipContent += `Racks: ${info.object.RACKS}
`; - } - if (info.object.SPACES !== undefined) { - tooltipContent += `Spaces: ${info.object.SPACES}
`; - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = info.x + 'px'; - tooltip.style.top = info.y + 'px'; - tooltip.style.display = 'block'; - } - else { - tooltip.style.display = 'none'; - } - console.log('Tooltip content set to:', tooltip.innerHTML); - } - }, - }); - heatmapLayer.pickable = true; // Ensure pickable is true after creation - // Use global deck object - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [heatmapLayer], - controller: true, // Enable Deck.gl to control map view - }); - googleMapsOverlay.setMap(map); - // Hide progress bar after data is loaded and layer is added - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - // Create a single InfoWindow instance - infoWindow = new InfoWindow(); - // Add click listener to the map - map.addListener('click', async (event) => { - const latLng = event.latLng; - if (!latLng) - return; // Ensure latLng is not null - if (!marker) { - // Create the marker on the first click - marker = new AdvancedMarkerElement({ - map: map, - position: latLng, - gmpClickable: true, - }); - // Add click listener to the marker - marker.addListener('click', () => { - infoWindow.close(); - const content = ` -
Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- });
- // Open InfoWindow immediately on first click
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- else {
- // Move the existing marker on subsequent clicks
- marker.position = latLng;
- // InfoWindow remains open
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- });
- // Button functionality
- const toggleButton = document.getElementById('toggleButton');
- if (toggleButton) {
- // Check if toggleButton is found
- toggleButton.addEventListener('click', () => {
- const currentVisible = heatmapLayer.props.visible;
- // Create a new layer instance with toggled visibility and update the overlay
- const newLayer = heatmapLayer.clone({ visible: !currentVisible });
- googleMapsOverlay.setProps({
- layers: [newLayer],
- });
- heatmapLayer = newLayer; // Update the heatmapLayer variable
- toggleButton.textContent = !currentVisible
- ? 'Hide Heatmap Layer'
- : 'Show Heatmap Layer';
- });
- }
-}
-initMap();
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-heatmap/docs/index.ts b/dist/samples/deckgl-heatmap/docs/index.ts
deleted file mode 100644
index 532bf6734..000000000
--- a/dist/samples/deckgl-heatmap/docs/index.ts
+++ /dev/null
@@ -1,209 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/* [START maps_deckgl_heatmap] */
-// Initialize and add the map
-let map: google.maps.Map;
-// Use global types for Deck.gl components
-let heatmapLayer: deck.HeatmapLayer;
-let googleMapsOverlay: deck.GoogleMapsOverlay;
-let marker: google.maps.marker.AdvancedMarkerElement | undefined;
-let infoWindow: google.maps.InfoWindow;
-
-// Declare global namespace for Deck.gl to satisfy TypeScript compiler
-declare namespace deck {
- class HeatmapLayer {
- constructor(props: any);
- props: any;
- clone(props: any): HeatmapLayer;
- pickable: boolean; // Added pickable property
- }
- class GoogleMapsOverlay {
- constructor(props: any);
- setMap(map: google.maps.Map | null): void;
- setProps(props: any): void;
- }
- // Add other Deck.gl types used globally if needed
-}
-
-async function initMap(): PromiseBike Parking Info:
'; // Updated title - if (info.object.ADDRESS !== undefined) { - tooltipContent += `Address: ${info.object.ADDRESS}`; - } - if (info.object.RACKS !== undefined) { - tooltipContent += `Racks: ${info.object.RACKS}
`; - } - if (info.object.SPACES !== undefined) { - tooltipContent += `Spaces: ${info.object.SPACES}
`; - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = info.x + 'px'; - tooltip.style.top = info.y + 'px'; - tooltip.style.display = 'block'; - } else { - tooltip.style.display = 'none'; - } - console.log('Tooltip content set to:', tooltip.innerHTML); - } - }, - }); - - heatmapLayer.pickable = true; // Ensure pickable is true after creation - - // Use global deck object - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [heatmapLayer], - controller: true, // Enable Deck.gl to control map view - }); - - googleMapsOverlay.setMap(map); - - // Hide progress bar after data is loaded and layer is added - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - - // Create a single InfoWindow instance - infoWindow = new InfoWindow(); - - // Add click listener to the map - map.addListener('click', async (event: google.maps.MapMouseEvent) => { - const latLng = event.latLng; - if (!latLng) return; // Ensure latLng is not null - - if (!marker) { - // Create the marker on the first click - marker = new AdvancedMarkerElement({ - map: map, - position: latLng, - gmpClickable: true, - }); - - // Add click listener to the marker - marker.addListener('click', () => { - infoWindow.close(); - const content = ` -
Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- });
-
- // Open InfoWindow immediately on first click
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- } else {
- // Move the existing marker on subsequent clicks
- marker.position = latLng;
- // InfoWindow remains open
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- });
-
- // Button functionality
- const toggleButton = document.getElementById('toggleButton');
- if (toggleButton) {
- // Check if toggleButton is found
- toggleButton.addEventListener('click', () => {
- const currentVisible = heatmapLayer.props.visible;
- // Create a new layer instance with toggled visibility and update the overlay
- const newLayer = heatmapLayer.clone({ visible: !currentVisible });
- googleMapsOverlay.setProps({
- layers: [newLayer],
- });
- heatmapLayer = newLayer; // Update the heatmapLayer variable
-
- toggleButton.textContent = !currentVisible
- ? 'Hide Heatmap Layer'
- : 'Show Heatmap Layer';
- });
- }
-}
-
-initMap();
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-heatmap/docs/style.css b/dist/samples/deckgl-heatmap/docs/style.css
deleted file mode 100644
index d1fa5ae64..000000000
--- a/dist/samples/deckgl-heatmap/docs/style.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_heatmap] */
-/*
- * Always set the map height explicitly to define the size of the div element
- * that contains the map.
- */
-#map {
- height: 100%;
- flex-grow: 1; /* Make map take up remaining space */
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- display: flex; /* Use flexbox for layout */
- flex-direction: column; /* Stack children vertically */
- position: relative; /* Set body as positioning context */
- font-family: 'Roboto', Arial, sans-serif; /* Set font family */
-}
-
-#toggleButton {
- position: absolute;
- top: 70px; /* Position towards the top of the map area */
- left: 50%;
- transform: translateX(-50%);
- z-index: 1000; /* Ensure it's above the map */
-}
-
-#tooltip {
- position: absolute;
- z-index: 1001; /* Ensure it's above the button and map */
- padding: 10px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 4px;
- pointer-events: none; /* Allows interaction with elements behind the tooltip */
- display: none; /* Hidden by default */
- font-size: 126x;
-}
-
-h1 {
- text-align: center;
- margin: 10px;
-}
-
-#legend {
- position: absolute;
- top: 90px; /* Adjust position as needed */
- right: 10px; /* Position on the left */
- z-index: 1000; /* Ensure it's above the map */
- background-color: rgba(255, 255, 255, 0.9);
- padding: 10px;
- border-radius: 4px;
- font-size: 14px;
-}
-
-#legend h4 {
- margin-top: 0;
- margin-bottom: 5px;
-}
-
-#legend div {
- display: flex;
- align-items: center;
- margin-bottom: 3px;
-}
-
-#legend span {
- display: inline-block;
- width: 20px;
- height: 14px;
- margin-right: 5px;
- border: 1px solid #000; /* Add a border for visibility */
-}
-
-/* Media query for mobile devices */
-@media (max-width: 600px) {
- #legend {
- position: absolute;
- bottom: 50px; /* Position above the button */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- right: auto; /* Remove right positioning */
- }
-
- #toggleButton {
- position: absolute;
- bottom: 10px; /* Position at the bottom */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- }
-}
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.css b/dist/samples/deckgl-heatmap/jsfiddle/demo.css
deleted file mode 100644
index feb6ebab3..000000000
--- a/dist/samples/deckgl-heatmap/jsfiddle/demo.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * @license
- * Copyright 2025 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%;
- flex-grow: 1; /* Make map take up remaining space */
-}
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- display: flex; /* Use flexbox for layout */
- flex-direction: column; /* Stack children vertically */
- position: relative; /* Set body as positioning context */
- font-family: 'Roboto', Arial, sans-serif; /* Set font family */
-}
-
-#toggleButton {
- position: absolute;
- top: 70px; /* Position towards the top of the map area */
- left: 50%;
- transform: translateX(-50%);
- z-index: 1000; /* Ensure it's above the map */
-}
-
-#tooltip {
- position: absolute;
- z-index: 1001; /* Ensure it's above the button and map */
- padding: 10px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 4px;
- pointer-events: none; /* Allows interaction with elements behind the tooltip */
- display: none; /* Hidden by default */
- font-size: 126x;
-}
-
-h1 {
- text-align: center;
- margin: 10px;
-}
-
-#legend {
- position: absolute;
- top: 90px; /* Adjust position as needed */
- right: 10px; /* Position on the left */
- z-index: 1000; /* Ensure it's above the map */
- background-color: rgba(255, 255, 255, 0.9);
- padding: 10px;
- border-radius: 4px;
- font-size: 14px;
-}
-
-#legend h4 {
- margin-top: 0;
- margin-bottom: 5px;
-}
-
-#legend div {
- display: flex;
- align-items: center;
- margin-bottom: 3px;
-}
-
-#legend span {
- display: inline-block;
- width: 20px;
- height: 14px;
- margin-right: 5px;
- border: 1px solid #000; /* Add a border for visibility */
-}
-
-/* Media query for mobile devices */
-@media (max-width: 600px) {
- #legend {
- position: absolute;
- bottom: 50px; /* Position above the button */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- right: auto; /* Remove right positioning */
- }
-
- #toggleButton {
- position: absolute;
- bottom: 10px; /* Position at the bottom */
- left: 50%; /* Center horizontally */
- transform: translateX(-50%); /* Adjust for centering */
- top: auto; /* Remove top positioning */
- }
-}
-
diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.details b/dist/samples/deckgl-heatmap/jsfiddle/demo.details
deleted file mode 100644
index a00d39836..000000000
--- a/dist/samples/deckgl-heatmap/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: deckgl-heatmap
-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/deckgl-heatmap/jsfiddle/demo.html b/dist/samples/deckgl-heatmap/jsfiddle/demo.html
deleted file mode 100644
index 492b24328..000000000
--- a/dist/samples/deckgl-heatmap/jsfiddle/demo.html
+++ /dev/null
@@ -1,117 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Bike Parking Heatmap
- - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-heatmap/jsfiddle/demo.js b/dist/samples/deckgl-heatmap/jsfiddle/demo.js
deleted file mode 100644
index 4ea6f90cf..000000000
--- a/dist/samples/deckgl-heatmap/jsfiddle/demo.js
+++ /dev/null
@@ -1,170 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_heatmap] */
-// Initialize and add the map
-let map;
-// Use global types for Deck.gl components
-let heatmapLayer;
-let googleMapsOverlay;
-let marker;
-let infoWindow;
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center.
- const position = { lat: 37.77325660358167, lng: -122.41712341793448 }; // Using the center from original deckgl-polygon.js
- // Request needed libraries.
- const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 13, // Using the zoom from original deckgl-polygon.js
- center: position,
- tilt: 90, // Add tilt
- heading: -25, // Add heading
- mapId: '6b73a9fe7e831a00',
- fullscreenControl: false, // Disable fullscreen control
- clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- // Use global deck object
- heatmapLayer = new deck.HeatmapLayer({
- // Assign to the outer heatmapLayer
- id: 'HeatmapLayer', // Change layer ID
- data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json', // Use the loaded data
- getPosition: (d) => d.COORDINATES, // Use 'any' for simplicity, or define a proper type
- getWeight: (d) => d.SPACES, // Use 'any' for simplicity, or define a proper type
- radiusPixels: 25, // Adjust radius as in user's example
- visible: true,
- pickable: true,
- onHover: (info) => {
- // Use 'any' for info for simplicity, or define a proper type
- const tooltip = document.getElementById('tooltip');
- if (tooltip) {
- console.log('Hovered object:', info.object);
- if (info.object) {
- // Format data for tooltip (display ADDRESS, RACKS, SPACES)
- let tooltipContent = 'Bike Parking Spaces
-0 - 33
- 34 - 66
- 67 - 100
- 101 - 133
- 134 - 166
- 167+
- Bike Parking Info:
'; // Updated title - if (info.object.ADDRESS !== undefined) { - tooltipContent += `Address: ${info.object.ADDRESS}`; - } - if (info.object.RACKS !== undefined) { - tooltipContent += `Racks: ${info.object.RACKS}
`; - } - if (info.object.SPACES !== undefined) { - tooltipContent += `Spaces: ${info.object.SPACES}
`; - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = info.x + 'px'; - tooltip.style.top = info.y + 'px'; - tooltip.style.display = 'block'; - } - else { - tooltip.style.display = 'none'; - } - console.log('Tooltip content set to:', tooltip.innerHTML); - } - }, - }); - heatmapLayer.pickable = true; // Ensure pickable is true after creation - // Use global deck object - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [heatmapLayer], - controller: true, // Enable Deck.gl to control map view - }); - googleMapsOverlay.setMap(map); - // Hide progress bar after data is loaded and layer is added - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - // Create a single InfoWindow instance - infoWindow = new InfoWindow(); - // Add click listener to the map - map.addListener('click', async (event) => { - const latLng = event.latLng; - if (!latLng) - return; // Ensure latLng is not null - if (!marker) { - // Create the marker on the first click - marker = new AdvancedMarkerElement({ - map: map, - position: latLng, - gmpClickable: true, - }); - // Add click listener to the marker - marker.addListener('click', () => { - infoWindow.close(); - const content = ` -
Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- });
- // Open InfoWindow immediately on first click
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- else {
- // Move the existing marker on subsequent clicks
- marker.position = latLng;
- // InfoWindow remains open
- const content = `
- Location: ${latLng.lat().toFixed(3)}, ${latLng.lng().toFixed(3)}
-
- `;
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- }
- });
- // Button functionality
- const toggleButton = document.getElementById('toggleButton');
- if (toggleButton) {
- // Check if toggleButton is found
- toggleButton.addEventListener('click', () => {
- const currentVisible = heatmapLayer.props.visible;
- // Create a new layer instance with toggled visibility and update the overlay
- const newLayer = heatmapLayer.clone({ visible: !currentVisible });
- googleMapsOverlay.setProps({
- layers: [newLayer],
- });
- heatmapLayer = newLayer; // Update the heatmapLayer variable
- toggleButton.textContent = !currentVisible
- ? 'Hide Heatmap Layer'
- : 'Show Heatmap Layer';
- });
- }
-}
-initMap();
-/* [END maps_deckgl_heatmap] */
diff --git a/dist/samples/deckgl-kml-updated/app/.eslintsrc.json b/dist/samples/deckgl-kml-updated/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/deckgl-kml-updated/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/deckgl-kml-updated/app/README.md b/dist/samples/deckgl-kml-updated/app/README.md
deleted file mode 100644
index 0fbee242b..000000000
--- a/dist/samples/deckgl-kml-updated/app/README.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# Google Maps JavaScript Sample
-
-## deckgl-kml-updated
-
-The deckgl-kml-updated sample demonstrates how to use deck.gl to render KML data that is updated in real-time.
-
-Follow these instructions to set up and run deckgl-kml-updated sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`$npm i`
-
-### Run an example on a local web server
-
-First `cd` to the folder for the sample to run, then:
-
-`$npm start`
-
-### Build an individual example
-
-From `samples/`:
-
-`$npm run build --workspace=deckgl-kml-updated/`
-
-### Build all of the examples.
-
-From `samples/`:
-`$npm run build-all`
-
-## 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/deckgl-kml-updated/app/index.html b/dist/samples/deckgl-kml-updated/app/index.html
deleted file mode 100644
index 84f884ebb..000000000
--- a/dist/samples/deckgl-kml-updated/app/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - -
-
- Earthquake
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-kml-updated/app/index.ts b/dist/samples/deckgl-kml-updated/app/index.ts
deleted file mode 100644
index e45d0fdeb..000000000
--- a/dist/samples/deckgl-kml-updated/app/index.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_kml_updated] */
-// Import necessary loader
-import { KMLLoader } from '@loaders.gl/kml';
-
-// Declare global namespace for Deck.gl to satisfy TypeScript compiler
-declare namespace deck {
- class GeoJsonLayer {
- constructor(props: any);
- props: any;
- clone(props: any): GeoJsonLayer;
- pickable: boolean;
- getFillColor: (d: any) => number[];
- getPointRadius: (d: any) => number;
- getLineColor: (d: any) => number[];
- getLineWidth: (d: any) => number;
- lineWidthMinPixels: number;
- }
- class TextLayer {
- constructor(props: any);
- props: any;
- clone(props: any): TextLayer;
- pickable: boolean;
- getPosition: (d: any) => number[];
- getText: (d: any) => string;
- getColor: (d: any) => number[];
- getSize: (d: any) => number;
- getAngle: (d: any) => number;
- getTextAnchor: string;
- getAlignmentBaseline: string;
- }
- class GoogleMapsOverlay {
- constructor(props: any);
- setMap(map: google.maps.Map | null): void;
- setProps(props: any): void;
- }
- // Add other Deck.gl types used globally if needed
-}
-
-// Initialize and add the map
-let map: google.maps.Map;
-let geojsonLayer: deck.GeoJsonLayer;
-let googleMapsOverlay: deck.GoogleMapsOverlay;
-
-async function initMap(): Promise
- Earthquake
- Magnitude
-
- ${object.properties.description}
`; - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - onDataLoad: () => { - console.log('KML data loaded'); - if (progress && progress.done) { - progress.done(); - } - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay.setMap(map); - - // Generate Legend - const legendContainer = document.getElementById('legend'); - if (legendContainer) { - const magnitudeValues = [1, 2, 3, 4, 5, 6, 7]; // Representative magnitudes - const minMag = 1; - const maxMag = 7; - const minColor = [255, 255, 0]; // Yellow (should match getFillColor) - const maxColor = [255, 0, 0]; // #FF0000 (should match getFillColor) - - magnitudeValues.forEach((magnitude) => { - // Calculate color for the magnitude (using the same interpolation logic) - const normalizedMagnitude = Math.max( - 0, - Math.min(1, (magnitude - minMag) / (maxMag - minMag)) - ); - const r = - minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]); - const g = - minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]); - const b = - minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]); - const color = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; - - // Create legend item element - const legendItem = document.createElement('div'); - legendItem.classList.add('legend-item'); - - // Create color swatch - const colorSwatch = document.createElement('div'); - colorSwatch.classList.add('legend-color'); - colorSwatch.style.backgroundColor = color; - - // Create label - const label = document.createElement('span'); - label.textContent = `${magnitude}`; // Adjust label format as needed - - // Append color swatch and label to legend item - legendItem.appendChild(colorSwatch); - legendItem.appendChild(label); - - // Append legend item to legend container - legendContainer.appendChild(legendItem); - }); - } -} - -initMap(); -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml-updated/app/package.json b/dist/samples/deckgl-kml-updated/app/package.json deleted file mode 100644 index b5dbf22c7..000000000 --- a/dist/samples/deckgl-kml-updated/app/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "@js-api-samples/deckgl-kml-updated", - "version": "1.0.0", - "scripts": { - "build": "tsc && bash ../jsfiddle.sh deckgl-kml-updated && bash ../app.sh deckgl-kml-updated && bash ../docs.sh deckgl-kml-updated && npm run build:vite --workspace=. && bash ../dist.sh deckgl-kml-updated", - "test": "tsc && npm run build:vite", - "start": "vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - }, - "dependencies": { - "@loaders.gl/kml": "^4.3.4" - }, - "devDependencies": { - "apache-arrow": "^21.1.0" - } -} \ No newline at end of file diff --git a/dist/samples/deckgl-kml-updated/app/style.css b/dist/samples/deckgl-kml-updated/app/style.css deleted file mode 100644 index 5f605b443..000000000 --- a/dist/samples/deckgl-kml-updated/app/style.css +++ /dev/null @@ -1,71 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml_updated] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} - -.legend { - position: absolute; - top: 140px; - right: 10px; - z-index: 1000; /* Ensure it's above the map but below tooltip */ - background-color: white; - padding: 10px; - border: 1px solid #ccc; - font-family: 'Roboto', Arial, sans-serif; - font-size: 14px; -} - -.legend-item { - display: flex; - align-items: center; - margin-bottom: 5px; -} - -.legend-color { - width: 20px; - height: 20px; - margin-right: 10px; - border: 1px solid #000; /* Border for color swatch */ -} -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml-updated/app/tsconfig.json b/dist/samples/deckgl-kml-updated/app/tsconfig.json deleted file mode 100644 index b9a134416..000000000 --- a/dist/samples/deckgl-kml-updated/app/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "module": "esnext", - "target": "esnext", - "strict": true, - "noImplicitAny": false, - "lib": [ - "es2015", - "esnext", - "es6", - "dom", - "dom.iterable" - ], - "moduleResolution": "Node", - "jsx": "preserve", - "esModuleInterop": true - } - } \ No newline at end of file diff --git a/dist/samples/deckgl-kml-updated/dist/assets/index-CZ-wiEvo.css b/dist/samples/deckgl-kml-updated/dist/assets/index-CZ-wiEvo.css deleted file mode 100644 index 6caabcf5d..000000000 --- a/dist/samples/deckgl-kml-updated/dist/assets/index-CZ-wiEvo.css +++ /dev/null @@ -1 +0,0 @@ -#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}.tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:12px}h1{text-align:center;margin:10px}.legend{position:absolute;top:140px;right:10px;z-index:1000;background-color:#fff;padding:10px;border:1px solid #ccc;font-family:Roboto,Arial,sans-serif;font-size:14px}.legend-item{display:flex;align-items:center;margin-bottom:5px}.legend-color{width:20px;height:20px;margin-right:10px;border:1px solid #000} diff --git a/dist/samples/deckgl-kml-updated/dist/assets/index-dYJ-eA24.js b/dist/samples/deckgl-kml-updated/dist/assets/index-dYJ-eA24.js deleted file mode 100644 index 9a5dd18d7..000000000 --- a/dist/samples/deckgl-kml-updated/dist/assets/index-dYJ-eA24.js +++ /dev/null @@ -1,4 +0,0 @@ -(function(){const l=document.createElement("link").relList;if(l&&l.supports&&l.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))E(c);new MutationObserver(c=>{for(const f of c)if(f.type==="childList")for(const p of f.addedNodes)p.tagName==="LINK"&&p.rel==="modulepreload"&&E(p)}).observe(document,{childList:!0,subtree:!0});function h(c){const f={};return c.integrity&&(f.integrity=c.integrity),c.referrerPolicy&&(f.referrerPolicy=c.referrerPolicy),c.crossOrigin==="use-credentials"?f.credentials="include":c.crossOrigin==="anonymous"?f.credentials="omit":f.credentials="same-origin",f}function E(c){if(c.ep)return;c.ep=!0;const f=h(c);fetch(c.href,f)}})();function z(i){return i&&i.normalize&&i.normalize(),i&&i.textContent||""}function L(i,l){const h=i.getElementsByTagName(l);return h.length?h[0]:null}const Ee=/\s*/g,Ce=/^\s*|\s*$/g,ve=/\s+/;function ne(i){if(!i||!i.length)return 0;let l=0;for(let h=0;h${p.properties.description}
`,m.innerHTML=C,m.style.left=B+"px",m.style.top=v+"px",m.style.display="block"}else m&&(m.style.display="none")},onDataLoad:()=>{console.log("KML data loaded"),i&&i.done&&i.done()}}),he=new deck.GoogleMapsOverlay({layers:[me],parameters:{depthTest:!1}}),he.setMap(De);const f=document.getElementById("legend");if(f){const p=[1,2,3,4,5,6,7],B=1,v=7,m=[255,255,0],C=[255,0,0];p.forEach(O=>{const P=Math.max(0,Math.min(1,(O-B)/(v-B))),X=m[0]+P*(C[0]-m[0]),j=m[1]+P*(C[1]-m[1]),o=m[2]+P*(C[2]-m[2]),N=`rgb(${Math.round(X)}, ${Math.round(j)}, ${Math.round(o)})`,b=document.createElement("div");b.classList.add("legend-item");const T=document.createElement("div");T.classList.add("legend-color"),T.style.backgroundColor=N;const V=document.createElement("span");V.textContent=`${O}`,b.appendChild(T),b.appendChild(V),f.appendChild(b)})}}Oe(); diff --git a/dist/samples/deckgl-kml-updated/dist/index.html b/dist/samples/deckgl-kml-updated/dist/index.html deleted file mode 100644 index 2433318c3..000000000 --- a/dist/samples/deckgl-kml-updated/dist/index.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - -
-
- Earthquake
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-kml-updated/docs/index.html b/dist/samples/deckgl-kml-updated/docs/index.html
deleted file mode 100644
index 84f884ebb..000000000
--- a/dist/samples/deckgl-kml-updated/docs/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
-
-
-
-
-
-
- Earthquake
- Magnitude
-
-
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - -
-
- Earthquake
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-kml-updated/docs/index.js b/dist/samples/deckgl-kml-updated/docs/index.js
deleted file mode 100644
index f28b81307..000000000
--- a/dist/samples/deckgl-kml-updated/docs/index.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_kml_updated] */
-// Import necessary loader
-import { KMLLoader } from '@loaders.gl/kml';
-// Initialize and add the map
-let map;
-let geojsonLayer;
-let googleMapsOverlay;
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center (adjust as needed for the KML data)
- const position = { lat: 19.223718899391237, lng: -148.62590882823457 };
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 3, // Adjust zoom as needed
- center: position,
- // mapId: '6a17c323f461e521', // Replace with your Map ID
- mapId: '6a17c323f461e521',
- mapTypeId: 'satellite',
- zoomControl: true,
- clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- geojsonLayer = new deck.GeoJsonLayer({
- id: 'geojson-layer',
- data: `https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week_age.kml?t=${Date.now()}`, // Append timestamp to prevent caching
- loaders: [KMLLoader],
- pickable: true,
- stroked: true, // Set to true to add a border
- getLineColor: [0, 0, 0, 255], // Set border color to black
- getLineWidth: 2, // Set border width
- filled: true, // Set to true to render filled circles
- pointType: 'circle', // Render points as circles
- // extruded: false, // Keep as false for 2D circles
- // lineWidthScale: 14, // Not needed for points
- // lineWidthMinPixels: 4, // Not needed for points
- pointRadiusMinPixels: 2,
- pointRadiusMaxPixels: 200,
- getRadius: (f) => 8000,
- getFillColor: (f, { index }) => {
- // Extract magnitude from the description string
- const description = f.properties.description;
- const magnitudeMatch = description.match(/M (\d+\.?\d*)/);
- let parsedMagnitude = null;
- if (magnitudeMatch && magnitudeMatch[1]) {
- parsedMagnitude = parseFloat(magnitudeMatch[1]);
- }
- else {
- console.log('Magnitude not found');
- }
- // Define color range (Lighter Red to #FF0000) - Increased contrast
- const minColor = [255, 255, 0]; // Yellow
- const maxColor = [255, 0, 0]; // #FF0000
- const minMag = 1;
- const maxMag = 7;
- // Use parsed magnitude for color calculation
- const magnitudeForColor = parsedMagnitude !== null ? parsedMagnitude : minMag;
- // Normalize magnitude
- const normalizedMagnitude = Math.max(0, Math.min(1, (magnitudeForColor - minMag) / (maxMag - minMag)));
- // Interpolate colors
- const r = minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]);
- const g = minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]);
- const b = minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]);
- const interpolatedColor = [
- Math.round(r),
- Math.round(g),
- Math.round(b),
- 200,
- ];
- return interpolatedColor; // Color scale based on magnitude, fixed alpha
- },
- autoHighlight: true,
- transitions: {
- getRadius: {
- type: 'spring',
- stiffness: 0.1,
- damping: 0.15,
- enter: () => [0], // grow from size 0,
- duration: 10000,
- },
- },
- // Optional: Add onHover or onClick handlers for interactivity
- onHover: ({ object, x, y }) => {
- const tooltip = document.getElementById('tooltip'); // Assuming a tooltip element exists
- if (tooltip && object) {
- let tooltipContent = `Earthquakes 1.0_week_age`;
- tooltipContent += `
- Earthquake
- Magnitude
-
- ${object.properties.description}
`; - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - onDataLoad: () => { - console.log('KML data loaded'); - if (progress && progress.done) { - progress.done(); - } - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay.setMap(map); - // Generate Legend - const legendContainer = document.getElementById('legend'); - if (legendContainer) { - const magnitudeValues = [1, 2, 3, 4, 5, 6, 7]; // Representative magnitudes - const minMag = 1; - const maxMag = 7; - const minColor = [255, 255, 0]; // Yellow (should match getFillColor) - const maxColor = [255, 0, 0]; // #FF0000 (should match getFillColor) - magnitudeValues.forEach((magnitude) => { - // Calculate color for the magnitude (using the same interpolation logic) - const normalizedMagnitude = Math.max(0, Math.min(1, (magnitude - minMag) / (maxMag - minMag))); - const r = minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]); - const g = minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]); - const b = minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]); - const color = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; - // Create legend item element - const legendItem = document.createElement('div'); - legendItem.classList.add('legend-item'); - // Create color swatch - const colorSwatch = document.createElement('div'); - colorSwatch.classList.add('legend-color'); - colorSwatch.style.backgroundColor = color; - // Create label - const label = document.createElement('span'); - label.textContent = `${magnitude}`; // Adjust label format as needed - // Append color swatch and label to legend item - legendItem.appendChild(colorSwatch); - legendItem.appendChild(label); - // Append legend item to legend container - legendContainer.appendChild(legendItem); - }); - } -} -initMap(); -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml-updated/docs/index.ts b/dist/samples/deckgl-kml-updated/docs/index.ts deleted file mode 100644 index e45d0fdeb..000000000 --- a/dist/samples/deckgl-kml-updated/docs/index.ts +++ /dev/null @@ -1,243 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml_updated] */ -// Import necessary loader -import { KMLLoader } from '@loaders.gl/kml'; - -// Declare global namespace for Deck.gl to satisfy TypeScript compiler -declare namespace deck { - class GeoJsonLayer { - constructor(props: any); - props: any; - clone(props: any): GeoJsonLayer; - pickable: boolean; - getFillColor: (d: any) => number[]; - getPointRadius: (d: any) => number; - getLineColor: (d: any) => number[]; - getLineWidth: (d: any) => number; - lineWidthMinPixels: number; - } - class TextLayer { - constructor(props: any); - props: any; - clone(props: any): TextLayer; - pickable: boolean; - getPosition: (d: any) => number[]; - getText: (d: any) => string; - getColor: (d: any) => number[]; - getSize: (d: any) => number; - getAngle: (d: any) => number; - getTextAnchor: string; - getAlignmentBaseline: string; - } - class GoogleMapsOverlay { - constructor(props: any); - setMap(map: google.maps.Map | null): void; - setProps(props: any): void; - } - // Add other Deck.gl types used globally if needed -} - -// Initialize and add the map -let map: google.maps.Map; -let geojsonLayer: deck.GeoJsonLayer; -let googleMapsOverlay: deck.GoogleMapsOverlay; - -async function initMap(): Promise${object.properties.description}
`; - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - onDataLoad: () => { - console.log('KML data loaded'); - if (progress && progress.done) { - progress.done(); - } - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay.setMap(map); - - // Generate Legend - const legendContainer = document.getElementById('legend'); - if (legendContainer) { - const magnitudeValues = [1, 2, 3, 4, 5, 6, 7]; // Representative magnitudes - const minMag = 1; - const maxMag = 7; - const minColor = [255, 255, 0]; // Yellow (should match getFillColor) - const maxColor = [255, 0, 0]; // #FF0000 (should match getFillColor) - - magnitudeValues.forEach((magnitude) => { - // Calculate color for the magnitude (using the same interpolation logic) - const normalizedMagnitude = Math.max( - 0, - Math.min(1, (magnitude - minMag) / (maxMag - minMag)) - ); - const r = - minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]); - const g = - minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]); - const b = - minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]); - const color = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; - - // Create legend item element - const legendItem = document.createElement('div'); - legendItem.classList.add('legend-item'); - - // Create color swatch - const colorSwatch = document.createElement('div'); - colorSwatch.classList.add('legend-color'); - colorSwatch.style.backgroundColor = color; - - // Create label - const label = document.createElement('span'); - label.textContent = `${magnitude}`; // Adjust label format as needed - - // Append color swatch and label to legend item - legendItem.appendChild(colorSwatch); - legendItem.appendChild(label); - - // Append legend item to legend container - legendContainer.appendChild(legendItem); - }); - } -} - -initMap(); -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml-updated/docs/style.css b/dist/samples/deckgl-kml-updated/docs/style.css deleted file mode 100644 index 5f605b443..000000000 --- a/dist/samples/deckgl-kml-updated/docs/style.css +++ /dev/null @@ -1,71 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml_updated] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} - -.legend { - position: absolute; - top: 140px; - right: 10px; - z-index: 1000; /* Ensure it's above the map but below tooltip */ - background-color: white; - padding: 10px; - border: 1px solid #ccc; - font-family: 'Roboto', Arial, sans-serif; - font-size: 14px; -} - -.legend-item { - display: flex; - align-items: center; - margin-bottom: 5px; -} - -.legend-color { - width: 20px; - height: 20px; - margin-right: 10px; - border: 1px solid #000; /* Border for color swatch */ -} -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml-updated/jsfiddle/demo.css b/dist/samples/deckgl-kml-updated/jsfiddle/demo.css deleted file mode 100644 index 49b591372..000000000 --- a/dist/samples/deckgl-kml-updated/jsfiddle/demo.css +++ /dev/null @@ -1,71 +0,0 @@ -/* - * @license - * Copyright 2025 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%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} - -.legend { - position: absolute; - top: 140px; - right: 10px; - z-index: 1000; /* Ensure it's above the map but below tooltip */ - background-color: white; - padding: 10px; - border: 1px solid #ccc; - font-family: 'Roboto', Arial, sans-serif; - font-size: 14px; -} - -.legend-item { - display: flex; - align-items: center; - margin-bottom: 5px; -} - -.legend-color { - width: 20px; - height: 20px; - margin-right: 10px; - border: 1px solid #000; /* Border for color swatch */ -} - diff --git a/dist/samples/deckgl-kml-updated/jsfiddle/demo.details b/dist/samples/deckgl-kml-updated/jsfiddle/demo.details deleted file mode 100644 index da87d77fc..000000000 --- a/dist/samples/deckgl-kml-updated/jsfiddle/demo.details +++ /dev/null @@ -1,7 +0,0 @@ -name: deckgl-kml-updated -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/deckgl-kml-updated/jsfiddle/demo.html b/dist/samples/deckgl-kml-updated/jsfiddle/demo.html deleted file mode 100644 index 773b8f7d9..000000000 --- a/dist/samples/deckgl-kml-updated/jsfiddle/demo.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - -
-
- Earthquake
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-kml-updated/jsfiddle/demo.js b/dist/samples/deckgl-kml-updated/jsfiddle/demo.js
deleted file mode 100644
index f28b81307..000000000
--- a/dist/samples/deckgl-kml-updated/jsfiddle/demo.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_kml_updated] */
-// Import necessary loader
-import { KMLLoader } from '@loaders.gl/kml';
-// Initialize and add the map
-let map;
-let geojsonLayer;
-let googleMapsOverlay;
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center (adjust as needed for the KML data)
- const position = { lat: 19.223718899391237, lng: -148.62590882823457 };
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 3, // Adjust zoom as needed
- center: position,
- // mapId: '6a17c323f461e521', // Replace with your Map ID
- mapId: '6a17c323f461e521',
- mapTypeId: 'satellite',
- zoomControl: true,
- clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- geojsonLayer = new deck.GeoJsonLayer({
- id: 'geojson-layer',
- data: `https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week_age.kml?t=${Date.now()}`, // Append timestamp to prevent caching
- loaders: [KMLLoader],
- pickable: true,
- stroked: true, // Set to true to add a border
- getLineColor: [0, 0, 0, 255], // Set border color to black
- getLineWidth: 2, // Set border width
- filled: true, // Set to true to render filled circles
- pointType: 'circle', // Render points as circles
- // extruded: false, // Keep as false for 2D circles
- // lineWidthScale: 14, // Not needed for points
- // lineWidthMinPixels: 4, // Not needed for points
- pointRadiusMinPixels: 2,
- pointRadiusMaxPixels: 200,
- getRadius: (f) => 8000,
- getFillColor: (f, { index }) => {
- // Extract magnitude from the description string
- const description = f.properties.description;
- const magnitudeMatch = description.match(/M (\d+\.?\d*)/);
- let parsedMagnitude = null;
- if (magnitudeMatch && magnitudeMatch[1]) {
- parsedMagnitude = parseFloat(magnitudeMatch[1]);
- }
- else {
- console.log('Magnitude not found');
- }
- // Define color range (Lighter Red to #FF0000) - Increased contrast
- const minColor = [255, 255, 0]; // Yellow
- const maxColor = [255, 0, 0]; // #FF0000
- const minMag = 1;
- const maxMag = 7;
- // Use parsed magnitude for color calculation
- const magnitudeForColor = parsedMagnitude !== null ? parsedMagnitude : minMag;
- // Normalize magnitude
- const normalizedMagnitude = Math.max(0, Math.min(1, (magnitudeForColor - minMag) / (maxMag - minMag)));
- // Interpolate colors
- const r = minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]);
- const g = minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]);
- const b = minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]);
- const interpolatedColor = [
- Math.round(r),
- Math.round(g),
- Math.round(b),
- 200,
- ];
- return interpolatedColor; // Color scale based on magnitude, fixed alpha
- },
- autoHighlight: true,
- transitions: {
- getRadius: {
- type: 'spring',
- stiffness: 0.1,
- damping: 0.15,
- enter: () => [0], // grow from size 0,
- duration: 10000,
- },
- },
- // Optional: Add onHover or onClick handlers for interactivity
- onHover: ({ object, x, y }) => {
- const tooltip = document.getElementById('tooltip'); // Assuming a tooltip element exists
- if (tooltip && object) {
- let tooltipContent = `Earthquakes 1.0_week_age`;
- tooltipContent += `
- Earthquake
- Magnitude
-
- ${object.properties.description}
`; - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - onDataLoad: () => { - console.log('KML data loaded'); - if (progress && progress.done) { - progress.done(); - } - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay.setMap(map); - // Generate Legend - const legendContainer = document.getElementById('legend'); - if (legendContainer) { - const magnitudeValues = [1, 2, 3, 4, 5, 6, 7]; // Representative magnitudes - const minMag = 1; - const maxMag = 7; - const minColor = [255, 255, 0]; // Yellow (should match getFillColor) - const maxColor = [255, 0, 0]; // #FF0000 (should match getFillColor) - magnitudeValues.forEach((magnitude) => { - // Calculate color for the magnitude (using the same interpolation logic) - const normalizedMagnitude = Math.max(0, Math.min(1, (magnitude - minMag) / (maxMag - minMag))); - const r = minColor[0] + normalizedMagnitude * (maxColor[0] - minColor[0]); - const g = minColor[1] + normalizedMagnitude * (maxColor[1] - minColor[1]); - const b = minColor[2] + normalizedMagnitude * (maxColor[2] - minColor[2]); - const color = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`; - // Create legend item element - const legendItem = document.createElement('div'); - legendItem.classList.add('legend-item'); - // Create color swatch - const colorSwatch = document.createElement('div'); - colorSwatch.classList.add('legend-color'); - colorSwatch.style.backgroundColor = color; - // Create label - const label = document.createElement('span'); - label.textContent = `${magnitude}`; // Adjust label format as needed - // Append color swatch and label to legend item - legendItem.appendChild(colorSwatch); - legendItem.appendChild(label); - // Append legend item to legend container - legendContainer.appendChild(legendItem); - }); - } -} -initMap(); -/* [END maps_deckgl_kml_updated] */ diff --git a/dist/samples/deckgl-kml/app/.eslintsrc.json b/dist/samples/deckgl-kml/app/.eslintsrc.json deleted file mode 100644 index 4c44dab04..000000000 --- a/dist/samples/deckgl-kml/app/.eslintsrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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/deckgl-kml/app/README.md b/dist/samples/deckgl-kml/app/README.md deleted file mode 100644 index 4b2c524b6..000000000 --- a/dist/samples/deckgl-kml/app/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# Google Maps JavaScript Sample - -## deckgl-kml - -The deckgl-kml sample demonstrates how to use deck.gl to render KML data. - -Follow these instructions to set up and run deckgl-kml sample on your local computer. - -## Setup - -### Before starting run: - -`$npm i` - -### Run an example on a local web server - -First `cd` to the folder for the sample to run, then: - -`$npm start` - -### Build an individual example - -From `samples/`: - -`$npm run build --workspace=deckgl-kml/` - -### Build all of the examples. - -From `samples/`: -`$npm run build-all` - -## 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/deckgl-kml/app/index.html b/dist/samples/deckgl-kml/app/index.html deleted file mode 100644 index 99e25366d..000000000 --- a/dist/samples/deckgl-kml/app/index.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - - - - - - - diff --git a/dist/samples/deckgl-kml/app/index.ts b/dist/samples/deckgl-kml/app/index.ts deleted file mode 100644 index 991b5e3d7..000000000 --- a/dist/samples/deckgl-kml/app/index.ts +++ /dev/null @@ -1,230 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -// Import necessary loader -import { KMLLoader } from '@loaders.gl/kml'; - -// Declare global namespace for Deck.gl to satisfy TypeScript compiler -declare namespace deck { - class GeoJsonLayer { - constructor(props: any); - props: any; - clone(props: any): GeoJsonLayer; - pickable: boolean; - getFillColor: (d: any) => number[]; - getLineColor: (d: any) => number[]; - getLineWidth: (d: any) => number; - lineWidthMinPixels: number; - } - class TextLayer { - constructor(props: any); - props: any; - clone(props: any): TextLayer; - pickable: boolean; - getPosition: (d: any) => number[]; - getText: (d: any) => string; - getColor: (d: any) => number[]; - getSize: (d: any) => number; - getAngle: (d: any) => number; - getTextAnchor: string; - getAlignmentBaseline: string; - } - class GoogleMapsOverlay { - constructor(props: any); - setMap(map: google.maps.Map | null): void; - setProps(props: any): void; - } - // Add other Deck.gl types used globally if needed -} - -// Initialize and add the map -let map: google.maps.Map; -let geojsonLayer: deck.GeoJsonLayer; -let googleMapsOverlay: deck.GoogleMapsOverlay; - -async function initMap(): Promise${object.properties.name || 'GeoJSON Feature'}
`; - // Define a list of common KML properties to display - const kmlProperties = [ - 'description', - 'styleUrl', - 'color', - 'stroke', - 'stroke-width', - 'fill', - ]; - for (const key of kmlProperties) { - if ( - object.properties.hasOwnProperty(key) && - object.properties[key] !== undefined - ) { - tooltipContent += `${key}: ${object.properties[key]}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - }); - - const textLayer = new deck.TextLayer({ - id: 'text-layer', - data: geojsonLayer.props.data, // Use the same data as the GeoJsonLayer - getPosition: (d: any) => { - // Attempt to use a 'centroid' property if available, otherwise use the first coordinate - let position = [0, 0]; // Default position - if (d.properties.centroid) { - position = d.properties.centroid; - } else if ( - d.geometry && - d.geometry.coordinates && - d.geometry.coordinates.length > 0 - ) { - // Assuming Polygon or MultiPolygon - const coordinates = d.geometry.coordinates[0][0]; - if (coordinates && coordinates.length >= 2) { - position = [coordinates[0], coordinates[1]]; // [lng, lat] - } - } - return position; - }, - getText: (d: any) => d.properties.name || '', // Display the name property - getColor: [0, 0, 0, 255], // Black text color for better visibility - getSize: 16, // Increased text size - getAngle: 0, - getTextAnchor: 'middle', - getAlignmentBaseline: 'middle', - // Disable depth testing for text layer as well - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer, textLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay.setMap(map); -} - -/** - * Converts a hex color string (#RRGGBB or #AABBGGRR) or an AABBGGRR string to an RGBA array. - * @param color The color string. - * @returns An RGBA array [R, G, B, A] or null if the format is invalid. - */ -function hexOrAabbggrrToRgba(color: string): number[] | null { - if (color.startsWith('#')) { - color = color.slice(1); - } - - if (color.length === 6) { - // #RRGGBB format - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - return [r, g, b, 255]; // Assume full opacity - } else if (color.length === 8) { - // #AABBGGRR or AABBGGRR format (KML uses AABBGGRR) - const a = parseInt(color.substring(0, 2), 16); - const b = parseInt(color.substring(2, 4), 16); - const g = parseInt(color.substring(4, 6), 16); - const r = parseInt(color.substring(6, 8), 16); - return [r, g, b, a]; - } - - return null; // Invalid format -} - -initMap(); -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-kml/app/package.json b/dist/samples/deckgl-kml/app/package.json deleted file mode 100644 index 334facab0..000000000 --- a/dist/samples/deckgl-kml/app/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "@js-api-samples/deckgl-kml", - "version": "1.0.0", - "scripts": { - "build": "tsc && bash ../jsfiddle.sh deckgl-kml && bash ../app.sh deckgl-kml && bash ../docs.sh deckgl-kml && npm run build:vite --workspace=. && bash ../dist.sh deckgl-kml", - "test": "tsc && npm run build:vite", - "start": "vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - }, - "dependencies": { - "@loaders.gl/kml": "^4.3.4" - }, - "devDependencies": { - "apache-arrow": "^21.1.0" - } -} \ No newline at end of file diff --git a/dist/samples/deckgl-kml/app/style.css b/dist/samples/deckgl-kml/app/style.css deleted file mode 100644 index 0ada827a9..000000000 --- a/dist/samples/deckgl-kml/app/style.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-kml/app/tsconfig.json b/dist/samples/deckgl-kml/app/tsconfig.json deleted file mode 100644 index b9a134416..000000000 --- a/dist/samples/deckgl-kml/app/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "module": "esnext", - "target": "esnext", - "strict": true, - "noImplicitAny": false, - "lib": [ - "es2015", - "esnext", - "es6", - "dom", - "dom.iterable" - ], - "moduleResolution": "Node", - "jsx": "preserve", - "esModuleInterop": true - } - } \ No newline at end of file diff --git a/dist/samples/deckgl-kml/dist/assets/index-7F34DXLW.css b/dist/samples/deckgl-kml/dist/assets/index-7F34DXLW.css deleted file mode 100644 index f7d7f6ba1..000000000 --- a/dist/samples/deckgl-kml/dist/assets/index-7F34DXLW.css +++ /dev/null @@ -1 +0,0 @@ -#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}.tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:12px}h1{text-align:center;margin:10px} diff --git a/dist/samples/deckgl-kml/dist/assets/index-DUNm5Snc.js b/dist/samples/deckgl-kml/dist/assets/index-DUNm5Snc.js deleted file mode 100644 index 04a254e61..000000000 --- a/dist/samples/deckgl-kml/dist/assets/index-DUNm5Snc.js +++ /dev/null @@ -1,4 +0,0 @@ -(function(){const l=document.createElement("link").relList;if(l&&l.supports&&l.supports("modulepreload"))return;for(const c of document.querySelectorAll('link[rel="modulepreload"]'))h(c);new MutationObserver(c=>{for(const f of c)if(f.type==="childList")for(const o of f.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&h(o)}).observe(document,{childList:!0,subtree:!0});function D(c){const f={};return c.integrity&&(f.integrity=c.integrity),c.referrerPolicy&&(f.referrerPolicy=c.referrerPolicy),c.crossOrigin==="use-credentials"?f.credentials="include":c.crossOrigin==="anonymous"?f.credentials="omit":f.credentials="same-origin",f}function h(c){if(c.ep)return;c.ep=!0;const f=D(c);fetch(c.href,f)}})();function H(n){return n&&n.normalize&&n.normalize(),n&&n.textContent||""}function x(n,l){const D=n.getElementsByTagName(l);return D.length?D[0]:null}const Ee=/\s*/g,ve=/^\s*|\s*$/g,Ce=/\s+/;function ie(n){if(!n||!n.length)return 0;let l=0;for(let D=0;D${o.properties.name||"GeoJSON Feature"}
`;const _=["description","styleUrl","color","stroke","stroke-width","fill"];for(const V of _)o.properties.hasOwnProperty(V)&&o.properties[V]!==void 0&&(w+=`${V}: ${o.properties[V]}
`);v.innerHTML=w,v.style.left=b+"px",v.style.top=A+"px",v.style.display="block"}else v&&(v.style.display="none")}});const f=new deck.TextLayer({id:"text-layer",data:Yu.props.data,getPosition:o=>{let b=[0,0];if(o.properties.centroid)b=o.properties.centroid;else if(o.geometry&&o.geometry.coordinates&&o.geometry.coordinates.length>0){const A=o.geometry.coordinates[0][0];A&&A.length>=2&&(b=[A[0],A[1]])}return b},getText:o=>o.properties.name||"",getColor:[0,0,0,255],getSize:16,getAngle:0,getTextAnchor:"middle",getAlignmentBaseline:"middle",parameters:{depthTest:!1}});he=new deck.GoogleMapsOverlay({layers:[Yu,f],parameters:{depthTest:!1}}),he.setMap(me)}function Re(n){if(n.startsWith("#")&&(n=n.slice(1)),n.length===6){const l=parseInt(n.substring(0,2),16),D=parseInt(n.substring(2,4),16),h=parseInt(n.substring(4,6),16);return[l,D,h,255]}else if(n.length===8){const l=parseInt(n.substring(0,2),16),D=parseInt(n.substring(2,4),16),h=parseInt(n.substring(4,6),16);return[parseInt(n.substring(6,8),16),h,D,l]}return null}Le(); diff --git a/dist/samples/deckgl-kml/dist/index.html b/dist/samples/deckgl-kml/dist/index.html deleted file mode 100644 index 20309dbac..000000000 --- a/dist/samples/deckgl-kml/dist/index.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - - - - - - - diff --git a/dist/samples/deckgl-kml/docs/index.html b/dist/samples/deckgl-kml/docs/index.html deleted file mode 100644 index 99e25366d..000000000 --- a/dist/samples/deckgl-kml/docs/index.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - - - - - - - diff --git a/dist/samples/deckgl-kml/docs/index.js b/dist/samples/deckgl-kml/docs/index.js deleted file mode 100644 index f2abb07a5..000000000 --- a/dist/samples/deckgl-kml/docs/index.js +++ /dev/null @@ -1,177 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -// Import necessary loader -import { KMLLoader } from '@loaders.gl/kml'; -// Initialize and add the map -let map; -let geojsonLayer; -let googleMapsOverlay; -async function initMap() { - // Progress bar logic moved from index.html - var progress, progressDiv = document.querySelector('.mdc-linear-progress'); - if (progressDiv) { - // Assuming 'mdc' is globally available, potentially loaded via a script tag - // If not, you might need to import it or add type definitions. - // @ts-ignore - progress = new mdc.linearProgress.MDCLinearProgress(progressDiv); - progress.open(); - progress.determinate = false; - progress.done = function () { - progress.close(); - progressDiv?.remove(); // Use optional chaining in case progressDiv is null - }; - } - // The location for the map center (adjust as needed for the KML data) - const position = { lat: 41.8692576, lng: -87.689769 }; - // Request needed libraries. - const { Map } = (await google.maps.importLibrary('maps')); - const mapDiv = document.getElementById('map'); - if (!mapDiv) { - console.error('Map element not found!'); - return; - } - // The map, centered at the specified position - map = new Map(mapDiv, { - zoom: 11, // Adjust zoom as needed - center: position, - // mapId: '6a17c323f461e521', // Replace with your Map ID - mapId: '6a17c323f461e521', - zoomControl: true, - clickableIcons: false, // Disable clicks on base map POIs - }); - // Deck.gl Layer and Overlay - geojsonLayer = new deck.GeoJsonLayer({ - id: 'geojson-layer', - data: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', - loaders: [KMLLoader], - pickable: true, - stroked: true, // Set to true to render lines - filled: false, // Set to false for lines - extruded: false, // Set to false for lines - lineWidthScale: 14, // Adjust line width scale - lineWidthMinPixels: 4, - getLineColor: (d) => { - // Function to get color from properties - const color = d.properties.color || d.properties.stroke; // Try 'color' or 'stroke' property - if (color) { - // Convert hex or AABBGGRR string to RGBA array - const rgba = hexOrAabbggrrToRgba(color); - if (rgba) { - return rgba; - } - } - return [120, 120, 120, 255]; // Default color if no color property or conversion fails - }, - getLineWidth: 2, // Adjust line width - onDataLoad: () => { - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - }, - // Optional: Add onHover or onClick handlers for interactivity - onHover: ({ object, x, y }) => { - const tooltip = document.getElementById('tooltip'); // Assuming a tooltip element exists - if (tooltip && object) { - let tooltipContent = `${object.properties.name || 'GeoJSON Feature'}
`; - // Define a list of common KML properties to display - const kmlProperties = [ - 'description', - 'styleUrl', - 'color', - 'stroke', - 'stroke-width', - 'fill', - ]; - for (const key of kmlProperties) { - if (object.properties.hasOwnProperty(key) && - object.properties[key] !== undefined) { - tooltipContent += `${key}: ${object.properties[key]}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - }); - const textLayer = new deck.TextLayer({ - id: 'text-layer', - data: geojsonLayer.props.data, // Use the same data as the GeoJsonLayer - getPosition: (d) => { - // Attempt to use a 'centroid' property if available, otherwise use the first coordinate - let position = [0, 0]; // Default position - if (d.properties.centroid) { - position = d.properties.centroid; - } - else if (d.geometry && - d.geometry.coordinates && - d.geometry.coordinates.length > 0) { - // Assuming Polygon or MultiPolygon - const coordinates = d.geometry.coordinates[0][0]; - if (coordinates && coordinates.length >= 2) { - position = [coordinates[0], coordinates[1]]; // [lng, lat] - } - } - return position; - }, - getText: (d) => d.properties.name || '', // Display the name property - getColor: [0, 0, 0, 255], // Black text color for better visibility - getSize: 16, // Increased text size - getAngle: 0, - getTextAnchor: 'middle', - getAlignmentBaseline: 'middle', - // Disable depth testing for text layer as well - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer, textLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay.setMap(map); -} -/** - * Converts a hex color string (#RRGGBB or #AABBGGRR) or an AABBGGRR string to an RGBA array. - * @param color The color string. - * @returns An RGBA array [R, G, B, A] or null if the format is invalid. - */ -function hexOrAabbggrrToRgba(color) { - if (color.startsWith('#')) { - color = color.slice(1); - } - if (color.length === 6) { - // #RRGGBB format - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - return [r, g, b, 255]; // Assume full opacity - } - else if (color.length === 8) { - // #AABBGGRR or AABBGGRR format (KML uses AABBGGRR) - const a = parseInt(color.substring(0, 2), 16); - const b = parseInt(color.substring(2, 4), 16); - const g = parseInt(color.substring(4, 6), 16); - const r = parseInt(color.substring(6, 8), 16); - return [r, g, b, a]; - } - return null; // Invalid format -} -initMap(); -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-kml/docs/index.ts b/dist/samples/deckgl-kml/docs/index.ts deleted file mode 100644 index 991b5e3d7..000000000 --- a/dist/samples/deckgl-kml/docs/index.ts +++ /dev/null @@ -1,230 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -// Import necessary loader -import { KMLLoader } from '@loaders.gl/kml'; - -// Declare global namespace for Deck.gl to satisfy TypeScript compiler -declare namespace deck { - class GeoJsonLayer { - constructor(props: any); - props: any; - clone(props: any): GeoJsonLayer; - pickable: boolean; - getFillColor: (d: any) => number[]; - getLineColor: (d: any) => number[]; - getLineWidth: (d: any) => number; - lineWidthMinPixels: number; - } - class TextLayer { - constructor(props: any); - props: any; - clone(props: any): TextLayer; - pickable: boolean; - getPosition: (d: any) => number[]; - getText: (d: any) => string; - getColor: (d: any) => number[]; - getSize: (d: any) => number; - getAngle: (d: any) => number; - getTextAnchor: string; - getAlignmentBaseline: string; - } - class GoogleMapsOverlay { - constructor(props: any); - setMap(map: google.maps.Map | null): void; - setProps(props: any): void; - } - // Add other Deck.gl types used globally if needed -} - -// Initialize and add the map -let map: google.maps.Map; -let geojsonLayer: deck.GeoJsonLayer; -let googleMapsOverlay: deck.GoogleMapsOverlay; - -async function initMap(): Promise${object.properties.name || 'GeoJSON Feature'}
`; - // Define a list of common KML properties to display - const kmlProperties = [ - 'description', - 'styleUrl', - 'color', - 'stroke', - 'stroke-width', - 'fill', - ]; - for (const key of kmlProperties) { - if ( - object.properties.hasOwnProperty(key) && - object.properties[key] !== undefined - ) { - tooltipContent += `${key}: ${object.properties[key]}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - }); - - const textLayer = new deck.TextLayer({ - id: 'text-layer', - data: geojsonLayer.props.data, // Use the same data as the GeoJsonLayer - getPosition: (d: any) => { - // Attempt to use a 'centroid' property if available, otherwise use the first coordinate - let position = [0, 0]; // Default position - if (d.properties.centroid) { - position = d.properties.centroid; - } else if ( - d.geometry && - d.geometry.coordinates && - d.geometry.coordinates.length > 0 - ) { - // Assuming Polygon or MultiPolygon - const coordinates = d.geometry.coordinates[0][0]; - if (coordinates && coordinates.length >= 2) { - position = [coordinates[0], coordinates[1]]; // [lng, lat] - } - } - return position; - }, - getText: (d: any) => d.properties.name || '', // Display the name property - getColor: [0, 0, 0, 255], // Black text color for better visibility - getSize: 16, // Increased text size - getAngle: 0, - getTextAnchor: 'middle', - getAlignmentBaseline: 'middle', - // Disable depth testing for text layer as well - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer, textLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - - googleMapsOverlay.setMap(map); -} - -/** - * Converts a hex color string (#RRGGBB or #AABBGGRR) or an AABBGGRR string to an RGBA array. - * @param color The color string. - * @returns An RGBA array [R, G, B, A] or null if the format is invalid. - */ -function hexOrAabbggrrToRgba(color: string): number[] | null { - if (color.startsWith('#')) { - color = color.slice(1); - } - - if (color.length === 6) { - // #RRGGBB format - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - return [r, g, b, 255]; // Assume full opacity - } else if (color.length === 8) { - // #AABBGGRR or AABBGGRR format (KML uses AABBGGRR) - const a = parseInt(color.substring(0, 2), 16); - const b = parseInt(color.substring(2, 4), 16); - const g = parseInt(color.substring(4, 6), 16); - const r = parseInt(color.substring(6, 8), 16); - return [r, g, b, a]; - } - - return null; // Invalid format -} - -initMap(); -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-kml/docs/style.css b/dist/samples/deckgl-kml/docs/style.css deleted file mode 100644 index 0ada827a9..000000000 --- a/dist/samples/deckgl-kml/docs/style.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-kml/jsfiddle/demo.css b/dist/samples/deckgl-kml/jsfiddle/demo.css deleted file mode 100644 index 5982de498..000000000 --- a/dist/samples/deckgl-kml/jsfiddle/demo.css +++ /dev/null @@ -1,46 +0,0 @@ -/* - * @license - * Copyright 2025 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%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -.tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 12px; -} - -h1 { - text-align: center; - margin: 10px; -} - diff --git a/dist/samples/deckgl-kml/jsfiddle/demo.details b/dist/samples/deckgl-kml/jsfiddle/demo.details deleted file mode 100644 index 20eaea1d2..000000000 --- a/dist/samples/deckgl-kml/jsfiddle/demo.details +++ /dev/null @@ -1,7 +0,0 @@ -name: deckgl-kml -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/deckgl-kml/jsfiddle/demo.html b/dist/samples/deckgl-kml/jsfiddle/demo.html deleted file mode 100644 index c8b6a73a9..000000000 --- a/dist/samples/deckgl-kml/jsfiddle/demo.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Deck.gl KMLLoader
- - - - - - - - - diff --git a/dist/samples/deckgl-kml/jsfiddle/demo.js b/dist/samples/deckgl-kml/jsfiddle/demo.js deleted file mode 100644 index f2abb07a5..000000000 --- a/dist/samples/deckgl-kml/jsfiddle/demo.js +++ /dev/null @@ -1,177 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_kml] */ -// Import necessary loader -import { KMLLoader } from '@loaders.gl/kml'; -// Initialize and add the map -let map; -let geojsonLayer; -let googleMapsOverlay; -async function initMap() { - // Progress bar logic moved from index.html - var progress, progressDiv = document.querySelector('.mdc-linear-progress'); - if (progressDiv) { - // Assuming 'mdc' is globally available, potentially loaded via a script tag - // If not, you might need to import it or add type definitions. - // @ts-ignore - progress = new mdc.linearProgress.MDCLinearProgress(progressDiv); - progress.open(); - progress.determinate = false; - progress.done = function () { - progress.close(); - progressDiv?.remove(); // Use optional chaining in case progressDiv is null - }; - } - // The location for the map center (adjust as needed for the KML data) - const position = { lat: 41.8692576, lng: -87.689769 }; - // Request needed libraries. - const { Map } = (await google.maps.importLibrary('maps')); - const mapDiv = document.getElementById('map'); - if (!mapDiv) { - console.error('Map element not found!'); - return; - } - // The map, centered at the specified position - map = new Map(mapDiv, { - zoom: 11, // Adjust zoom as needed - center: position, - // mapId: '6a17c323f461e521', // Replace with your Map ID - mapId: '6a17c323f461e521', - zoomControl: true, - clickableIcons: false, // Disable clicks on base map POIs - }); - // Deck.gl Layer and Overlay - geojsonLayer = new deck.GeoJsonLayer({ - id: 'geojson-layer', - data: 'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', - loaders: [KMLLoader], - pickable: true, - stroked: true, // Set to true to render lines - filled: false, // Set to false for lines - extruded: false, // Set to false for lines - lineWidthScale: 14, // Adjust line width scale - lineWidthMinPixels: 4, - getLineColor: (d) => { - // Function to get color from properties - const color = d.properties.color || d.properties.stroke; // Try 'color' or 'stroke' property - if (color) { - // Convert hex or AABBGGRR string to RGBA array - const rgba = hexOrAabbggrrToRgba(color); - if (rgba) { - return rgba; - } - } - return [120, 120, 120, 255]; // Default color if no color property or conversion fails - }, - getLineWidth: 2, // Adjust line width - onDataLoad: () => { - if (progress) { - // Check if progress is defined - // Add a small delay to ensure the progress bar is removed - setTimeout(() => { - // @ts-ignore - progress.done(); // hides progress bar - }, 100); // 100ms delay - } - }, - // Optional: Add onHover or onClick handlers for interactivity - onHover: ({ object, x, y }) => { - const tooltip = document.getElementById('tooltip'); // Assuming a tooltip element exists - if (tooltip && object) { - let tooltipContent = `${object.properties.name || 'GeoJSON Feature'}
`; - // Define a list of common KML properties to display - const kmlProperties = [ - 'description', - 'styleUrl', - 'color', - 'stroke', - 'stroke-width', - 'fill', - ]; - for (const key of kmlProperties) { - if (object.properties.hasOwnProperty(key) && - object.properties[key] !== undefined) { - tooltipContent += `${key}: ${object.properties[key]}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else if (tooltip) { - tooltip.style.display = 'none'; - } - }, - }); - const textLayer = new deck.TextLayer({ - id: 'text-layer', - data: geojsonLayer.props.data, // Use the same data as the GeoJsonLayer - getPosition: (d) => { - // Attempt to use a 'centroid' property if available, otherwise use the first coordinate - let position = [0, 0]; // Default position - if (d.properties.centroid) { - position = d.properties.centroid; - } - else if (d.geometry && - d.geometry.coordinates && - d.geometry.coordinates.length > 0) { - // Assuming Polygon or MultiPolygon - const coordinates = d.geometry.coordinates[0][0]; - if (coordinates && coordinates.length >= 2) { - position = [coordinates[0], coordinates[1]]; // [lng, lat] - } - } - return position; - }, - getText: (d) => d.properties.name || '', // Display the name property - getColor: [0, 0, 0, 255], // Black text color for better visibility - getSize: 16, // Increased text size - getAngle: 0, - getTextAnchor: 'middle', - getAlignmentBaseline: 'middle', - // Disable depth testing for text layer as well - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - layers: [geojsonLayer, textLayer], - // Disable depth testing to avoid rendering issues with the base map - parameters: { - depthTest: false, - }, - }); - googleMapsOverlay.setMap(map); -} -/** - * Converts a hex color string (#RRGGBB or #AABBGGRR) or an AABBGGRR string to an RGBA array. - * @param color The color string. - * @returns An RGBA array [R, G, B, A] or null if the format is invalid. - */ -function hexOrAabbggrrToRgba(color) { - if (color.startsWith('#')) { - color = color.slice(1); - } - if (color.length === 6) { - // #RRGGBB format - const r = parseInt(color.substring(0, 2), 16); - const g = parseInt(color.substring(2, 4), 16); - const b = parseInt(color.substring(4, 6), 16); - return [r, g, b, 255]; // Assume full opacity - } - else if (color.length === 8) { - // #AABBGGRR or AABBGGRR format (KML uses AABBGGRR) - const a = parseInt(color.substring(0, 2), 16); - const b = parseInt(color.substring(2, 4), 16); - const g = parseInt(color.substring(4, 6), 16); - const r = parseInt(color.substring(6, 8), 16); - return [r, g, b, a]; - } - return null; // Invalid format -} -initMap(); -/* [END maps_deckgl_kml] */ diff --git a/dist/samples/deckgl-polygon/app/.eslintsrc.json b/dist/samples/deckgl-polygon/app/.eslintsrc.json deleted file mode 100644 index 4c44dab04..000000000 --- a/dist/samples/deckgl-polygon/app/.eslintsrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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/deckgl-polygon/app/README.md b/dist/samples/deckgl-polygon/app/README.md deleted file mode 100644 index e1fbe33af..000000000 --- a/dist/samples/deckgl-polygon/app/README.md +++ /dev/null @@ -1,35 +0,0 @@ -# Google Maps JavaScript Sample - -## deckgl-polygon - -The deckgl-polygon sample demonstrates how to use deck.gl to render a polygon. - -Follow these instructions to set up and run deckgl-polygon sample on your local computer. - -## Setup - -### Before starting run: - -`$npm i` - -### Run an example on a local web server - -First `cd` to the folder for the sample to run, then: - -`$npm start` - -### Build an individual example - -From `samples/`: - -`$npm run build --workspace=deckgl-polygon/` - -### Build all of the examples. - -From `samples/`: -`$npm run build-all` - -## 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/deckgl-polygon/app/index.html b/dist/samples/deckgl-polygon/app/index.html deleted file mode 100644 index 4df60e7be..000000000 --- a/dist/samples/deckgl-polygon/app/index.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Population Density
- - - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-polygon/app/index.ts b/dist/samples/deckgl-polygon/app/index.ts
deleted file mode 100644
index ef90eec0b..000000000
--- a/dist/samples/deckgl-polygon/app/index.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_polygon] */
-// Initialize and add the map
-let map: google.maps.Map;
-let polygonLayer: deck.PolygonLayer; // Declare polygonLayer outside for button access
-let googleMapsOverlay: deck.GoogleMapsOverlay; // Declare googleMapsOverlay outside for button access
-
-// Declare global namespace for Deck.gl to satisfy TypeScript compiler
-declare namespace deck {
- class PolygonLayer {
- constructor(props: any);
- props: any;
- clone(props: any): PolygonLayer;
- pickable: boolean; // Added pickable property
- }
- class GoogleMapsOverlay {
- constructor(props: any);
- setMap(map: google.maps.Map | null): void;
- setProps(props: any): void;
- }
- // Add other Deck.gl types used globally if needed
-}
-
-async function initMap(): Promise0 - 2400
-
- 2401 - 4800
-
-
- 4801 - 7200
-
-
- 7201 - 9600
-
-
- 9601 - 12000
-
- 12001+
- `; - } - if (properties.population !== undefined) { - tooltipContent += `Population: ${properties.population}
`; - } - if (properties.area !== undefined) { - tooltipContent += `Area: ${properties.area}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else { - tooltip.style.display = 'none'; - } - } - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [polygonLayer], - }); - - googleMapsOverlay.setMap(map); - - // Button functionality - const toggleButton = document.getElementById('toggleButton'); - if (toggleButton) { - // Check if toggleButton is found - toggleButton.addEventListener('click', () => { - const currentVisible = polygonLayer.props.visible; - // Create a new layer instance with toggled visibility - const newPolygonLayer = polygonLayer.clone({ - visible: !currentVisible, - }); - // Update the overlay with the new layer instance - googleMapsOverlay.setProps({ - layers: [newPolygonLayer], - }); - // Update the polygonLayer variable to the new instance - polygonLayer = newPolygonLayer; - - toggleButton.textContent = !currentVisible - ? 'Hide Polygon Layer' - : 'Show Polygon Layer'; - }); - } -} - -initMap(); -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/deckgl-polygon/app/package.json b/dist/samples/deckgl-polygon/app/package.json deleted file mode 100644 index 23f304bd5..000000000 --- a/dist/samples/deckgl-polygon/app/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "@js-api-samples/deckgl-polygon", - "version": "1.0.0", - "scripts": { - "build": "tsc && bash ../jsfiddle.sh deckgl-polygon && bash ../app.sh deckgl-polygon && bash ../docs.sh deckgl-polygon && npm run build:vite --workspace=. && bash ../dist.sh deckgl-polygon", - "test": "tsc && npm run build:vite --workspace=.", - "start": "tsc && vite build --base './' && vite", - "build:vite": "vite build --base './'", - "preview": "vite preview" - }, - "dependencies": { - - } -} \ No newline at end of file diff --git a/dist/samples/deckgl-polygon/app/style.css b/dist/samples/deckgl-polygon/app/style.css deleted file mode 100644 index eb42db1e7..000000000 --- a/dist/samples/deckgl-polygon/app/style.css +++ /dev/null @@ -1,90 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_polygon] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -#toggleButton { - position: absolute; - top: 70px; /* Position towards the top of the map area */ - left: 50%; - transform: translateX(-50%); - z-index: 1000; /* Ensure it's above the map */ -} - -#tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the button and map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 126x; -} - -h1 { - text-align: center; - margin: 10px; -} - -#legend { - position: absolute; - bottom: 20px; /* Position from the bottom */ - right: 20px; /* Position from the right */ - z-index: 1000; /* Ensure it's above the map */ - background-color: rgba( - 255, - 255, - 255, - 0.9 - ); /* Semi-transparent white background */ - padding: 10px; - border-radius: 5px; - font-size: 14px; - line-height: 1.5; -} - -#legend h4 { - margin-top: 0; - margin-bottom: 5px; - text-align: center; -} - -#legend div { - display: flex; - align-items: center; -} - -#legend span { - display: inline-block; - width: 20px; - height: 15px; - margin-right: 5px; - border: 1px solid #000; /* Add a border to the color box */ -} -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/deckgl-polygon/app/tsconfig.json b/dist/samples/deckgl-polygon/app/tsconfig.json deleted file mode 100644 index 09179087c..000000000 --- a/dist/samples/deckgl-polygon/app/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "compilerOptions": { - "module": "esnext", - "target": "esnext", - "strict": true, - "noImplicitAny": false, - "lib": [ - "es2015", - "esnext", - "es6", - "dom", - "dom.iterable" - ], - "moduleResolution": "Node", - "jsx": "preserve" - } - } \ No newline at end of file diff --git a/dist/samples/deckgl-polygon/dist/assets/index-5xwL7FAt.css b/dist/samples/deckgl-polygon/dist/assets/index-5xwL7FAt.css deleted file mode 100644 index 8ebb99abe..000000000 --- a/dist/samples/deckgl-polygon/dist/assets/index-5xwL7FAt.css +++ /dev/null @@ -1 +0,0 @@ -#map{height:100%;flex-grow:1}html,body{height:100%;margin:0;padding:0;display:flex;flex-direction:column;position:relative;font-family:Roboto,Arial,sans-serif}#toggleButton{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:1000}#tooltip{position:absolute;z-index:1001;padding:10px;background:#000c;color:#fff;border-radius:4px;pointer-events:none;display:none;font-size:126x}h1{text-align:center;margin:10px}#legend{position:absolute;bottom:20px;right:20px;z-index:1000;background-color:#ffffffe6;padding:10px;border-radius:5px;font-size:14px;line-height:1.5}#legend h4{margin-top:0;margin-bottom:5px;text-align:center}#legend div{display:flex;align-items:center}#legend span{display:inline-block;width:20px;height:15px;margin-right:5px;border:1px solid #000} diff --git a/dist/samples/deckgl-polygon/dist/assets/index-CH2IZZu4.js b/dist/samples/deckgl-polygon/dist/assets/index-CH2IZZu4.js deleted file mode 100644 index 1e6c2ce4d..000000000 --- a/dist/samples/deckgl-polygon/dist/assets/index-CH2IZZu4.js +++ /dev/null @@ -1 +0,0 @@ -(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))a(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const t of o.addedNodes)t.tagName==="LINK"&&t.rel==="modulepreload"&&a(t)}).observe(document,{childList:!0,subtree:!0});function p(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerPolicy&&(o.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?o.credentials="include":e.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function a(e){if(e.ep)return;e.ep=!0;const o=p(e);fetch(e.href,o)}})();let g,l,u;async function y(){var r,n=document.querySelector(".mdc-linear-progress");n&&(r=new mdc.linearProgress.MDCLinearProgress(n),r.open(),r.determinate=!1,r.done=function(){r.close(),n?.remove()});const p={lat:37.752954624496304,lng:-122.44754059928648},{Map:a}=await google.maps.importLibrary("maps"),e=document.getElementById("map");if(!e){console.error("Map element not found!");return}g=new a(e,{zoom:12,center:p,tilt:90,heading:-25,mapId:"c306b3c6dd3ed8d9",streetViewControl:!1}),l=new deck.PolygonLayer({id:"PolygonLayer",data:"https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json",getPolygon:t=>t.contour,getElevation:t=>t.population/t.area/10,getFillColor:t=>[t.population/t.area/60,140,0],getLineColor:[255,255,255],getLineWidth:20,lineWidthMinPixels:1,visible:!0,opacity:.7,pickable:!0,onDataLoad:()=>{r&&setTimeout(()=>{r.done()},100)},onHover:({object:t,x:c,y:f})=>{const s=document.getElementById("tooltip");if(s)if(t){let d="";const i=t;i&&(i.zipcode!==void 0&&(d+=`Zipcode: ${i.zipcode}
`),i.population!==void 0&&(d+=`Population: ${i.population}
`),i.area!==void 0&&(d+=`Area: ${i.area}
`)),s.innerHTML=d,s.style.left=c+"px",s.style.top=f+"px",s.style.display="block"}else s.style.display="none"}}),u=new deck.GoogleMapsOverlay({layers:[l]}),u.setMap(g);const o=document.getElementById("toggleButton");o&&o.addEventListener("click",()=>{const t=l.props.visible,c=l.clone({visible:!t});u.setProps({layers:[c]}),l=c,o.textContent=t?"Show Polygon Layer":"Hide Polygon Layer"})}y(); diff --git a/dist/samples/deckgl-polygon/dist/index.html b/dist/samples/deckgl-polygon/dist/index.html deleted file mode 100644 index add02d136..000000000 --- a/dist/samples/deckgl-polygon/dist/index.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Population Density
- - - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-polygon/docs/index.html b/dist/samples/deckgl-polygon/docs/index.html
deleted file mode 100644
index 4df60e7be..000000000
--- a/dist/samples/deckgl-polygon/docs/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
-
-
-
-
-
- 0 - 2400
-
- 2401 - 4800
-
-
- 4801 - 7200
-
-
- 7201 - 9600
-
-
- 9601 - 12000
-
- 12001+
-
-
-
-
-
-
-
-
-
-
- Population Density
- - - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-polygon/docs/index.js b/dist/samples/deckgl-polygon/docs/index.js
deleted file mode 100644
index ed28ef43f..000000000
--- a/dist/samples/deckgl-polygon/docs/index.js
+++ /dev/null
@@ -1,128 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_polygon] */
-// Initialize and add the map
-let map;
-let polygonLayer; // Declare polygonLayer outside for button access
-let googleMapsOverlay; // Declare googleMapsOverlay outside for button access
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center.
- const position = { lat: 37.752954624496304, lng: -122.44754059928648 }; // Using the center from original deckgl-polygon.js
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 12, // Using the zoom from original deckgl-polygon.js
- center: position,
- tilt: 90, // Add tilt
- heading: -25, // Add heading
- mapId: 'c306b3c6dd3ed8d9', // Using the mapId from original deckgl-polygon.js
- streetViewControl: false,
- // clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- polygonLayer = new deck.PolygonLayer({
- // Assign to the outer polygonLayer
- id: 'PolygonLayer',
- data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json',
- getPolygon: (d) => d.contour, // Use 'any' for simplicity
- getElevation: (d) => d.population / d.area / 10, // Use 'any' for simplicity
- getFillColor: (d) => [d.population / d.area / 60, 140, 0], // Use 'any' for simplicity
- getLineColor: [255, 255, 255],
- getLineWidth: 20,
- lineWidthMinPixels: 1,
- visible: true,
- opacity: 0.7, // Added opacity
- pickable: true,
- onDataLoad: () => {
- if (progress) {
- // Check if progress is defined
- // Add a small delay to ensure the progress bar is removed
- setTimeout(() => {
- // @ts-ignore
- progress.done(); // hides progress bar
- }, 100); // 100ms delay
- }
- },
- onHover: ({ object, x, y }) => {
- // Use 'any' for object for simplicity
- const tooltip = document.getElementById('tooltip');
- if (tooltip) {
- if (object) {
- // Format data for tooltip (example: display specific properties)
- let tooltipContent = ''; // Updated title
- const properties = object; // Correctly access the properties object
- if (properties) {
- if (properties.zipcode !== undefined) {
- tooltipContent += `Zipcode: ${properties.zipcode}0 - 2400
-
- 2401 - 4800
-
-
- 4801 - 7200
-
-
- 7201 - 9600
-
-
- 9601 - 12000
-
- 12001+
- `; - } - if (properties.population !== undefined) { - tooltipContent += `Population: ${properties.population}
`; - } - if (properties.area !== undefined) { - tooltipContent += `Area: ${properties.area}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else { - tooltip.style.display = 'none'; - } - } - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [polygonLayer], - }); - googleMapsOverlay.setMap(map); - // Button functionality - const toggleButton = document.getElementById('toggleButton'); - if (toggleButton) { - // Check if toggleButton is found - toggleButton.addEventListener('click', () => { - const currentVisible = polygonLayer.props.visible; - // Create a new layer instance with toggled visibility - const newPolygonLayer = polygonLayer.clone({ - visible: !currentVisible, - }); - // Update the overlay with the new layer instance - googleMapsOverlay.setProps({ - layers: [newPolygonLayer], - }); - // Update the polygonLayer variable to the new instance - polygonLayer = newPolygonLayer; - toggleButton.textContent = !currentVisible - ? 'Hide Polygon Layer' - : 'Show Polygon Layer'; - }); - } -} -initMap(); -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/deckgl-polygon/docs/index.ts b/dist/samples/deckgl-polygon/docs/index.ts deleted file mode 100644 index ef90eec0b..000000000 --- a/dist/samples/deckgl-polygon/docs/index.ts +++ /dev/null @@ -1,159 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_polygon] */ -// Initialize and add the map -let map: google.maps.Map; -let polygonLayer: deck.PolygonLayer; // Declare polygonLayer outside for button access -let googleMapsOverlay: deck.GoogleMapsOverlay; // Declare googleMapsOverlay outside for button access - -// Declare global namespace for Deck.gl to satisfy TypeScript compiler -declare namespace deck { - class PolygonLayer { - constructor(props: any); - props: any; - clone(props: any): PolygonLayer; - pickable: boolean; // Added pickable property - } - class GoogleMapsOverlay { - constructor(props: any); - setMap(map: google.maps.Map | null): void; - setProps(props: any): void; - } - // Add other Deck.gl types used globally if needed -} - -async function initMap(): Promise
`; - } - if (properties.population !== undefined) { - tooltipContent += `Population: ${properties.population}
`; - } - if (properties.area !== undefined) { - tooltipContent += `Area: ${properties.area}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } else { - tooltip.style.display = 'none'; - } - } - }, - }); - - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [polygonLayer], - }); - - googleMapsOverlay.setMap(map); - - // Button functionality - const toggleButton = document.getElementById('toggleButton'); - if (toggleButton) { - // Check if toggleButton is found - toggleButton.addEventListener('click', () => { - const currentVisible = polygonLayer.props.visible; - // Create a new layer instance with toggled visibility - const newPolygonLayer = polygonLayer.clone({ - visible: !currentVisible, - }); - // Update the overlay with the new layer instance - googleMapsOverlay.setProps({ - layers: [newPolygonLayer], - }); - // Update the polygonLayer variable to the new instance - polygonLayer = newPolygonLayer; - - toggleButton.textContent = !currentVisible - ? 'Hide Polygon Layer' - : 'Show Polygon Layer'; - }); - } -} - -initMap(); -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/deckgl-polygon/docs/style.css b/dist/samples/deckgl-polygon/docs/style.css deleted file mode 100644 index eb42db1e7..000000000 --- a/dist/samples/deckgl-polygon/docs/style.css +++ /dev/null @@ -1,90 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -/* [START maps_deckgl_polygon] */ -/* - * Always set the map height explicitly to define the size of the div element - * that contains the map. - */ -#map { - height: 100%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -#toggleButton { - position: absolute; - top: 70px; /* Position towards the top of the map area */ - left: 50%; - transform: translateX(-50%); - z-index: 1000; /* Ensure it's above the map */ -} - -#tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the button and map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 126x; -} - -h1 { - text-align: center; - margin: 10px; -} - -#legend { - position: absolute; - bottom: 20px; /* Position from the bottom */ - right: 20px; /* Position from the right */ - z-index: 1000; /* Ensure it's above the map */ - background-color: rgba( - 255, - 255, - 255, - 0.9 - ); /* Semi-transparent white background */ - padding: 10px; - border-radius: 5px; - font-size: 14px; - line-height: 1.5; -} - -#legend h4 { - margin-top: 0; - margin-bottom: 5px; - text-align: center; -} - -#legend div { - display: flex; - align-items: center; -} - -#legend span { - display: inline-block; - width: 20px; - height: 15px; - margin-right: 5px; - border: 1px solid #000; /* Add a border to the color box */ -} -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/deckgl-polygon/jsfiddle/demo.css b/dist/samples/deckgl-polygon/jsfiddle/demo.css deleted file mode 100644 index c598b350c..000000000 --- a/dist/samples/deckgl-polygon/jsfiddle/demo.css +++ /dev/null @@ -1,90 +0,0 @@ -/* - * @license - * Copyright 2025 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%; - flex-grow: 1; /* Make map take up remaining space */ -} - -/* - * Optional: Makes the sample page fill the window. - */ -html, -body { - height: 100%; - margin: 0; - padding: 0; - display: flex; /* Use flexbox for layout */ - flex-direction: column; /* Stack children vertically */ - position: relative; /* Set body as positioning context */ - font-family: 'Roboto', Arial, sans-serif; /* Set font family */ -} - -#toggleButton { - position: absolute; - top: 70px; /* Position towards the top of the map area */ - left: 50%; - transform: translateX(-50%); - z-index: 1000; /* Ensure it's above the map */ -} - -#tooltip { - position: absolute; - z-index: 1001; /* Ensure it's above the button and map */ - padding: 10px; - background: rgba(0, 0, 0, 0.8); - color: #fff; - border-radius: 4px; - pointer-events: none; /* Allows interaction with elements behind the tooltip */ - display: none; /* Hidden by default */ - font-size: 126x; -} - -h1 { - text-align: center; - margin: 10px; -} - -#legend { - position: absolute; - bottom: 20px; /* Position from the bottom */ - right: 20px; /* Position from the right */ - z-index: 1000; /* Ensure it's above the map */ - background-color: rgba( - 255, - 255, - 255, - 0.9 - ); /* Semi-transparent white background */ - padding: 10px; - border-radius: 5px; - font-size: 14px; - line-height: 1.5; -} - -#legend h4 { - margin-top: 0; - margin-bottom: 5px; - text-align: center; -} - -#legend div { - display: flex; - align-items: center; -} - -#legend span { - display: inline-block; - width: 20px; - height: 15px; - margin-right: 5px; - border: 1px solid #000; /* Add a border to the color box */ -} - diff --git a/dist/samples/deckgl-polygon/jsfiddle/demo.details b/dist/samples/deckgl-polygon/jsfiddle/demo.details deleted file mode 100644 index fb0607fe9..000000000 --- a/dist/samples/deckgl-polygon/jsfiddle/demo.details +++ /dev/null @@ -1,7 +0,0 @@ -name: deckgl-polygon -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/deckgl-polygon/jsfiddle/demo.html b/dist/samples/deckgl-polygon/jsfiddle/demo.html deleted file mode 100644 index 597d62407..000000000 --- a/dist/samples/deckgl-polygon/jsfiddle/demo.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
- Population Density
- - - - -
-
-
-
-
-
-
-
-
diff --git a/dist/samples/deckgl-polygon/jsfiddle/demo.js b/dist/samples/deckgl-polygon/jsfiddle/demo.js
deleted file mode 100644
index ed28ef43f..000000000
--- a/dist/samples/deckgl-polygon/jsfiddle/demo.js
+++ /dev/null
@@ -1,128 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_deckgl_polygon] */
-// Initialize and add the map
-let map;
-let polygonLayer; // Declare polygonLayer outside for button access
-let googleMapsOverlay; // Declare googleMapsOverlay outside for button access
-async function initMap() {
- // Progress bar logic moved from index.html
- var progress, progressDiv = document.querySelector('.mdc-linear-progress');
- if (progressDiv) {
- // Assuming 'mdc' is globally available, potentially loaded via a script tag
- // If not, you might need to import it or add type definitions.
- // @ts-ignore
- progress = new mdc.linearProgress.MDCLinearProgress(progressDiv);
- progress.open();
- progress.determinate = false;
- progress.done = function () {
- progress.close();
- progressDiv?.remove(); // Use optional chaining in case progressDiv is null
- };
- }
- // The location for the map center.
- const position = { lat: 37.752954624496304, lng: -122.44754059928648 }; // Using the center from original deckgl-polygon.js
- // Request needed libraries.
- const { Map } = (await google.maps.importLibrary('maps'));
- const mapDiv = document.getElementById('map');
- if (!mapDiv) {
- console.error('Map element not found!');
- return;
- }
- // The map, centered at the specified position
- map = new Map(mapDiv, {
- zoom: 12, // Using the zoom from original deckgl-polygon.js
- center: position,
- tilt: 90, // Add tilt
- heading: -25, // Add heading
- mapId: 'c306b3c6dd3ed8d9', // Using the mapId from original deckgl-polygon.js
- streetViewControl: false,
- // clickableIcons: false, // Disable clicks on base map POIs
- });
- // Deck.gl Layer and Overlay
- polygonLayer = new deck.PolygonLayer({
- // Assign to the outer polygonLayer
- id: 'PolygonLayer',
- data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json',
- getPolygon: (d) => d.contour, // Use 'any' for simplicity
- getElevation: (d) => d.population / d.area / 10, // Use 'any' for simplicity
- getFillColor: (d) => [d.population / d.area / 60, 140, 0], // Use 'any' for simplicity
- getLineColor: [255, 255, 255],
- getLineWidth: 20,
- lineWidthMinPixels: 1,
- visible: true,
- opacity: 0.7, // Added opacity
- pickable: true,
- onDataLoad: () => {
- if (progress) {
- // Check if progress is defined
- // Add a small delay to ensure the progress bar is removed
- setTimeout(() => {
- // @ts-ignore
- progress.done(); // hides progress bar
- }, 100); // 100ms delay
- }
- },
- onHover: ({ object, x, y }) => {
- // Use 'any' for object for simplicity
- const tooltip = document.getElementById('tooltip');
- if (tooltip) {
- if (object) {
- // Format data for tooltip (example: display specific properties)
- let tooltipContent = ''; // Updated title
- const properties = object; // Correctly access the properties object
- if (properties) {
- if (properties.zipcode !== undefined) {
- tooltipContent += `Zipcode: ${properties.zipcode}0 - 2400
-
- 2401 - 4800
-
-
- 4801 - 7200
-
-
- 7201 - 9600
-
-
- 9601 - 12000
-
- 12001+
- `; - } - if (properties.population !== undefined) { - tooltipContent += `Population: ${properties.population}
`; - } - if (properties.area !== undefined) { - tooltipContent += `Area: ${properties.area}
`; - } - } - tooltip.innerHTML = tooltipContent; - tooltip.style.left = x + 'px'; - tooltip.style.top = y + 'px'; - tooltip.style.display = 'block'; - } - else { - tooltip.style.display = 'none'; - } - } - }, - }); - googleMapsOverlay = new deck.GoogleMapsOverlay({ - // Assign to the outer googleMapsOverlay - layers: [polygonLayer], - }); - googleMapsOverlay.setMap(map); - // Button functionality - const toggleButton = document.getElementById('toggleButton'); - if (toggleButton) { - // Check if toggleButton is found - toggleButton.addEventListener('click', () => { - const currentVisible = polygonLayer.props.visible; - // Create a new layer instance with toggled visibility - const newPolygonLayer = polygonLayer.clone({ - visible: !currentVisible, - }); - // Update the overlay with the new layer instance - googleMapsOverlay.setProps({ - layers: [newPolygonLayer], - }); - // Update the polygonLayer variable to the new instance - polygonLayer = newPolygonLayer; - toggleButton.textContent = !currentVisible - ? 'Hide Polygon Layer' - : 'Show Polygon Layer'; - }); - } -} -initMap(); -/* [END maps_deckgl_polygon] */ diff --git a/dist/samples/geocoding-reverse/app/.eslintsrc.json b/dist/samples/geocoding-reverse/app/.eslintsrc.json deleted file mode 100644 index 4c44dab04..000000000 --- a/dist/samples/geocoding-reverse/app/.eslintsrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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/geocoding-reverse/app/README.md b/dist/samples/geocoding-reverse/app/README.md deleted file mode 100644 index 0322715e0..000000000 --- a/dist/samples/geocoding-reverse/app/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# Google Maps JavaScript Sample - -## geocoding-reverse - -The geocoding-reverse sample demonstrates reverse geocoding coordinates to addresses. - -## Setup - -### Before starting run: - -`npm i` - -### Run an example on a local web server - -`cd samples/geocoding-reverse` -`npm start` - -### Build an individual example - -`cd samples/geocoding-reverse` -`npm run build` - -From 'samples': - -`npm run build --workspace=geocoding-reverse/` - -### Build all of the examples. - -From 'samples': - -`npm run build-all` - -### Run lint to check for problems - -`cd samples/geocoding-reverse` -`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/geocoding-reverse/app/index.html b/dist/samples/geocoding-reverse/app/index.html deleted file mode 100644 index 07f6b9aac..000000000 --- a/dist/samples/geocoding-reverse/app/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - -
-
- -
- - Click the map to reverse geocode, or add your own - coordinates. -
-- -
-
- -
- - Click the map to reverse geocode, or add your own - coordinates. -
-- -
-
- -
- - Click the map to reverse geocode, or add your own - coordinates. -
-- -
-
- -
- - Click the map to reverse geocode, or add your own - coordinates. -
-- -
-
-
- - -
-
- - - -
-
-
-
-
-
- - -
-
- - - -
-
-
-
-
-
- - -
-
- - - -
-
-
-
-
-
- - -
-
- - - -
-
-
- @googlemaps/js-api-loader map
- - - - \ No newline at end of file diff --git a/dist/samples/js-api-loader-map/docs/index.html b/dist/samples/js-api-loader-map/docs/index.html deleted file mode 100644 index d6b779c16..000000000 --- a/dist/samples/js-api-loader-map/docs/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - -@googlemaps/js-api-loader map
- - - - \ No newline at end of file diff --git a/dist/samples/js-api-loader-map/docs/index.js b/dist/samples/js-api-loader-map/docs/index.js deleted file mode 100644 index 325272f88..000000000 --- a/dist/samples/js-api-loader-map/docs/index.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2026 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -// [START maps_js_api_loader_map] -// [START maps_js_api_loader_map_load] -// Import the needed libraries. -import { setOptions, importLibrary } from '@googlemaps/js-api-loader'; -// [END maps_js_api_loader_map_load] -const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8'; -async function initMap() { - // [START maps_js_api_loader_map_options] - // Set loader options. - setOptions({ - key: API_KEY, - v: 'weekly', - }); - // [END maps_js_api_loader_map_options] - // Load the Maps library. - const { Map } = (await importLibrary('maps')); - // Set map options. - const mapOptions = { - center: { lat: 48.8566, lng: 2.3522 }, - zoom: 3, - }; - // Declare the map. - const map = new Map(document.getElementById('map'), mapOptions); -} -initMap(); -// [END maps_js_api_loader_map] diff --git a/dist/samples/js-api-loader-map/docs/index.ts b/dist/samples/js-api-loader-map/docs/index.ts deleted file mode 100644 index 1fa6e6065..000000000 --- a/dist/samples/js-api-loader-map/docs/index.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * @license - * Copyright 2026 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ - -// [START maps_js_api_loader_map] -// [START maps_js_api_loader_map_load] -// Import the needed libraries. -import { setOptions, importLibrary } from '@googlemaps/js-api-loader'; -// [END maps_js_api_loader_map_load] - -const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8'; - -async function initMap(): Promise@googlemaps/js-api-loader map
- - - diff --git a/dist/samples/js-api-loader-map/jsfiddle/demo.js b/dist/samples/js-api-loader-map/jsfiddle/demo.js deleted file mode 100644 index 4ed800ccd..000000000 --- a/dist/samples/js-api-loader-map/jsfiddle/demo.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright 2026 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ - - -// Import the needed libraries. -import { setOptions, importLibrary } from '@googlemaps/js-api-loader'; - -const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8'; -async function initMap() { - - // Set loader options. - setOptions({ - key: API_KEY, - v: 'weekly', - }); - - // Load the Maps library. - const { Map } = (await importLibrary('maps')); - // Set map options. - const mapOptions = { - center: { lat: 48.8566, lng: 2.3522 }, - zoom: 3, - }; - // Declare the map. - const map = new Map(document.getElementById('map'), mapOptions); -} -initMap(); - diff --git a/dist/samples/layer-data-event/app/.eslintsrc.json b/dist/samples/layer-data-event/app/.eslintsrc.json deleted file mode 100644 index 4c44dab04..000000000 --- a/dist/samples/layer-data-event/app/.eslintsrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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/layer-data-event/app/README.md b/dist/samples/layer-data-event/app/README.md deleted file mode 100644 index 010d7ef38..000000000 --- a/dist/samples/layer-data-event/app/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# Google Maps JavaScript Sample - -## layer-data-event - -This example uses a data layer to dynamically display information about a KML feature object when under the mouse cursor. - -## Setup - -### Before starting run: - -`npm i` - -### Run an example on a local web server - -`cd samples/layer-data-event` -`npm start` - -### Build an individual example - -`cd samples/layer-data-event` -`npm run build` - -From 'samples': - -`npm run build --workspace=layer-data-event/` - -### Build all of the examples. - -From 'samples': - -`npm run build-all` - -### Run lint to check for problems - -`cd samples/layer-data-event` -`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/layer-data-event/app/index.html b/dist/samples/layer-data-event/app/index.html deleted file mode 100644 index 2e33ab838..000000000 --- a/dist/samples/layer-data-event/app/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - -?
-
-
-
diff --git a/dist/samples/layer-data-event/app/index.ts b/dist/samples/layer-data-event/app/index.ts
deleted file mode 100644
index b94b58352..000000000
--- a/dist/samples/layer-data-event/app/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_layer_data_event]
-let map: google.maps.Map;
-
-async function initMap() {
- (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
-
- const mapElement = document.querySelector(
- 'gmp-map'
- ) as google.maps.MapElement;
-
- const innerMap = mapElement.innerMap;
-
- // Load GeoJSON.
- innerMap.data.loadGeoJson('google.json');
-
- // Add some style.
- innerMap.data.setStyle((feature) => {
- return /** @type {google.maps.Data.StyleOptions} */ {
- fillColor: feature.getProperty('color') as string,
- strokeWeight: 1,
- };
- });
-
- // [START maps_layer_data_event_snippet]
- // Set mouseover event for each feature.
- innerMap.data.addListener('mouseover', (event) => {
- (document.getElementById('info-box') as HTMLElement).textContent =
- event.feature.getProperty('letter');
- });
- // [END maps_layer_data_event_snippet]
-}
-
-initMap();
-// [END maps_layer_data_event]
diff --git a/dist/samples/layer-data-event/app/package.json b/dist/samples/layer-data-event/app/package.json
deleted file mode 100644
index b0848a4e6..000000000
--- a/dist/samples/layer-data-event/app/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "@js-api-samples/layer-data-event",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh layer-data-event && bash ../app.sh layer-data-event && bash ../docs.sh layer-data-event && npm run build:vite --workspace=. && bash ../dist.sh layer-data-event",
- "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/layer-data-event/app/style.css b/dist/samples/layer-data-event/app/style.css
deleted file mode 100644
index 31e8ebf7a..000000000
--- a/dist/samples/layer-data-event/app/style.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_layer_data_event] */
-/*
- * 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;
-}
-
-#info-box {
- background-color: white;
- border: 1px solid black;
- bottom: 30px;
- height: 20px;
- padding: 10px;
- position: absolute;
- left: 30px;
-}
-
-/* [END maps_layer_data_event] */
diff --git a/dist/samples/layer-data-event/app/tsconfig.json b/dist/samples/layer-data-event/app/tsconfig.json
deleted file mode 100644
index 366aabb04..000000000
--- a/dist/samples/layer-data-event/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "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/layer-data-event/dist/assets/index-DgLY1QQm.js b/dist/samples/layer-data-event/dist/assets/index-DgLY1QQm.js
deleted file mode 100644
index 0c7eced0d..000000000
--- a/dist/samples/layer-data-event/dist/assets/index-DgLY1QQm.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const n of t.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).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 i(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();async function c(){await google.maps.importLibrary("maps");const r=document.querySelector("gmp-map").innerMap;r.data.loadGeoJson("google.json"),r.data.setStyle(o=>({fillColor:o.getProperty("color"),strokeWeight:1})),r.data.addListener("mouseover",o=>{document.getElementById("info-box").textContent=o.feature.getProperty("letter")})}c();
diff --git a/dist/samples/layer-data-event/dist/assets/index-YlmaOF6z.css b/dist/samples/layer-data-event/dist/assets/index-YlmaOF6z.css
deleted file mode 100644
index f8c7f8ef7..000000000
--- a/dist/samples/layer-data-event/dist/assets/index-YlmaOF6z.css
+++ /dev/null
@@ -1 +0,0 @@
-#map{height:100%}html,body{height:100%;margin:0;padding:0}#info-box{background-color:#fff;border:1px solid black;bottom:30px;height:20px;padding:10px;position:absolute;left:30px}
diff --git a/dist/samples/layer-data-event/dist/google.json b/dist/samples/layer-data-event/dist/google.json
deleted file mode 100644
index be2f35f78..000000000
--- a/dist/samples/layer-data-event/dist/google.json
+++ /dev/null
@@ -1,146 +0,0 @@
-{
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "properties": {
- "letter": "G",
- "color": "blue",
- "rank": "7",
- "ascii": "71"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
- [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
- [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
- [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
- [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
- [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
- [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
- [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "o",
- "color": "red",
- "rank": "15",
- "ascii": "111"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
- [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
- [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
- [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
- ],
- [
- [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
- [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "o",
- "color": "yellow",
- "rank": "15",
- "ascii": "111"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
- [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
- [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
- [132.71, -25.64], [131.87, -25.76]
- ],
- [
- [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
- [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "g",
- "color": "blue",
- "rank": "7",
- "ascii": "103"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
- [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
- [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
- [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
- [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
- [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
- [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
- ],
- [
- [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
- [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "l",
- "color": "green",
- "rank": "12",
- "ascii": "108"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "e",
- "color": "red",
- "rank": "5",
- "ascii": "101"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
- [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
- [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
- [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
- [144.31, -28.26], [144.14, -27.41]
- ],
- [
- [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
- [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
- ]
- ]
- }
- }
- ]
-}
\ No newline at end of file
diff --git a/dist/samples/layer-data-event/dist/index.html b/dist/samples/layer-data-event/dist/index.html
deleted file mode 100644
index 38d36b58b..000000000
--- a/dist/samples/layer-data-event/dist/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
- ?
-
-
-
diff --git a/dist/samples/layer-data-event/docs/google.json b/dist/samples/layer-data-event/docs/google.json
deleted file mode 100644
index be2f35f78..000000000
--- a/dist/samples/layer-data-event/docs/google.json
+++ /dev/null
@@ -1,146 +0,0 @@
-{
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "properties": {
- "letter": "G",
- "color": "blue",
- "rank": "7",
- "ascii": "71"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
- [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
- [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
- [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
- [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
- [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
- [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
- [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "o",
- "color": "red",
- "rank": "15",
- "ascii": "111"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
- [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
- [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
- [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
- ],
- [
- [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
- [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "o",
- "color": "yellow",
- "rank": "15",
- "ascii": "111"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
- [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
- [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
- [132.71, -25.64], [131.87, -25.76]
- ],
- [
- [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
- [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "g",
- "color": "blue",
- "rank": "7",
- "ascii": "103"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
- [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
- [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
- [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
- [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
- [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
- [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
- ],
- [
- [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
- [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "l",
- "color": "green",
- "rank": "12",
- "ascii": "108"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
- ]
- ]
- }
- },
- {
- "type": "Feature",
- "properties": {
- "letter": "e",
- "color": "red",
- "rank": "5",
- "ascii": "101"
- },
- "geometry": {
- "type": "Polygon",
- "coordinates": [
- [
- [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
- [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
- [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
- [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
- [144.31, -28.26], [144.14, -27.41]
- ],
- [
- [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
- [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
- ]
- ]
- }
- }
- ]
-}
\ No newline at end of file
diff --git a/dist/samples/layer-data-event/docs/index.html b/dist/samples/layer-data-event/docs/index.html
deleted file mode 100644
index 2e33ab838..000000000
--- a/dist/samples/layer-data-event/docs/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
- ?
-
-
-
diff --git a/dist/samples/layer-data-event/docs/index.js b/dist/samples/layer-data-event/docs/index.js
deleted file mode 100644
index b920764c4..000000000
--- a/dist/samples/layer-data-event/docs/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_layer_data_event]
-let map;
-async function initMap() {
- (await google.maps.importLibrary('maps'));
- const mapElement = document.querySelector('gmp-map');
- const innerMap = mapElement.innerMap;
- // Load GeoJSON.
- innerMap.data.loadGeoJson('google.json');
- // Add some style.
- innerMap.data.setStyle((feature) => {
- return /** @type {google.maps.Data.StyleOptions} */ {
- fillColor: feature.getProperty('color'),
- strokeWeight: 1,
- };
- });
- // [START maps_layer_data_event_snippet]
- // Set mouseover event for each feature.
- innerMap.data.addListener('mouseover', (event) => {
- document.getElementById('info-box').textContent =
- event.feature.getProperty('letter');
- });
- // [END maps_layer_data_event_snippet]
-}
-initMap();
-// [END maps_layer_data_event]
diff --git a/dist/samples/layer-data-event/docs/index.ts b/dist/samples/layer-data-event/docs/index.ts
deleted file mode 100644
index b94b58352..000000000
--- a/dist/samples/layer-data-event/docs/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_layer_data_event]
-let map: google.maps.Map;
-
-async function initMap() {
- (await google.maps.importLibrary('maps')) as google.maps.MapsLibrary;
-
- const mapElement = document.querySelector(
- 'gmp-map'
- ) as google.maps.MapElement;
-
- const innerMap = mapElement.innerMap;
-
- // Load GeoJSON.
- innerMap.data.loadGeoJson('google.json');
-
- // Add some style.
- innerMap.data.setStyle((feature) => {
- return /** @type {google.maps.Data.StyleOptions} */ {
- fillColor: feature.getProperty('color') as string,
- strokeWeight: 1,
- };
- });
-
- // [START maps_layer_data_event_snippet]
- // Set mouseover event for each feature.
- innerMap.data.addListener('mouseover', (event) => {
- (document.getElementById('info-box') as HTMLElement).textContent =
- event.feature.getProperty('letter');
- });
- // [END maps_layer_data_event_snippet]
-}
-
-initMap();
-// [END maps_layer_data_event]
diff --git a/dist/samples/layer-data-event/docs/style.css b/dist/samples/layer-data-event/docs/style.css
deleted file mode 100644
index 31e8ebf7a..000000000
--- a/dist/samples/layer-data-event/docs/style.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_layer_data_event] */
-/*
- * 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;
-}
-
-#info-box {
- background-color: white;
- border: 1px solid black;
- bottom: 30px;
- height: 20px;
- padding: 10px;
- position: absolute;
- left: 30px;
-}
-
-/* [END maps_layer_data_event] */
diff --git a/dist/samples/layer-data-event/jsfiddle/demo.css b/dist/samples/layer-data-event/jsfiddle/demo.css
deleted file mode 100644
index 99621c3ea..000000000
--- a/dist/samples/layer-data-event/jsfiddle/demo.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- * Copyright 2026 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;
-}
-
-#info-box {
- background-color: white;
- border: 1px solid black;
- bottom: 30px;
- height: 20px;
- padding: 10px;
- position: absolute;
- left: 30px;
-}
-
-
diff --git a/dist/samples/layer-data-event/jsfiddle/demo.details b/dist/samples/layer-data-event/jsfiddle/demo.details
deleted file mode 100644
index bb390eafa..000000000
--- a/dist/samples/layer-data-event/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: layer-data-event
-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/layer-data-event/jsfiddle/demo.html b/dist/samples/layer-data-event/jsfiddle/demo.html
deleted file mode 100644
index f990f238b..000000000
--- a/dist/samples/layer-data-event/jsfiddle/demo.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
- ?
-
-
-
diff --git a/dist/samples/layer-data-event/jsfiddle/demo.js b/dist/samples/layer-data-event/jsfiddle/demo.js
deleted file mode 100644
index 15f2db577..000000000
--- a/dist/samples/layer-data-event/jsfiddle/demo.js
+++ /dev/null
@@ -1,31 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-let map;
-async function initMap() {
- (await google.maps.importLibrary('maps'));
- const mapElement = document.querySelector('gmp-map');
- const innerMap = mapElement.innerMap;
- // Load GeoJSON.
- innerMap.data.loadGeoJson('google.json');
- // Add some style.
- innerMap.data.setStyle((feature) => {
- return /** @type {google.maps.Data.StyleOptions} */ {
- fillColor: feature.getProperty('color'),
- strokeWeight: 1,
- };
- });
-
- // Set mouseover event for each feature.
- innerMap.data.addListener('mouseover', (event) => {
- document.getElementById('info-box').textContent =
- event.feature.getProperty('letter');
- });
-
-}
-initMap();
-
diff --git a/dist/samples/layer-data-quakes-red/app/.eslintsrc.json b/dist/samples/layer-data-quakes-red/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/layer-data-quakes-red/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/layer-data-quakes-red/app/README.md b/dist/samples/layer-data-quakes-red/app/README.md
deleted file mode 100644
index befd18f7b..000000000
--- a/dist/samples/layer-data-quakes-red/app/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Google Maps JavaScript Sample
-
-## layer-data-quakes-red
-
-The layer-data-quakes-red sample demonstrates how to visualize earthquake data on a map, with red markers.
-
-Follow these instructions to set up and run layer-data-quakes-red sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-`cd samples/layer-data-quakes-red`
-`npm start`
-
-### Build an individual example
-
-`cd samples/layer-data-quakes-red`
-`npm run build`
-
-From 'samples':
-
-`npm run build --workspace=layer-data-quakes-red/`
-
-### Build all of the examples.
-
-From 'samples':
-
-`npm run build-all`
-
-### Run lint to check for problems
-
-`cd samples/layer-data-quakes-red`
-`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/layer-data-quakes-red/app/index.html b/dist/samples/layer-data-quakes-red/app/index.html
deleted file mode 100644
index 980bed181..000000000
--- a/dist/samples/layer-data-quakes-red/app/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/map-drawing-terradraw/app/index.ts b/dist/samples/map-drawing-terradraw/app/index.ts
deleted file mode 100644
index 51c00895f..000000000
--- a/dist/samples/map-drawing-terradraw/app/index.ts
+++ /dev/null
@@ -1,509 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_map_drawing_terradraw]
-// [START maps_map_drawing_terradraw_libraries]
-import { Loader } from '@googlemaps/js-api-loader';
-
-import {
- TerraDraw,
- TerraDrawSelectMode,
- TerraDrawPointMode,
- TerraDrawLineStringMode,
- TerraDrawPolygonMode,
- TerraDrawRectangleMode,
- TerraDrawCircleMode,
- TerraDrawFreehandMode
-} from 'terra-draw';
-import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
-
-// [END maps_map_drawing_terradraw_libraries]
-
-const colorPalette = [
- "#E74C3C",
- "#FF0066",
- "#9B59B6",
- "#673AB7",
- "#3F51B5",
- "#3498DB",
- "#03A9F4",
- "#00BCD4",
- "#009688",
- "#27AE60",
- "#8BC34A",
- "#CDDC39",
- "#F1C40F",
- "#FFC107",
- "#F39C12",
- "#FF5722",
- "#795548"
-];
-
-const getRandomColor = () => colorPalette[Math.floor(Math.random() * colorPalette.length)] as `#${string}`;
-
-function processSnapshotForUndo(snapshot: any[]): any[] {
- // console.log("Processing snapshot for undo:", snapshot);
- return snapshot.map(feature => {
- const newFeature = JSON.parse(JSON.stringify(feature));
-
- if (newFeature.properties.mode === 'rectangle') {
- // console.log("Processing rectangle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- newFeature.properties.mode = 'polygon';
- } else if (newFeature.properties.mode === 'circle') {
- // console.log("Processing circle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- // The radius is already in properties, so we just need to ensure the mode is correct for re-creation
- newFeature.properties.mode = 'circle';
- }
- return newFeature;
- });
-}
-
-function setupModeButtons(): void {
- const modeUI = document.getElementById('mode-ui');
- if (!modeUI) {
- return;
- }
-
- const modeButtons: { [key: string]: string } = {
- 'select-mode': 'select',
- 'point-mode': 'point',
- 'linestring-mode': 'linestring',
- 'polygon-mode': 'polygon',
- 'rectangle-mode': 'rectangle',
- 'circle-mode': 'circle',
- 'freehand-mode': 'freehand',
- 'clear-mode': 'static'
- };
-
- for (const buttonId in modeButtons) {
- const button = document.getElementById(buttonId);
- if (button) {
- button.onclick = () => {
- setActiveButton(buttonId);
- const modeName = modeButtons[buttonId];
-
- if (!draw) {
- return;
- }
- if (modeName === 'static') {
- draw.clear();
- draw.setMode('static');
- } else if (modeName) {
- draw.setMode(modeName);
- }
- };
- }
- }
-}
-
-function setActiveButton(buttonId: string): void {
- const buttons = document.querySelectorAll('.mode-button');
- const resizeButton = document.getElementById('resize-button');
- const isResizeActive = resizeButton?.classList.contains('active');
-
- buttons.forEach(button => {
- if (button.id !== 'resize-button') {
- button.classList.remove('active');
- }
- });
-
- const activeButton = document.getElementById(buttonId);
- if (activeButton) {
- activeButton.classList.add('active');
- }
-
- if (isResizeActive) {
- resizeButton?.classList.add('active');
- }
-}
-
-function initUI(): void {
- setActiveButton('point-mode');
-}
-
-let map: google.maps.Map;
-let draw: TerraDraw;
-let currentMode: string = 'static';
-let history: any[] = [];
-let redoHistory: any[] = [];
-let selectedFeatureId: string | null = null;
-let isRestoring = false;
-let resizingEnabled = false;
-let debounceTimeout: number | undefined;
-
-const loader = new Loader({
- apiKey: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
- version: "weekly",
- libraries: ["maps", "drawing", "marker"]
-});
-
-loader.load().then(async () => {
- try {
- const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
- const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
- const { Data } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
-
- const mapOptions: google.maps.MapOptions = {
- center: { lat: 48.862, lng: 2.342 },
- zoom: 12,
- mapId:'c306b3c6dd3ed8d9', // raster '6a17c323f461e521',
- mapTypeId: 'roadmap',
- zoomControl:false,
- tilt: 45,
- mapTypeControl: true,
- clickableIcons:false,
- streetViewControl:false,
- fullscreenControl:false,
- };
-
- const mapDiv = document.getElementById("map") as HTMLElement;
- map = new Map(mapDiv, mapOptions);
-
- map.addListener("click", () => {
- if (draw) {
- console.log("Current draw mode on map click:", draw.getMode());
- }
- });
-
- map.addListener("projection_changed", () => {
-
- // [START maps_drawing_terradraw_modes]
-
- draw = new TerraDraw({
- adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps, coordinatePrecision: 9 }),
- modes: [
- new TerraDrawSelectMode({
- flags: {
- polygon: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- linestring: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- point: {
- feature: {
- draggable: true,
- rotateable: true,
- },
- },
- rectangle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- circle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- freehand: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- },
- }),
-
- new TerraDrawPointMode({
- editable: true,
- styles: { pointColor: getRandomColor() },
- }),
- new TerraDrawLineStringMode({
- editable: true,
- styles: { lineStringColor: getRandomColor() },
- }),
- new TerraDrawPolygonMode({
- editable: true,
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawRectangleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawCircleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawFreehandMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- ],
- });
-
- draw.start();
-
-
- draw.on('ready', () => {
- console.log("TerraDraw is ready!");
- initUI();
- setupModeButtons();
- draw.setMode('point');
- currentMode = 'point';
- setActiveButton('point-mode');
-
- draw.on("select", (id) => {
- // console.log(`Feature selected: ${id}`);
- if (selectedFeatureId && selectedFeatureId !== id) {
- draw.deselectFeature(selectedFeatureId);
- }
- selectedFeatureId = id as string;
- });
-
- draw.on("deselect", () => {
- // console.log("Feature deselected");
- selectedFeatureId = null;
- });
-
- history.push(processSnapshotForUndo(draw.getSnapshot())); // Push initial empty state
-
- draw.on("change", (ids, type) => {
- if (isRestoring) {
- return;
- }
-
- if (debounceTimeout) {
- clearTimeout(debounceTimeout);
- }
-
- debounceTimeout = window.setTimeout(() => {
- const snapshot = draw.getSnapshot();
- const processedSnapshot = processSnapshotForUndo(snapshot);
- const filteredSnapshot = processedSnapshot.filter(
- (f) => !f.properties.midPoint && !f.properties.selectionPoint
- );
- history.push(filteredSnapshot);
- redoHistory = [];
- }, 200);
- });
-
- // [END maps_drawing_terradraw_modes]
-
- const exportButton = document.getElementById('export-button');
- if (exportButton) {
- exportButton.onclick = () => {
- const features = draw.getSnapshot();
- const geojson = {
- type: "FeatureCollection",
- features: features,
- };
- const data = JSON.stringify(geojson, null, 2);
- const blob = new Blob([data], { type: "text/plain" });
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = "drawing.geojson";
- link.click();
- URL.revokeObjectURL(url);
- };
- }
-
- const uploadButton = document.getElementById('upload-button');
- const uploadInput = document.getElementById('upload-input') as HTMLInputElement;
-
- if (uploadButton && uploadInput) {
- uploadButton.onclick = () => {
- uploadInput.click();
- };
-
- uploadInput.onchange = (event) => {
- const file = (event.target as HTMLInputElement).files?.[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const geojson = JSON.parse(e.target?.result as string);
- if (geojson.type === "FeatureCollection") {
- draw.addFeatures(geojson.features);
- } else {
- alert("Invalid GeoJSON file: must be a FeatureCollection.");
- }
- } catch (error) {
- alert("Error parsing GeoJSON file.");
- }
- };
- reader.readAsText(file);
- }
- };
- }
-
- const resizeButton = document.getElementById('resize-button');
- if (resizeButton) {
- resizeButton.onclick = () => {
- resizingEnabled = !resizingEnabled;
- resizeButton.classList.toggle('active', resizingEnabled);
-
- const flags = {
- polygon: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- linestring: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- rectangle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- circle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- freehand: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- };
-
- console.log("Updating flags:", flags);
- draw.updateModeOptions('select', { flags });
- };
- }
-
- const deleteSelectedButton = document.getElementById('delete-selected-button');
- if (deleteSelectedButton) {
- deleteSelectedButton.onclick = () => {
- if (selectedFeatureId) {
- draw.removeFeatures([selectedFeatureId]);
- } else {
- const features = draw.getSnapshot();
- if (features.length > 0) {
- const lastFeature = features[features.length - 1];
- if (lastFeature.id) {
- draw.removeFeatures([lastFeature.id]);
- }
- }
- }
- };
- }
-
- const undoButton = document.getElementById('undo-button');
- if (undoButton) {
- undoButton.onclick = () => {
- if (history.length > 1) {
- redoHistory.push(history.pop());
- const snapshotToRestore = history[history.length - 1];
- console.log("Restoring snapshot (undo):", snapshotToRestore);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshotToRestore);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
-
- const redoButton = document.getElementById('redo-button');
- if (redoButton) {
- redoButton.onclick = () => {
- if (redoHistory.length > 0) {
- const snapshot = redoHistory.pop();
- console.log("Restoring snapshot (redo):", snapshot);
- history.push(snapshot);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshot);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- });
-
- function rotateFeature(feature, angle) {
- const newFeature = JSON.parse(JSON.stringify(feature));
- const coordinates = newFeature.geometry.coordinates;
- const center = getCenter(coordinates);
-
- const rotatedCoordinates = coordinates.map(ring => {
- return ring.map(point => {
- const x = point[0] - center[0];
- const y = point[1] - center[1];
- const newX = x * Math.cos(angle * Math.PI / 180) - y * Math.sin(angle * Math.PI / 180);
- const newY = x * Math.sin(angle * Math.PI / 180) + y * Math.cos(angle * Math.PI / 180);
- return [newX + center[0], newY + center[1]];
- });
- });
-
- newFeature.geometry.coordinates = rotatedCoordinates;
- return newFeature;
- }
-
- function getCenter(coordinates) {
- let x = 0;
- let y = 0;
- let count = 0;
- coordinates.forEach(ring => {
- ring.forEach(point => {
- x += point[0];
- y += point[1];
- count++;
- });
- });
- return [x / count, y / count];
- }
-
- document.addEventListener('keydown', (event) => {
- if (event.key === 'r' && selectedFeatureId) {
- const features = draw.getSnapshot();
- const selectedFeature = features.find(f => f.id === selectedFeatureId);
-
- if (selectedFeature) {
- const newFeature = rotateFeature(selectedFeature, 15);
- draw.addFeatures([newFeature]);
- }
- }
- });
- });
-
- } catch (e) {
- console.error("Error loading Google Maps API:", e);
- }
-}).catch(e => {
- console.error("Error loading Google Maps API:", e);
-});
-// [END maps_map_drawing_terradraw]
diff --git a/dist/samples/map-drawing-terradraw/app/package.json b/dist/samples/map-drawing-terradraw/app/package.json
deleted file mode 100644
index c45a36a9e..000000000
--- a/dist/samples/map-drawing-terradraw/app/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "name": "@js-api-samples/map-drawing-terradraw",
- "version": "1.0.0",
- "description": "Basic sample for Terra Draw with Google Maps API.",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh map-drawing-terradraw && bash ../app.sh map-drawing-terradraw && bash ../docs.sh map-drawing-terradraw && npm run build:vite --workspace=. && bash ../dist.sh map-drawing-terradraw",
- "test": "tsc && npm run build:vite --workspace=.",
- "start": "tsc && vite build --base './' && vite",
- "build:vite": "vite build --base './'",
- "preview": "vite preview"
- },
- "dependencies": {
- "@googlemaps/js-api-loader": "^1.16.8",
- "terra-draw": "latest",
- "terra-draw-google-maps-adapter": "latest"
- },
- "devDependencies": {
- "@types/google.maps": "latest",
- "typescript": "^5.0.0",
- "vite": "^5.0.0"
- }
-}
diff --git a/dist/samples/map-drawing-terradraw/app/style.css b/dist/samples/map-drawing-terradraw/app/style.css
deleted file mode 100644
index 2584b672b..000000000
--- a/dist/samples/map-drawing-terradraw/app/style.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_map_drawing_terradraw] */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: Arial, sans-serif;
-}
-#map {
- height: 100%;
- width: 100%;
-}
-#mode-ui {
- position: absolute;
- top: 10px;
- right: 10px;
- background: white;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- z-index: 1000;
- display: flex;
- flex-direction: column;
-}
-#mode-ui button {
- margin: 5px 0;
- cursor: pointer;
-}
-
-.mode-button {
- width: 30px;
- height: 30px;
- border: 1px solid #ccc;
- background-color: white;
- padding: 2px;
- box-sizing: border-box;
-}
-
-.mode-button img {
- width: 100%;
- height: 100%;
- display: block;
- user-select: none;
-}
-
-/* Active state for shape modes */
-.mode-button.active {
- background-color: #e0e0e0; /* light grey */
-}
-
-/* Special buttons default state */
-#select-mode,
-#clear-mode,
-#delete-selected-button,
-#undo-button,
-#redo-button,
-#export-button,
-#upload-button,
-#resize-button {
- background-color: #000000;
-}
-
-/* Special buttons icon default state */
-#select-mode img,
-#clear-mode img,
-#delete-selected-button img,
-#undo-button img,
-#redo-button img,
-#export-button img,
-#upload-button img,
-#resize-button img {
- filter: brightness(0) invert(1);
-}
-
-/* Special buttons active/click states */
-#select-mode.active {
- background-color: #A9A9A9; /* dark grey */
-}
-
-#clear-mode:active,
-#delete-selected-button:active,
-#undo-button:active,
-#redo-button:active,
-#export-button:active,
-#upload-button:active,
-#resize-button.active {
- background-color: #A9A9A9; /* dark grey */
-}
-/* [END maps_map_drawing_terradraw] */
diff --git a/dist/samples/map-drawing-terradraw/app/tsconfig.json b/dist/samples/map-drawing-terradraw/app/tsconfig.json
deleted file mode 100644
index c543450ed..000000000
--- a/dist/samples/map-drawing-terradraw/app/tsconfig.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "compilerOptions": {
- "module": "esnext",
- "target": "esnext",
- "strict": true,
- "noImplicitAny": false,
- "lib": [
- "es2015",
- "esnext",
- "es6",
- "dom",
- "dom.iterable"
- ],
- "moduleResolution": "Bundler",
- "jsx": "preserve",
- "types": ["@types/google.maps"]
- }
-}
\ No newline at end of file
diff --git a/dist/samples/map-drawing-terradraw/dist/assets/index-CIrp2hh-.js b/dist/samples/map-drawing-terradraw/dist/assets/index-CIrp2hh-.js
deleted file mode 100644
index f61827e45..000000000
--- a/dist/samples/map-drawing-terradraw/dist/assets/index-CIrp2hh-.js
+++ /dev/null
@@ -1,5 +0,0 @@
-(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))i(o);new MutationObserver(o=>{for(const s of o)if(s.type==="childList")for(const n of s.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&i(n)}).observe(document,{childList:!0,subtree:!0});function e(o){const s={};return o.integrity&&(s.integrity=o.integrity),o.referrerPolicy&&(s.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?s.credentials="include":o.crossOrigin==="anonymous"?s.credentials="omit":s.credentials="same-origin",s}function i(o){if(o.ep)return;o.ep=!0;const s=e(o);fetch(o.href,s)}})();function Pe(r,t,e,i){function o(s){return s instanceof e?s:new e(function(n){n(s)})}return new(e||(e=Promise))(function(s,n){function a(h){try{l(i.next(h))}catch(c){n(c)}}function d(h){try{l(i.throw(h))}catch(c){n(c)}}function l(h){h.done?s(h.value):o(h.value).then(a,d)}l((i=i.apply(r,[])).next())})}function Ie(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var It,zt;function xe(){return zt||(zt=1,It=function r(t,e){if(t===e)return!0;if(t&&e&&typeof t=="object"&&typeof e=="object"){if(t.constructor!==e.constructor)return!1;var i,o,s;if(Array.isArray(t)){if(i=t.length,i!=e.length)return!1;for(o=i;o--!==0;)if(!r(t[o],e[o]))return!1;return!0}if(t.constructor===RegExp)return t.source===e.source&&t.flags===e.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===e.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===e.toString();if(s=Object.keys(t),i=s.length,i!==Object.keys(e).length)return!1;for(o=i;o--!==0;)if(!Object.prototype.hasOwnProperty.call(e,s[o]))return!1;for(o=i;o--!==0;){var n=s[o];if(!r(t[n],e[n]))return!1}return!0}return t!==t&&e!==e}),It}var Ee=xe(),Me=Ie(Ee);const Kt="__googleMapsScriptId";var tt;(function(r){r[r.INITIALIZED=0]="INITIALIZED",r[r.LOADING=1]="LOADING",r[r.SUCCESS=2]="SUCCESS",r[r.FAILURE=3]="FAILURE"})(tt||(tt={}));class H{constructor({apiKey:t,authReferrerPolicy:e,channel:i,client:o,id:s=Kt,language:n,libraries:a=[],mapIds:d,nonce:l,region:h,retries:c=3,url:u="https://maps.googleapis.com/maps/api/js",version:p}){if(this.callbacks=[],this.done=!1,this.loading=!1,this.errors=[],this.apiKey=t,this.authReferrerPolicy=e,this.channel=i,this.client=o,this.id=s||Kt,this.language=n,this.libraries=a,this.mapIds=d,this.nonce=l,this.region=h,this.retries=c,this.url=u,this.version=p,H.instance){if(!Me(this.options,H.instance.options))throw new Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(H.instance.options)}`);return H.instance}H.instance=this}get options(){return{version:this.version,apiKey:this.apiKey,channel:this.channel,client:this.client,id:this.id,libraries:this.libraries,language:this.language,region:this.region,mapIds:this.mapIds,nonce:this.nonce,url:this.url,authReferrerPolicy:this.authReferrerPolicy}}get status(){return this.errors.length?tt.FAILURE:this.done?tt.SUCCESS:this.loading?tt.LOADING:tt.INITIALIZED}get failed(){return this.done&&!this.loading&&this.errors.length>=this.retries+1}createUrl(){let t=this.url;return t+="?callback=__googleMapsCallback&loading=async",this.apiKey&&(t+=`&key=${this.apiKey}`),this.channel&&(t+=`&channel=${this.channel}`),this.client&&(t+=`&client=${this.client}`),this.libraries.length>0&&(t+=`&libraries=${this.libraries.join(",")}`),this.language&&(t+=`&language=${this.language}`),this.region&&(t+=`®ion=${this.region}`),this.version&&(t+=`&v=${this.version}`),this.mapIds&&(t+=`&map_ids=${this.mapIds.join(",")}`),this.authReferrerPolicy&&(t+=`&auth_referrer_policy=${this.authReferrerPolicy}`),t}deleteScript(){const t=document.getElementById(this.id);t&&t.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise((t,e)=>{this.loadCallback(i=>{i?e(i.error):t(window.google)})})}importLibrary(t){return this.execute(),google.maps.importLibrary(t)}loadCallback(t){this.callbacks.push(t),this.execute()}setScript(){var t,e;if(document.getElementById(this.id)){this.callback();return}const i={key:this.apiKey,channel:this.channel,client:this.client,libraries:this.libraries.length&&this.libraries,v:this.version,mapIds:this.mapIds,language:this.language,region:this.region,authReferrerPolicy:this.authReferrerPolicy};Object.keys(i).forEach(s=>!i[s]&&delete i[s]),!((e=(t=window==null?void 0:window.google)===null||t===void 0?void 0:t.maps)===null||e===void 0)&&e.importLibrary||(s=>{let n,a,d,l="The Google Maps JavaScript API",h="google",c="importLibrary",u="__ib__",p=document,g=window;g=g[h]||(g[h]={});const y=g.maps||(g.maps={}),v=new Set,m=new URLSearchParams,C=()=>n||(n=new Promise((f,P)=>Pe(this,void 0,void 0,function*(){var x;yield a=p.createElement("script"),a.id=this.id,m.set("libraries",[...v]+"");for(d in s)m.set(d.replace(/[A-Z]/g,w=>"_"+w[0].toLowerCase()),s[d]);m.set("callback",h+".maps."+u),a.src=this.url+"?"+m,y[u]=f,a.onerror=()=>n=P(Error(l+" could not load.")),a.nonce=this.nonce||((x=p.querySelector("script[nonce]"))===null||x===void 0?void 0:x.nonce)||"",p.head.append(a)})));y[c]?console.warn(l+" only loads once. Ignoring:",s):y[c]=(f,...P)=>v.add(f)&&C().then(()=>y[c](f,...P))})(i);const o=this.libraries.map(s=>this.importLibrary(s));o.length||o.push(this.importLibrary("core")),Promise.all(o).then(()=>this.callback(),s=>{const n=new ErrorEvent("error",{error:s});this.loadErrorCallback(n)})}reset(){this.deleteScript(),this.done=!1,this.loading=!1,this.errors=[],this.onerrorEvent=null}resetIfRetryingFailed(){this.failed&&this.reset()}loadErrorCallback(t){if(this.errors.push(t),this.errors.length<=this.retries){const e=this.errors.length*Math.pow(2,this.errors.length);console.error(`Failed to load Google Maps script, retrying in ${e} ms.`),setTimeout(()=>{this.deleteScript(),this.setScript()},e)}else this.onerrorEvent=t,this.callback()}callback(){this.done=!0,this.loading=!1,this.callbacks.forEach(t=>{t(this.onerrorEvent)}),this.callbacks=[]}execute(){if(this.resetIfRetryingFailed(),!this.loading)if(this.done)this.callback();else{if(window.google&&window.google.maps&&window.google.maps.version){console.warn("Google Maps already loaded outside @googlemaps/js-api-loader. This may result in undesirable behavior as options and script parameters may not match."),this.callback();return}this.loading=!0,this.setScript()}}}function M(){return M=Object.assign?Object.assign.bind():function(r){for(var t=1;t
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/map-drawing-terradraw/docs/index.html b/dist/samples/map-drawing-terradraw/docs/index.html
deleted file mode 100644
index 48c180390..000000000
--- a/dist/samples/map-drawing-terradraw/docs/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/map-drawing-terradraw/docs/index.js b/dist/samples/map-drawing-terradraw/docs/index.js
deleted file mode 100644
index 6cd1cf339..000000000
--- a/dist/samples/map-drawing-terradraw/docs/index.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_map_drawing_terradraw]
-// [START maps_map_drawing_terradraw_libraries]
-import { Loader } from '@googlemaps/js-api-loader';
-import { TerraDraw, TerraDrawSelectMode, TerraDrawPointMode, TerraDrawLineStringMode, TerraDrawPolygonMode, TerraDrawRectangleMode, TerraDrawCircleMode, TerraDrawFreehandMode } from 'terra-draw';
-import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
-// [END maps_map_drawing_terradraw_libraries]
-const colorPalette = [
- "#E74C3C",
- "#FF0066",
- "#9B59B6",
- "#673AB7",
- "#3F51B5",
- "#3498DB",
- "#03A9F4",
- "#00BCD4",
- "#009688",
- "#27AE60",
- "#8BC34A",
- "#CDDC39",
- "#F1C40F",
- "#FFC107",
- "#F39C12",
- "#FF5722",
- "#795548"
-];
-const getRandomColor = () => colorPalette[Math.floor(Math.random() * colorPalette.length)];
-function processSnapshotForUndo(snapshot) {
- // console.log("Processing snapshot for undo:", snapshot);
- return snapshot.map(feature => {
- const newFeature = JSON.parse(JSON.stringify(feature));
- if (newFeature.properties.mode === 'rectangle') {
- // console.log("Processing rectangle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- newFeature.properties.mode = 'polygon';
- }
- else if (newFeature.properties.mode === 'circle') {
- // console.log("Processing circle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- // The radius is already in properties, so we just need to ensure the mode is correct for re-creation
- newFeature.properties.mode = 'circle';
- }
- return newFeature;
- });
-}
-function setupModeButtons() {
- const modeUI = document.getElementById('mode-ui');
- if (!modeUI) {
- return;
- }
- const modeButtons = {
- 'select-mode': 'select',
- 'point-mode': 'point',
- 'linestring-mode': 'linestring',
- 'polygon-mode': 'polygon',
- 'rectangle-mode': 'rectangle',
- 'circle-mode': 'circle',
- 'freehand-mode': 'freehand',
- 'clear-mode': 'static'
- };
- for (const buttonId in modeButtons) {
- const button = document.getElementById(buttonId);
- if (button) {
- button.onclick = () => {
- setActiveButton(buttonId);
- const modeName = modeButtons[buttonId];
- if (!draw) {
- return;
- }
- if (modeName === 'static') {
- draw.clear();
- draw.setMode('static');
- }
- else if (modeName) {
- draw.setMode(modeName);
- }
- };
- }
- }
-}
-function setActiveButton(buttonId) {
- const buttons = document.querySelectorAll('.mode-button');
- const resizeButton = document.getElementById('resize-button');
- const isResizeActive = resizeButton?.classList.contains('active');
- buttons.forEach(button => {
- if (button.id !== 'resize-button') {
- button.classList.remove('active');
- }
- });
- const activeButton = document.getElementById(buttonId);
- if (activeButton) {
- activeButton.classList.add('active');
- }
- if (isResizeActive) {
- resizeButton?.classList.add('active');
- }
-}
-function initUI() {
- setActiveButton('point-mode');
-}
-let map;
-let draw;
-let currentMode = 'static';
-let history = [];
-let redoHistory = [];
-let selectedFeatureId = null;
-let isRestoring = false;
-let resizingEnabled = false;
-let debounceTimeout;
-const loader = new Loader({
- apiKey: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
- version: "weekly",
- libraries: ["maps", "drawing", "marker"]
-});
-loader.load().then(async () => {
- try {
- const { Map } = await google.maps.importLibrary("maps");
- const { LatLngBounds } = await google.maps.importLibrary("core");
- const { Data } = await google.maps.importLibrary("maps");
- const mapOptions = {
- center: { lat: 48.862, lng: 2.342 },
- zoom: 12,
- mapId: 'c306b3c6dd3ed8d9', // raster '6a17c323f461e521',
- mapTypeId: 'roadmap',
- zoomControl: false,
- tilt: 45,
- mapTypeControl: true,
- clickableIcons: false,
- streetViewControl: false,
- fullscreenControl: false,
- };
- const mapDiv = document.getElementById("map");
- map = new Map(mapDiv, mapOptions);
- map.addListener("click", () => {
- if (draw) {
- console.log("Current draw mode on map click:", draw.getMode());
- }
- });
- map.addListener("projection_changed", () => {
- // [START maps_drawing_terradraw_modes]
- draw = new TerraDraw({
- adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps, coordinatePrecision: 9 }),
- modes: [
- new TerraDrawSelectMode({
- flags: {
- polygon: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- linestring: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- point: {
- feature: {
- draggable: true,
- rotateable: true,
- },
- },
- rectangle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- circle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- freehand: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- },
- }),
- new TerraDrawPointMode({
- editable: true,
- styles: { pointColor: getRandomColor() },
- }),
- new TerraDrawLineStringMode({
- editable: true,
- styles: { lineStringColor: getRandomColor() },
- }),
- new TerraDrawPolygonMode({
- editable: true,
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawRectangleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawCircleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawFreehandMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- ],
- });
- draw.start();
- draw.on('ready', () => {
- console.log("TerraDraw is ready!");
- initUI();
- setupModeButtons();
- draw.setMode('point');
- currentMode = 'point';
- setActiveButton('point-mode');
- draw.on("select", (id) => {
- // console.log(`Feature selected: ${id}`);
- if (selectedFeatureId && selectedFeatureId !== id) {
- draw.deselectFeature(selectedFeatureId);
- }
- selectedFeatureId = id;
- });
- draw.on("deselect", () => {
- // console.log("Feature deselected");
- selectedFeatureId = null;
- });
- history.push(processSnapshotForUndo(draw.getSnapshot())); // Push initial empty state
- draw.on("change", (ids, type) => {
- if (isRestoring) {
- return;
- }
- if (debounceTimeout) {
- clearTimeout(debounceTimeout);
- }
- debounceTimeout = window.setTimeout(() => {
- const snapshot = draw.getSnapshot();
- const processedSnapshot = processSnapshotForUndo(snapshot);
- const filteredSnapshot = processedSnapshot.filter((f) => !f.properties.midPoint && !f.properties.selectionPoint);
- history.push(filteredSnapshot);
- redoHistory = [];
- }, 200);
- });
- // [END maps_drawing_terradraw_modes]
- const exportButton = document.getElementById('export-button');
- if (exportButton) {
- exportButton.onclick = () => {
- const features = draw.getSnapshot();
- const geojson = {
- type: "FeatureCollection",
- features: features,
- };
- const data = JSON.stringify(geojson, null, 2);
- const blob = new Blob([data], { type: "text/plain" });
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = "drawing.geojson";
- link.click();
- URL.revokeObjectURL(url);
- };
- }
- const uploadButton = document.getElementById('upload-button');
- const uploadInput = document.getElementById('upload-input');
- if (uploadButton && uploadInput) {
- uploadButton.onclick = () => {
- uploadInput.click();
- };
- uploadInput.onchange = (event) => {
- const file = event.target.files?.[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const geojson = JSON.parse(e.target?.result);
- if (geojson.type === "FeatureCollection") {
- draw.addFeatures(geojson.features);
- }
- else {
- alert("Invalid GeoJSON file: must be a FeatureCollection.");
- }
- }
- catch (error) {
- alert("Error parsing GeoJSON file.");
- }
- };
- reader.readAsText(file);
- }
- };
- }
- const resizeButton = document.getElementById('resize-button');
- if (resizeButton) {
- resizeButton.onclick = () => {
- resizingEnabled = !resizingEnabled;
- resizeButton.classList.toggle('active', resizingEnabled);
- const flags = {
- polygon: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- linestring: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- rectangle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- circle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- freehand: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- };
- console.log("Updating flags:", flags);
- draw.updateModeOptions('select', { flags });
- };
- }
- const deleteSelectedButton = document.getElementById('delete-selected-button');
- if (deleteSelectedButton) {
- deleteSelectedButton.onclick = () => {
- if (selectedFeatureId) {
- draw.removeFeatures([selectedFeatureId]);
- }
- else {
- const features = draw.getSnapshot();
- if (features.length > 0) {
- const lastFeature = features[features.length - 1];
- if (lastFeature.id) {
- draw.removeFeatures([lastFeature.id]);
- }
- }
- }
- };
- }
- const undoButton = document.getElementById('undo-button');
- if (undoButton) {
- undoButton.onclick = () => {
- if (history.length > 1) {
- redoHistory.push(history.pop());
- const snapshotToRestore = history[history.length - 1];
- console.log("Restoring snapshot (undo):", snapshotToRestore);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshotToRestore);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- const redoButton = document.getElementById('redo-button');
- if (redoButton) {
- redoButton.onclick = () => {
- if (redoHistory.length > 0) {
- const snapshot = redoHistory.pop();
- console.log("Restoring snapshot (redo):", snapshot);
- history.push(snapshot);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshot);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- });
- function rotateFeature(feature, angle) {
- const newFeature = JSON.parse(JSON.stringify(feature));
- const coordinates = newFeature.geometry.coordinates;
- const center = getCenter(coordinates);
- const rotatedCoordinates = coordinates.map(ring => {
- return ring.map(point => {
- const x = point[0] - center[0];
- const y = point[1] - center[1];
- const newX = x * Math.cos(angle * Math.PI / 180) - y * Math.sin(angle * Math.PI / 180);
- const newY = x * Math.sin(angle * Math.PI / 180) + y * Math.cos(angle * Math.PI / 180);
- return [newX + center[0], newY + center[1]];
- });
- });
- newFeature.geometry.coordinates = rotatedCoordinates;
- return newFeature;
- }
- function getCenter(coordinates) {
- let x = 0;
- let y = 0;
- let count = 0;
- coordinates.forEach(ring => {
- ring.forEach(point => {
- x += point[0];
- y += point[1];
- count++;
- });
- });
- return [x / count, y / count];
- }
- document.addEventListener('keydown', (event) => {
- if (event.key === 'r' && selectedFeatureId) {
- const features = draw.getSnapshot();
- const selectedFeature = features.find(f => f.id === selectedFeatureId);
- if (selectedFeature) {
- const newFeature = rotateFeature(selectedFeature, 15);
- draw.addFeatures([newFeature]);
- }
- }
- });
- });
- }
- catch (e) {
- console.error("Error loading Google Maps API:", e);
- }
-}).catch(e => {
- console.error("Error loading Google Maps API:", e);
-});
-// [END maps_map_drawing_terradraw]
diff --git a/dist/samples/map-drawing-terradraw/docs/index.ts b/dist/samples/map-drawing-terradraw/docs/index.ts
deleted file mode 100644
index 51c00895f..000000000
--- a/dist/samples/map-drawing-terradraw/docs/index.ts
+++ /dev/null
@@ -1,509 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_map_drawing_terradraw]
-// [START maps_map_drawing_terradraw_libraries]
-import { Loader } from '@googlemaps/js-api-loader';
-
-import {
- TerraDraw,
- TerraDrawSelectMode,
- TerraDrawPointMode,
- TerraDrawLineStringMode,
- TerraDrawPolygonMode,
- TerraDrawRectangleMode,
- TerraDrawCircleMode,
- TerraDrawFreehandMode
-} from 'terra-draw';
-import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
-
-// [END maps_map_drawing_terradraw_libraries]
-
-const colorPalette = [
- "#E74C3C",
- "#FF0066",
- "#9B59B6",
- "#673AB7",
- "#3F51B5",
- "#3498DB",
- "#03A9F4",
- "#00BCD4",
- "#009688",
- "#27AE60",
- "#8BC34A",
- "#CDDC39",
- "#F1C40F",
- "#FFC107",
- "#F39C12",
- "#FF5722",
- "#795548"
-];
-
-const getRandomColor = () => colorPalette[Math.floor(Math.random() * colorPalette.length)] as `#${string}`;
-
-function processSnapshotForUndo(snapshot: any[]): any[] {
- // console.log("Processing snapshot for undo:", snapshot);
- return snapshot.map(feature => {
- const newFeature = JSON.parse(JSON.stringify(feature));
-
- if (newFeature.properties.mode === 'rectangle') {
- // console.log("Processing rectangle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- newFeature.properties.mode = 'polygon';
- } else if (newFeature.properties.mode === 'circle') {
- // console.log("Processing circle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- // The radius is already in properties, so we just need to ensure the mode is correct for re-creation
- newFeature.properties.mode = 'circle';
- }
- return newFeature;
- });
-}
-
-function setupModeButtons(): void {
- const modeUI = document.getElementById('mode-ui');
- if (!modeUI) {
- return;
- }
-
- const modeButtons: { [key: string]: string } = {
- 'select-mode': 'select',
- 'point-mode': 'point',
- 'linestring-mode': 'linestring',
- 'polygon-mode': 'polygon',
- 'rectangle-mode': 'rectangle',
- 'circle-mode': 'circle',
- 'freehand-mode': 'freehand',
- 'clear-mode': 'static'
- };
-
- for (const buttonId in modeButtons) {
- const button = document.getElementById(buttonId);
- if (button) {
- button.onclick = () => {
- setActiveButton(buttonId);
- const modeName = modeButtons[buttonId];
-
- if (!draw) {
- return;
- }
- if (modeName === 'static') {
- draw.clear();
- draw.setMode('static');
- } else if (modeName) {
- draw.setMode(modeName);
- }
- };
- }
- }
-}
-
-function setActiveButton(buttonId: string): void {
- const buttons = document.querySelectorAll('.mode-button');
- const resizeButton = document.getElementById('resize-button');
- const isResizeActive = resizeButton?.classList.contains('active');
-
- buttons.forEach(button => {
- if (button.id !== 'resize-button') {
- button.classList.remove('active');
- }
- });
-
- const activeButton = document.getElementById(buttonId);
- if (activeButton) {
- activeButton.classList.add('active');
- }
-
- if (isResizeActive) {
- resizeButton?.classList.add('active');
- }
-}
-
-function initUI(): void {
- setActiveButton('point-mode');
-}
-
-let map: google.maps.Map;
-let draw: TerraDraw;
-let currentMode: string = 'static';
-let history: any[] = [];
-let redoHistory: any[] = [];
-let selectedFeatureId: string | null = null;
-let isRestoring = false;
-let resizingEnabled = false;
-let debounceTimeout: number | undefined;
-
-const loader = new Loader({
- apiKey: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
- version: "weekly",
- libraries: ["maps", "drawing", "marker"]
-});
-
-loader.load().then(async () => {
- try {
- const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
- const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
- const { Data } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
-
- const mapOptions: google.maps.MapOptions = {
- center: { lat: 48.862, lng: 2.342 },
- zoom: 12,
- mapId:'c306b3c6dd3ed8d9', // raster '6a17c323f461e521',
- mapTypeId: 'roadmap',
- zoomControl:false,
- tilt: 45,
- mapTypeControl: true,
- clickableIcons:false,
- streetViewControl:false,
- fullscreenControl:false,
- };
-
- const mapDiv = document.getElementById("map") as HTMLElement;
- map = new Map(mapDiv, mapOptions);
-
- map.addListener("click", () => {
- if (draw) {
- console.log("Current draw mode on map click:", draw.getMode());
- }
- });
-
- map.addListener("projection_changed", () => {
-
- // [START maps_drawing_terradraw_modes]
-
- draw = new TerraDraw({
- adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps, coordinatePrecision: 9 }),
- modes: [
- new TerraDrawSelectMode({
- flags: {
- polygon: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- linestring: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- point: {
- feature: {
- draggable: true,
- rotateable: true,
- },
- },
- rectangle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- circle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- freehand: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- },
- }),
-
- new TerraDrawPointMode({
- editable: true,
- styles: { pointColor: getRandomColor() },
- }),
- new TerraDrawLineStringMode({
- editable: true,
- styles: { lineStringColor: getRandomColor() },
- }),
- new TerraDrawPolygonMode({
- editable: true,
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawRectangleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawCircleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawFreehandMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- ],
- });
-
- draw.start();
-
-
- draw.on('ready', () => {
- console.log("TerraDraw is ready!");
- initUI();
- setupModeButtons();
- draw.setMode('point');
- currentMode = 'point';
- setActiveButton('point-mode');
-
- draw.on("select", (id) => {
- // console.log(`Feature selected: ${id}`);
- if (selectedFeatureId && selectedFeatureId !== id) {
- draw.deselectFeature(selectedFeatureId);
- }
- selectedFeatureId = id as string;
- });
-
- draw.on("deselect", () => {
- // console.log("Feature deselected");
- selectedFeatureId = null;
- });
-
- history.push(processSnapshotForUndo(draw.getSnapshot())); // Push initial empty state
-
- draw.on("change", (ids, type) => {
- if (isRestoring) {
- return;
- }
-
- if (debounceTimeout) {
- clearTimeout(debounceTimeout);
- }
-
- debounceTimeout = window.setTimeout(() => {
- const snapshot = draw.getSnapshot();
- const processedSnapshot = processSnapshotForUndo(snapshot);
- const filteredSnapshot = processedSnapshot.filter(
- (f) => !f.properties.midPoint && !f.properties.selectionPoint
- );
- history.push(filteredSnapshot);
- redoHistory = [];
- }, 200);
- });
-
- // [END maps_drawing_terradraw_modes]
-
- const exportButton = document.getElementById('export-button');
- if (exportButton) {
- exportButton.onclick = () => {
- const features = draw.getSnapshot();
- const geojson = {
- type: "FeatureCollection",
- features: features,
- };
- const data = JSON.stringify(geojson, null, 2);
- const blob = new Blob([data], { type: "text/plain" });
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = "drawing.geojson";
- link.click();
- URL.revokeObjectURL(url);
- };
- }
-
- const uploadButton = document.getElementById('upload-button');
- const uploadInput = document.getElementById('upload-input') as HTMLInputElement;
-
- if (uploadButton && uploadInput) {
- uploadButton.onclick = () => {
- uploadInput.click();
- };
-
- uploadInput.onchange = (event) => {
- const file = (event.target as HTMLInputElement).files?.[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const geojson = JSON.parse(e.target?.result as string);
- if (geojson.type === "FeatureCollection") {
- draw.addFeatures(geojson.features);
- } else {
- alert("Invalid GeoJSON file: must be a FeatureCollection.");
- }
- } catch (error) {
- alert("Error parsing GeoJSON file.");
- }
- };
- reader.readAsText(file);
- }
- };
- }
-
- const resizeButton = document.getElementById('resize-button');
- if (resizeButton) {
- resizeButton.onclick = () => {
- resizingEnabled = !resizingEnabled;
- resizeButton.classList.toggle('active', resizingEnabled);
-
- const flags = {
- polygon: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- linestring: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- rectangle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- circle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- freehand: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- };
-
- console.log("Updating flags:", flags);
- draw.updateModeOptions('select', { flags });
- };
- }
-
- const deleteSelectedButton = document.getElementById('delete-selected-button');
- if (deleteSelectedButton) {
- deleteSelectedButton.onclick = () => {
- if (selectedFeatureId) {
- draw.removeFeatures([selectedFeatureId]);
- } else {
- const features = draw.getSnapshot();
- if (features.length > 0) {
- const lastFeature = features[features.length - 1];
- if (lastFeature.id) {
- draw.removeFeatures([lastFeature.id]);
- }
- }
- }
- };
- }
-
- const undoButton = document.getElementById('undo-button');
- if (undoButton) {
- undoButton.onclick = () => {
- if (history.length > 1) {
- redoHistory.push(history.pop());
- const snapshotToRestore = history[history.length - 1];
- console.log("Restoring snapshot (undo):", snapshotToRestore);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshotToRestore);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
-
- const redoButton = document.getElementById('redo-button');
- if (redoButton) {
- redoButton.onclick = () => {
- if (redoHistory.length > 0) {
- const snapshot = redoHistory.pop();
- console.log("Restoring snapshot (redo):", snapshot);
- history.push(snapshot);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshot);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- });
-
- function rotateFeature(feature, angle) {
- const newFeature = JSON.parse(JSON.stringify(feature));
- const coordinates = newFeature.geometry.coordinates;
- const center = getCenter(coordinates);
-
- const rotatedCoordinates = coordinates.map(ring => {
- return ring.map(point => {
- const x = point[0] - center[0];
- const y = point[1] - center[1];
- const newX = x * Math.cos(angle * Math.PI / 180) - y * Math.sin(angle * Math.PI / 180);
- const newY = x * Math.sin(angle * Math.PI / 180) + y * Math.cos(angle * Math.PI / 180);
- return [newX + center[0], newY + center[1]];
- });
- });
-
- newFeature.geometry.coordinates = rotatedCoordinates;
- return newFeature;
- }
-
- function getCenter(coordinates) {
- let x = 0;
- let y = 0;
- let count = 0;
- coordinates.forEach(ring => {
- ring.forEach(point => {
- x += point[0];
- y += point[1];
- count++;
- });
- });
- return [x / count, y / count];
- }
-
- document.addEventListener('keydown', (event) => {
- if (event.key === 'r' && selectedFeatureId) {
- const features = draw.getSnapshot();
- const selectedFeature = features.find(f => f.id === selectedFeatureId);
-
- if (selectedFeature) {
- const newFeature = rotateFeature(selectedFeature, 15);
- draw.addFeatures([newFeature]);
- }
- }
- });
- });
-
- } catch (e) {
- console.error("Error loading Google Maps API:", e);
- }
-}).catch(e => {
- console.error("Error loading Google Maps API:", e);
-});
-// [END maps_map_drawing_terradraw]
diff --git a/dist/samples/map-drawing-terradraw/docs/style.css b/dist/samples/map-drawing-terradraw/docs/style.css
deleted file mode 100644
index 2584b672b..000000000
--- a/dist/samples/map-drawing-terradraw/docs/style.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_map_drawing_terradraw] */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: Arial, sans-serif;
-}
-#map {
- height: 100%;
- width: 100%;
-}
-#mode-ui {
- position: absolute;
- top: 10px;
- right: 10px;
- background: white;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- z-index: 1000;
- display: flex;
- flex-direction: column;
-}
-#mode-ui button {
- margin: 5px 0;
- cursor: pointer;
-}
-
-.mode-button {
- width: 30px;
- height: 30px;
- border: 1px solid #ccc;
- background-color: white;
- padding: 2px;
- box-sizing: border-box;
-}
-
-.mode-button img {
- width: 100%;
- height: 100%;
- display: block;
- user-select: none;
-}
-
-/* Active state for shape modes */
-.mode-button.active {
- background-color: #e0e0e0; /* light grey */
-}
-
-/* Special buttons default state */
-#select-mode,
-#clear-mode,
-#delete-selected-button,
-#undo-button,
-#redo-button,
-#export-button,
-#upload-button,
-#resize-button {
- background-color: #000000;
-}
-
-/* Special buttons icon default state */
-#select-mode img,
-#clear-mode img,
-#delete-selected-button img,
-#undo-button img,
-#redo-button img,
-#export-button img,
-#upload-button img,
-#resize-button img {
- filter: brightness(0) invert(1);
-}
-
-/* Special buttons active/click states */
-#select-mode.active {
- background-color: #A9A9A9; /* dark grey */
-}
-
-#clear-mode:active,
-#delete-selected-button:active,
-#undo-button:active,
-#redo-button:active,
-#export-button:active,
-#upload-button:active,
-#resize-button.active {
- background-color: #A9A9A9; /* dark grey */
-}
-/* [END maps_map_drawing_terradraw] */
diff --git a/dist/samples/map-drawing-terradraw/jsfiddle/demo.css b/dist/samples/map-drawing-terradraw/jsfiddle/demo.css
deleted file mode 100644
index 8542350b1..000000000
--- a/dist/samples/map-drawing-terradraw/jsfiddle/demo.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- font-family: Arial, sans-serif;
-}
-#map {
- height: 100%;
- width: 100%;
-}
-#mode-ui {
- position: absolute;
- top: 10px;
- right: 10px;
- background: white;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- z-index: 1000;
- display: flex;
- flex-direction: column;
-}
-#mode-ui button {
- margin: 5px 0;
- cursor: pointer;
-}
-
-.mode-button {
- width: 30px;
- height: 30px;
- border: 1px solid #ccc;
- background-color: white;
- padding: 2px;
- box-sizing: border-box;
-}
-
-.mode-button img {
- width: 100%;
- height: 100%;
- display: block;
- user-select: none;
-}
-
-/* Active state for shape modes */
-.mode-button.active {
- background-color: #e0e0e0; /* light grey */
-}
-
-/* Special buttons default state */
-#select-mode,
-#clear-mode,
-#delete-selected-button,
-#undo-button,
-#redo-button,
-#export-button,
-#upload-button,
-#resize-button {
- background-color: #000000;
-}
-
-/* Special buttons icon default state */
-#select-mode img,
-#clear-mode img,
-#delete-selected-button img,
-#undo-button img,
-#redo-button img,
-#export-button img,
-#upload-button img,
-#resize-button img {
- filter: brightness(0) invert(1);
-}
-
-/* Special buttons active/click states */
-#select-mode.active {
- background-color: #A9A9A9; /* dark grey */
-}
-
-#clear-mode:active,
-#delete-selected-button:active,
-#undo-button:active,
-#redo-button:active,
-#export-button:active,
-#upload-button:active,
-#resize-button.active {
- background-color: #A9A9A9; /* dark grey */
-}
-
diff --git a/dist/samples/map-drawing-terradraw/jsfiddle/demo.details b/dist/samples/map-drawing-terradraw/jsfiddle/demo.details
deleted file mode 100644
index 6cbc1dcaa..000000000
--- a/dist/samples/map-drawing-terradraw/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: map-drawing-terradraw
-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-drawing-terradraw/jsfiddle/demo.html b/dist/samples/map-drawing-terradraw/jsfiddle/demo.html
deleted file mode 100644
index 181332dc7..000000000
--- a/dist/samples/map-drawing-terradraw/jsfiddle/demo.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/map-drawing-terradraw/jsfiddle/demo.js b/dist/samples/map-drawing-terradraw/jsfiddle/demo.js
deleted file mode 100644
index 38988c3b1..000000000
--- a/dist/samples/map-drawing-terradraw/jsfiddle/demo.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-
-import { Loader } from '@googlemaps/js-api-loader';
-import { TerraDraw, TerraDrawSelectMode, TerraDrawPointMode, TerraDrawLineStringMode, TerraDrawPolygonMode, TerraDrawRectangleMode, TerraDrawCircleMode, TerraDrawFreehandMode } from 'terra-draw';
-import { TerraDrawGoogleMapsAdapter } from 'terra-draw-google-maps-adapter';
-
-const colorPalette = [
- "#E74C3C",
- "#FF0066",
- "#9B59B6",
- "#673AB7",
- "#3F51B5",
- "#3498DB",
- "#03A9F4",
- "#00BCD4",
- "#009688",
- "#27AE60",
- "#8BC34A",
- "#CDDC39",
- "#F1C40F",
- "#FFC107",
- "#F39C12",
- "#FF5722",
- "#795548"
-];
-const getRandomColor = () => colorPalette[Math.floor(Math.random() * colorPalette.length)];
-function processSnapshotForUndo(snapshot) {
- // console.log("Processing snapshot for undo:", snapshot);
- return snapshot.map(feature => {
- const newFeature = JSON.parse(JSON.stringify(feature));
- if (newFeature.properties.mode === 'rectangle') {
- // console.log("Processing rectangle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- newFeature.properties.mode = 'polygon';
- }
- else if (newFeature.properties.mode === 'circle') {
- // console.log("Processing circle for undo:", newFeature);
- newFeature.geometry.type = 'Polygon';
- // The radius is already in properties, so we just need to ensure the mode is correct for re-creation
- newFeature.properties.mode = 'circle';
- }
- return newFeature;
- });
-}
-function setupModeButtons() {
- const modeUI = document.getElementById('mode-ui');
- if (!modeUI) {
- return;
- }
- const modeButtons = {
- 'select-mode': 'select',
- 'point-mode': 'point',
- 'linestring-mode': 'linestring',
- 'polygon-mode': 'polygon',
- 'rectangle-mode': 'rectangle',
- 'circle-mode': 'circle',
- 'freehand-mode': 'freehand',
- 'clear-mode': 'static'
- };
- for (const buttonId in modeButtons) {
- const button = document.getElementById(buttonId);
- if (button) {
- button.onclick = () => {
- setActiveButton(buttonId);
- const modeName = modeButtons[buttonId];
- if (!draw) {
- return;
- }
- if (modeName === 'static') {
- draw.clear();
- draw.setMode('static');
- }
- else if (modeName) {
- draw.setMode(modeName);
- }
- };
- }
- }
-}
-function setActiveButton(buttonId) {
- const buttons = document.querySelectorAll('.mode-button');
- const resizeButton = document.getElementById('resize-button');
- const isResizeActive = resizeButton?.classList.contains('active');
- buttons.forEach(button => {
- if (button.id !== 'resize-button') {
- button.classList.remove('active');
- }
- });
- const activeButton = document.getElementById(buttonId);
- if (activeButton) {
- activeButton.classList.add('active');
- }
- if (isResizeActive) {
- resizeButton?.classList.add('active');
- }
-}
-function initUI() {
- setActiveButton('point-mode');
-}
-let map;
-let draw;
-let currentMode = 'static';
-let history = [];
-let redoHistory = [];
-let selectedFeatureId = null;
-let isRestoring = false;
-let resizingEnabled = false;
-let debounceTimeout;
-const loader = new Loader({
- apiKey: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
- version: "weekly",
- libraries: ["maps", "drawing", "marker"]
-});
-loader.load().then(async () => {
- try {
- const { Map } = await google.maps.importLibrary("maps");
- const { LatLngBounds } = await google.maps.importLibrary("core");
- const { Data } = await google.maps.importLibrary("maps");
- const mapOptions = {
- center: { lat: 48.862, lng: 2.342 },
- zoom: 12,
- mapId: 'c306b3c6dd3ed8d9', // raster '6a17c323f461e521',
- mapTypeId: 'roadmap',
- zoomControl: false,
- tilt: 45,
- mapTypeControl: true,
- clickableIcons: false,
- streetViewControl: false,
- fullscreenControl: false,
- };
- const mapDiv = document.getElementById("map");
- map = new Map(mapDiv, mapOptions);
- map.addListener("click", () => {
- if (draw) {
- console.log("Current draw mode on map click:", draw.getMode());
- }
- });
- map.addListener("projection_changed", () => {
-
- draw = new TerraDraw({
- adapter: new TerraDrawGoogleMapsAdapter({ map, lib: google.maps, coordinatePrecision: 9 }),
- modes: [
- new TerraDrawSelectMode({
- flags: {
- polygon: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- linestring: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- point: {
- feature: {
- draggable: true,
- rotateable: true,
- },
- },
- rectangle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- circle: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- freehand: {
- feature: {
- draggable: true,
- rotateable: true,
- coordinates: {
- midpoints: true,
- draggable: true,
- deletable: true,
- },
- },
- },
- },
- }),
- new TerraDrawPointMode({
- editable: true,
- styles: { pointColor: getRandomColor() },
- }),
- new TerraDrawLineStringMode({
- editable: true,
- styles: { lineStringColor: getRandomColor() },
- }),
- new TerraDrawPolygonMode({
- editable: true,
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawRectangleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawCircleMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- new TerraDrawFreehandMode({
- styles: (() => {
- const color = getRandomColor();
- return {
- fillColor: color,
- outlineColor: color,
- };
- })(),
- }),
- ],
- });
- draw.start();
- draw.on('ready', () => {
- console.log("TerraDraw is ready!");
- initUI();
- setupModeButtons();
- draw.setMode('point');
- currentMode = 'point';
- setActiveButton('point-mode');
- draw.on("select", (id) => {
- // console.log(`Feature selected: ${id}`);
- if (selectedFeatureId && selectedFeatureId !== id) {
- draw.deselectFeature(selectedFeatureId);
- }
- selectedFeatureId = id;
- });
- draw.on("deselect", () => {
- // console.log("Feature deselected");
- selectedFeatureId = null;
- });
- history.push(processSnapshotForUndo(draw.getSnapshot())); // Push initial empty state
- draw.on("change", (ids, type) => {
- if (isRestoring) {
- return;
- }
- if (debounceTimeout) {
- clearTimeout(debounceTimeout);
- }
- debounceTimeout = window.setTimeout(() => {
- const snapshot = draw.getSnapshot();
- const processedSnapshot = processSnapshotForUndo(snapshot);
- const filteredSnapshot = processedSnapshot.filter((f) => !f.properties.midPoint && !f.properties.selectionPoint);
- history.push(filteredSnapshot);
- redoHistory = [];
- }, 200);
- });
-
- const exportButton = document.getElementById('export-button');
- if (exportButton) {
- exportButton.onclick = () => {
- const features = draw.getSnapshot();
- const geojson = {
- type: "FeatureCollection",
- features: features,
- };
- const data = JSON.stringify(geojson, null, 2);
- const blob = new Blob([data], { type: "text/plain" });
- const url = URL.createObjectURL(blob);
- const link = document.createElement("a");
- link.href = url;
- link.download = "drawing.geojson";
- link.click();
- URL.revokeObjectURL(url);
- };
- }
- const uploadButton = document.getElementById('upload-button');
- const uploadInput = document.getElementById('upload-input');
- if (uploadButton && uploadInput) {
- uploadButton.onclick = () => {
- uploadInput.click();
- };
- uploadInput.onchange = (event) => {
- const file = event.target.files?.[0];
- if (file) {
- const reader = new FileReader();
- reader.onload = (e) => {
- try {
- const geojson = JSON.parse(e.target?.result);
- if (geojson.type === "FeatureCollection") {
- draw.addFeatures(geojson.features);
- }
- else {
- alert("Invalid GeoJSON file: must be a FeatureCollection.");
- }
- }
- catch (error) {
- alert("Error parsing GeoJSON file.");
- }
- };
- reader.readAsText(file);
- }
- };
- }
- const resizeButton = document.getElementById('resize-button');
- if (resizeButton) {
- resizeButton.onclick = () => {
- resizingEnabled = !resizingEnabled;
- resizeButton.classList.toggle('active', resizingEnabled);
- const flags = {
- polygon: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- linestring: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- rectangle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- circle: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- freehand: { feature: { draggable: true, coordinates: { resizable: resizingEnabled ? 'center' : undefined, draggable: !resizingEnabled } } },
- };
- console.log("Updating flags:", flags);
- draw.updateModeOptions('select', { flags });
- };
- }
- const deleteSelectedButton = document.getElementById('delete-selected-button');
- if (deleteSelectedButton) {
- deleteSelectedButton.onclick = () => {
- if (selectedFeatureId) {
- draw.removeFeatures([selectedFeatureId]);
- }
- else {
- const features = draw.getSnapshot();
- if (features.length > 0) {
- const lastFeature = features[features.length - 1];
- if (lastFeature.id) {
- draw.removeFeatures([lastFeature.id]);
- }
- }
- }
- };
- }
- const undoButton = document.getElementById('undo-button');
- if (undoButton) {
- undoButton.onclick = () => {
- if (history.length > 1) {
- redoHistory.push(history.pop());
- const snapshotToRestore = history[history.length - 1];
- console.log("Restoring snapshot (undo):", snapshotToRestore);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshotToRestore);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- const redoButton = document.getElementById('redo-button');
- if (redoButton) {
- redoButton.onclick = () => {
- if (redoHistory.length > 0) {
- const snapshot = redoHistory.pop();
- console.log("Restoring snapshot (redo):", snapshot);
- history.push(snapshot);
- isRestoring = true;
- draw.clear();
- draw.addFeatures(snapshot);
- setTimeout(() => { isRestoring = false; }, 0);
- }
- };
- }
- });
- function rotateFeature(feature, angle) {
- const newFeature = JSON.parse(JSON.stringify(feature));
- const coordinates = newFeature.geometry.coordinates;
- const center = getCenter(coordinates);
- const rotatedCoordinates = coordinates.map(ring => {
- return ring.map(point => {
- const x = point[0] - center[0];
- const y = point[1] - center[1];
- const newX = x * Math.cos(angle * Math.PI / 180) - y * Math.sin(angle * Math.PI / 180);
- const newY = x * Math.sin(angle * Math.PI / 180) + y * Math.cos(angle * Math.PI / 180);
- return [newX + center[0], newY + center[1]];
- });
- });
- newFeature.geometry.coordinates = rotatedCoordinates;
- return newFeature;
- }
- function getCenter(coordinates) {
- let x = 0;
- let y = 0;
- let count = 0;
- coordinates.forEach(ring => {
- ring.forEach(point => {
- x += point[0];
- y += point[1];
- count++;
- });
- });
- return [x / count, y / count];
- }
- document.addEventListener('keydown', (event) => {
- if (event.key === 'r' && selectedFeatureId) {
- const features = draw.getSnapshot();
- const selectedFeature = features.find(f => f.id === selectedFeatureId);
- if (selectedFeature) {
- const newFeature = rotateFeature(selectedFeature, 15);
- draw.addFeatures([newFeature]);
- }
- }
- });
- });
- }
- catch (e) {
- console.error("Error loading Google Maps API:", e);
- }
-}).catch(e => {
- console.error("Error loading Google Maps API:", e);
-});
-
diff --git a/dist/samples/map-projection-simple/app/.eslintsrc.json b/dist/samples/map-projection-simple/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/map-projection-simple/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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
deleted file mode 100644
index c01101153..000000000
--- a/dist/samples/map-projection-simple/app/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Google Maps JavaScript Sample
-
-## map-projection-simple
-
-The map-projection-simple sample demonstrates a simple example of how to use map projections.
-
-Follow these instructions to set up and run map-projection-simple sample on your local computer.
-
-## 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
deleted file mode 100644
index c334929fa..000000000
--- a/dist/samples/map-projection-simple/app/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
diff --git a/dist/samples/place-autocomplete-data-simple/app/index.ts b/dist/samples/place-autocomplete-data-simple/app/index.ts
deleted file mode 100644
index 3d9c9d10f..000000000
--- a/dist/samples/place-autocomplete-data-simple/app/index.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_autocomplete_data_simple]
-async function init() {
- const { Place, AutocompleteSessionToken, AutocompleteSuggestion } =
- (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
-
- // [START maps_place_autocomplete_data_simple_request]
- // Add an initial request body.
- // [START maps_place_autocomplete_data_simple_request_body]
- let request = {
- input: 'Tadi',
- locationRestriction: {
- west: -122.44,
- north: 37.8,
- east: -122.39,
- south: 37.78,
- },
- origin: { lat: 37.7893, lng: -122.4039 },
- includedPrimaryTypes: ['restaurant'],
- language: 'en-US',
- region: 'us',
- };
- // [END maps_place_autocomplete_data_simple_request_body]
-
- // [START maps_place_autocomplete_data_simple_token]
- // Create a session token.
- const token = new AutocompleteSessionToken();
- // Add the token to the request.
- // @ts-ignore
- request.sessionToken = token;
- // [END maps_place_autocomplete_data_simple_token]
- // [END maps_place_autocomplete_data_simple_request]
- // [START maps_place_autocomplete_data_simple_get_suggestions]
- // Fetch autocomplete suggestions.
- const { suggestions } =
- await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
-
- const title = document.getElementById('title') as HTMLElement;
- title.appendChild(
- document.createTextNode(
- 'Query predictions for "' + request.input + '":'
- )
- );
-
- const resultsElement = document.getElementById('results') as HTMLElement;
-
- for (let suggestion of suggestions) {
- const placePrediction = suggestion.placePrediction;
-
- // Create a new list element.
- const listItem = document.createElement('li');
-
- listItem.appendChild(
- document.createTextNode(placePrediction!.text.toString())
- );
- resultsElement.appendChild(listItem);
- }
- // [END maps_place_autocomplete_data_simple_get_suggestions]
-
- // [START maps_place_autocomplete_data_simple_prediction]
- let place = suggestions[0].placePrediction!.toPlace(); // Get first predicted place.
- // [START maps_place_autocomplete_data_simple_fetch]
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress'],
- });
- // [END maps_place_autocomplete_data_simple_fetch]
-
- const placeInfo = document.getElementById('prediction') as HTMLElement;
- placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
- // [END maps_place_autocomplete_data_simple_prediction]
-}
-
-init();
-// [END maps_place_autocomplete_data_simple]
diff --git a/dist/samples/place-autocomplete-data-simple/app/package.json b/dist/samples/place-autocomplete-data-simple/app/package.json
deleted file mode 100644
index 8816dec14..000000000
--- a/dist/samples/place-autocomplete-data-simple/app/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "@js-api-samples/place-autocomplete-data-simple",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh place-autocomplete-data-simple && bash ../app.sh place-autocomplete-data-simple && bash ../docs.sh place-autocomplete-data-simple && npm run build:vite --workspace=. && bash ../dist.sh place-autocomplete-data-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/place-autocomplete-data-simple/app/style.css b/dist/samples/place-autocomplete-data-simple/app/style.css
deleted file mode 100644
index d1c5da305..000000000
--- a/dist/samples/place-autocomplete-data-simple/app/style.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_autocomplete_data_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;
-}
-
-/* [END maps_place_autocomplete_data_simple] */
diff --git a/dist/samples/place-autocomplete-data-simple/app/tsconfig.json b/dist/samples/place-autocomplete-data-simple/app/tsconfig.json
deleted file mode 100644
index 366aabb04..000000000
--- a/dist/samples/place-autocomplete-data-simple/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "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/place-autocomplete-data-simple/dist/assets/index-By55CHJw.js b/dist/samples/place-autocomplete-data-simple/dist/assets/index-By55CHJw.js
deleted file mode 100644
index 85c388af4..000000000
--- a/dist/samples/place-autocomplete-data-simple/dist/assets/index-By55CHJw.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))o(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const r of t.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&o(r)}).observe(document,{childList:!0,subtree:!0});function i(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 o(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();async function f(){const{Place:l,AutocompleteSessionToken:n,AutocompleteSuggestion:i}=await google.maps.importLibrary("places");let o={input:"Tadi",locationRestriction:{west:-122.44,north:37.8,east:-122.39,south:37.78},origin:{lat:37.7893,lng:-122.4039},includedPrimaryTypes:["restaurant"],language:"en-US",region:"us"};const e=new n;o.sessionToken=e;const{suggestions:t}=await i.fetchAutocompleteSuggestions(o);document.getElementById("title").appendChild(document.createTextNode('Query predictions for "'+o.input+'":'));const d=document.getElementById("results");for(let u of t){const p=u.placePrediction,c=document.createElement("li");c.appendChild(document.createTextNode(p.text.toString())),d.appendChild(c)}let s=t[0].placePrediction.toPlace();await s.fetchFields({fields:["displayName","formattedAddress"]});const a=document.getElementById("prediction");a.textContent=`First predicted place: ${s.displayName}: ${s.formattedAddress}`}f();
diff --git a/dist/samples/place-autocomplete-data-simple/dist/assets/index-DWepjxzn.css b/dist/samples/place-autocomplete-data-simple/dist/assets/index-DWepjxzn.css
deleted file mode 100644
index c49b8a3f3..000000000
--- a/dist/samples/place-autocomplete-data-simple/dist/assets/index-DWepjxzn.css
+++ /dev/null
@@ -1 +0,0 @@
-#map{height:100%}html,body{height:100%;margin:0;padding:0}
diff --git a/dist/samples/place-autocomplete-data-simple/dist/index.html b/dist/samples/place-autocomplete-data-simple/dist/index.html
deleted file mode 100644
index 4292c61a7..000000000
--- a/dist/samples/place-autocomplete-data-simple/dist/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
- -
-
-
-
-
diff --git a/dist/samples/place-autocomplete-data-simple/dist/powered_by_google_on_white.png b/dist/samples/place-autocomplete-data-simple/dist/powered_by_google_on_white.png
deleted file mode 100644
index 4d2c66933..000000000
Binary files a/dist/samples/place-autocomplete-data-simple/dist/powered_by_google_on_white.png and /dev/null differ
diff --git a/dist/samples/place-autocomplete-data-simple/docs/index.html b/dist/samples/place-autocomplete-data-simple/docs/index.html
deleted file mode 100644
index 399044fd2..000000000
--- a/dist/samples/place-autocomplete-data-simple/docs/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
- -
-
-
-
-
diff --git a/dist/samples/place-autocomplete-data-simple/docs/index.js b/dist/samples/place-autocomplete-data-simple/docs/index.js
deleted file mode 100644
index 7709d8847..000000000
--- a/dist/samples/place-autocomplete-data-simple/docs/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_place_autocomplete_data_simple]
-async function init() {
- const { Place, AutocompleteSessionToken, AutocompleteSuggestion } = (await google.maps.importLibrary('places'));
- // [START maps_place_autocomplete_data_simple_request]
- // Add an initial request body.
- // [START maps_place_autocomplete_data_simple_request_body]
- let request = {
- input: 'Tadi',
- locationRestriction: {
- west: -122.44,
- north: 37.8,
- east: -122.39,
- south: 37.78,
- },
- origin: { lat: 37.7893, lng: -122.4039 },
- includedPrimaryTypes: ['restaurant'],
- language: 'en-US',
- region: 'us',
- };
- // [END maps_place_autocomplete_data_simple_request_body]
- // [START maps_place_autocomplete_data_simple_token]
- // Create a session token.
- const token = new AutocompleteSessionToken();
- // Add the token to the request.
- // @ts-ignore
- request.sessionToken = token;
- // [END maps_place_autocomplete_data_simple_token]
- // [END maps_place_autocomplete_data_simple_request]
- // [START maps_place_autocomplete_data_simple_get_suggestions]
- // Fetch autocomplete suggestions.
- const { suggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
- const title = document.getElementById('title');
- title.appendChild(document.createTextNode('Query predictions for "' + request.input + '":'));
- const resultsElement = document.getElementById('results');
- for (let suggestion of suggestions) {
- const placePrediction = suggestion.placePrediction;
- // Create a new list element.
- const listItem = document.createElement('li');
- listItem.appendChild(document.createTextNode(placePrediction.text.toString()));
- resultsElement.appendChild(listItem);
- }
- // [END maps_place_autocomplete_data_simple_get_suggestions]
- // [START maps_place_autocomplete_data_simple_prediction]
- let place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
- // [START maps_place_autocomplete_data_simple_fetch]
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress'],
- });
- // [END maps_place_autocomplete_data_simple_fetch]
- const placeInfo = document.getElementById('prediction');
- placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
- // [END maps_place_autocomplete_data_simple_prediction]
-}
-init();
-// [END maps_place_autocomplete_data_simple]
diff --git a/dist/samples/place-autocomplete-data-simple/docs/index.ts b/dist/samples/place-autocomplete-data-simple/docs/index.ts
deleted file mode 100644
index 3d9c9d10f..000000000
--- a/dist/samples/place-autocomplete-data-simple/docs/index.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_autocomplete_data_simple]
-async function init() {
- const { Place, AutocompleteSessionToken, AutocompleteSuggestion } =
- (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
-
- // [START maps_place_autocomplete_data_simple_request]
- // Add an initial request body.
- // [START maps_place_autocomplete_data_simple_request_body]
- let request = {
- input: 'Tadi',
- locationRestriction: {
- west: -122.44,
- north: 37.8,
- east: -122.39,
- south: 37.78,
- },
- origin: { lat: 37.7893, lng: -122.4039 },
- includedPrimaryTypes: ['restaurant'],
- language: 'en-US',
- region: 'us',
- };
- // [END maps_place_autocomplete_data_simple_request_body]
-
- // [START maps_place_autocomplete_data_simple_token]
- // Create a session token.
- const token = new AutocompleteSessionToken();
- // Add the token to the request.
- // @ts-ignore
- request.sessionToken = token;
- // [END maps_place_autocomplete_data_simple_token]
- // [END maps_place_autocomplete_data_simple_request]
- // [START maps_place_autocomplete_data_simple_get_suggestions]
- // Fetch autocomplete suggestions.
- const { suggestions } =
- await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
-
- const title = document.getElementById('title') as HTMLElement;
- title.appendChild(
- document.createTextNode(
- 'Query predictions for "' + request.input + '":'
- )
- );
-
- const resultsElement = document.getElementById('results') as HTMLElement;
-
- for (let suggestion of suggestions) {
- const placePrediction = suggestion.placePrediction;
-
- // Create a new list element.
- const listItem = document.createElement('li');
-
- listItem.appendChild(
- document.createTextNode(placePrediction!.text.toString())
- );
- resultsElement.appendChild(listItem);
- }
- // [END maps_place_autocomplete_data_simple_get_suggestions]
-
- // [START maps_place_autocomplete_data_simple_prediction]
- let place = suggestions[0].placePrediction!.toPlace(); // Get first predicted place.
- // [START maps_place_autocomplete_data_simple_fetch]
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress'],
- });
- // [END maps_place_autocomplete_data_simple_fetch]
-
- const placeInfo = document.getElementById('prediction') as HTMLElement;
- placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
- // [END maps_place_autocomplete_data_simple_prediction]
-}
-
-init();
-// [END maps_place_autocomplete_data_simple]
diff --git a/dist/samples/place-autocomplete-data-simple/docs/powered_by_google_on_white.png b/dist/samples/place-autocomplete-data-simple/docs/powered_by_google_on_white.png
deleted file mode 100644
index 4d2c66933..000000000
Binary files a/dist/samples/place-autocomplete-data-simple/docs/powered_by_google_on_white.png and /dev/null differ
diff --git a/dist/samples/place-autocomplete-data-simple/docs/style.css b/dist/samples/place-autocomplete-data-simple/docs/style.css
deleted file mode 100644
index d1c5da305..000000000
--- a/dist/samples/place-autocomplete-data-simple/docs/style.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_autocomplete_data_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;
-}
-
-/* [END maps_place_autocomplete_data_simple] */
diff --git a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.css b/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.css
deleted file mode 100644
index effa90679..000000000
--- a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @license
- * Copyright 2025 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;
-}
-
-
diff --git a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.details b/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.details
deleted file mode 100644
index 4135ed3c3..000000000
--- a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: place-autocomplete-data-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/place-autocomplete-data-simple/jsfiddle/demo.html b/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.html
deleted file mode 100644
index 26e638190..000000000
--- a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
- -
-
-
-
-
diff --git a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.js b/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.js
deleted file mode 100644
index f31fcb12c..000000000
--- a/dist/samples/place-autocomplete-data-simple/jsfiddle/demo.js
+++ /dev/null
@@ -1,61 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-async function init() {
- const { Place, AutocompleteSessionToken, AutocompleteSuggestion } = (await google.maps.importLibrary('places'));
-
- // Add an initial request body.
-
- let request = {
- input: 'Tadi',
- locationRestriction: {
- west: -122.44,
- north: 37.8,
- east: -122.39,
- south: 37.78,
- },
- origin: { lat: 37.7893, lng: -122.4039 },
- includedPrimaryTypes: ['restaurant'],
- language: 'en-US',
- region: 'us',
- };
-
-
- // Create a session token.
- const token = new AutocompleteSessionToken();
- // Add the token to the request.
- // @ts-ignore
- request.sessionToken = token;
-
-
-
- // Fetch autocomplete suggestions.
- const { suggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
- const title = document.getElementById('title');
- title.appendChild(document.createTextNode('Query predictions for "' + request.input + '":'));
- const resultsElement = document.getElementById('results');
- for (let suggestion of suggestions) {
- const placePrediction = suggestion.placePrediction;
- // Create a new list element.
- const listItem = document.createElement('li');
- listItem.appendChild(document.createTextNode(placePrediction.text.toString()));
- resultsElement.appendChild(listItem);
- }
-
-
- let place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
-
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress'],
- });
-
- const placeInfo = document.getElementById('prediction');
- placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
-
-}
-init();
-
diff --git a/dist/samples/place-autocomplete-element/app/.eslintsrc.json b/dist/samples/place-autocomplete-element/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/place-autocomplete-element/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/place-autocomplete-element/app/README.md b/dist/samples/place-autocomplete-element/app/README.md
deleted file mode 100644
index 0128ae06a..000000000
--- a/dist/samples/place-autocomplete-element/app/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Google Maps JavaScript Sample
-
-## place-autocomplete-element
-
-The place-autocomplete-element sample demonstrates how to use the Place Autocomplete element.
-
-Follow these instructions to set up and run place-autocomplete-element sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-First `cd` to the folder for the sample to run, then:
-
-`npm start`
-
-### Build an individual example
-
-From `samples/`:
-
-`npm run build --workspace=place-autocomplete-element/`
-
-### Build all of the examples.
-
-From `samples/`:
-
-`npm run build-all`
-
-## 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/place-autocomplete-element/app/index.html b/dist/samples/place-autocomplete-element/app/index.html
deleted file mode 100644
index f9a26b717..000000000
--- a/dist/samples/place-autocomplete-element/app/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
-
- Search for a place here:
- - - - - - diff --git a/dist/samples/place-autocomplete-element/app/index.ts b/dist/samples/place-autocomplete-element/app/index.ts deleted file mode 100644 index 46b6940e4..000000000 --- a/dist/samples/place-autocomplete-element/app/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ - -// [START maps_place_autocomplete_element] -async function initMap(): PromiseSearch for a place here:
- - - - - - diff --git a/dist/samples/place-autocomplete-element/docs/index.html b/dist/samples/place-autocomplete-element/docs/index.html deleted file mode 100644 index f9a26b717..000000000 --- a/dist/samples/place-autocomplete-element/docs/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - -Search for a place here:
- - - - - - diff --git a/dist/samples/place-autocomplete-element/docs/index.js b/dist/samples/place-autocomplete-element/docs/index.js deleted file mode 100644 index 312b5a6f8..000000000 --- a/dist/samples/place-autocomplete-element/docs/index.js +++ /dev/null @@ -1,36 +0,0 @@ -"use strict"; -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ -// [START maps_place_autocomplete_element] -async function initMap() { - // [START maps_place_autocomplete_element_add] - // Request needed libraries. - (await google.maps.importLibrary('places')); - // Create the input HTML element, and append it. - const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); - document.body.appendChild(placeAutocomplete); - // [END maps_place_autocomplete_element_add] - // Inject HTML UI. - const selectedPlaceTitle = document.createElement('p'); - selectedPlaceTitle.textContent = ''; - document.body.appendChild(selectedPlaceTitle); - const selectedPlaceInfo = document.createElement('pre'); - selectedPlaceInfo.textContent = ''; - document.body.appendChild(selectedPlaceInfo); - // [START maps_place_autocomplete_element_listener] - // Add the gmp-placeselect listener, and display the results. - //prettier-ignore - //@ts-ignore - placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { - const place = placePrediction.toPlace(); - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - selectedPlaceTitle.textContent = 'Selected Place:'; - selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2); - }); - // [END maps_place_autocomplete_element_listener] -} -initMap(); -// [END maps_place_autocomplete_element] diff --git a/dist/samples/place-autocomplete-element/docs/index.ts b/dist/samples/place-autocomplete-element/docs/index.ts deleted file mode 100644 index 46b6940e4..000000000 --- a/dist/samples/place-autocomplete-element/docs/index.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ - -// [START maps_place_autocomplete_element] -async function initMap(): PromiseSearch for a place here:
- - - - - - diff --git a/dist/samples/place-autocomplete-element/jsfiddle/demo.js b/dist/samples/place-autocomplete-element/jsfiddle/demo.js deleted file mode 100644 index b82004ff0..000000000 --- a/dist/samples/place-autocomplete-element/jsfiddle/demo.js +++ /dev/null @@ -1,36 +0,0 @@ -"use strict"; -/* - * @license - * Copyright 2025 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */ - -async function initMap() { - - // Request needed libraries. - (await google.maps.importLibrary('places')); - // Create the input HTML element, and append it. - const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({}); - document.body.appendChild(placeAutocomplete); - - // Inject HTML UI. - const selectedPlaceTitle = document.createElement('p'); - selectedPlaceTitle.textContent = ''; - document.body.appendChild(selectedPlaceTitle); - const selectedPlaceInfo = document.createElement('pre'); - selectedPlaceInfo.textContent = ''; - document.body.appendChild(selectedPlaceInfo); - - // Add the gmp-placeselect listener, and display the results. - //prettier-ignore - //@ts-ignore - placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => { - const place = placePrediction.toPlace(); - await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); - selectedPlaceTitle.textContent = 'Selected Place:'; - selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2); - }); - -} -initMap(); - diff --git a/dist/samples/place-autocomplete-map/app/.eslintsrc.json b/dist/samples/place-autocomplete-map/app/.eslintsrc.json deleted file mode 100644 index 4c44dab04..000000000 --- a/dist/samples/place-autocomplete-map/app/.eslintsrc.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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/place-autocomplete-map/app/README.md b/dist/samples/place-autocomplete-map/app/README.md deleted file mode 100644 index 7dfe11b5c..000000000 --- a/dist/samples/place-autocomplete-map/app/README.md +++ /dev/null @@ -1,36 +0,0 @@ -# Google Maps JavaScript Sample - -## place-autocomplete-map - -The place-autocomplete-map sample demonstrates how to use Place Autocomplete with a map. - -Follow these instructions to set up and run place-autocomplete-map sample on your local computer. - -## Setup - -### Before starting run: - -`npm i` - -### Run an example on a local web server - -First `cd` to the folder for the sample to run, then: - -`npm start` - -### Build an individual example - -From `samples/`: - -`npm run build --workspace=place-autocomplete-map/` - -### Build all of the examples. - -From `samples/`: - -`npm run build-all` - -## 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/place-autocomplete-map/app/index.html b/dist/samples/place-autocomplete-map/app/index.html deleted file mode 100644 index c14489126..000000000 --- a/dist/samples/place-autocomplete-map/app/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-photos/app/index.ts b/dist/samples/place-photos/app/index.ts
deleted file mode 100644
index 050b97266..000000000
--- a/dist/samples/place-photos/app/index.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_photos]
-async function init() {
- const { Place } = (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
-
- // Use a place ID to create a new Place instance.
- const place = new Place({
- id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
- });
-
- // Call fetchFields, passing the desired data fields.
- await place.fetchFields({
- fields: ['displayName', 'photos', 'editorialSummary'],
- });
-
- // Get the various HTML elements.
- const heading = document.getElementById('heading') as HTMLElement;
- const summary = document.getElementById('summary') as HTMLElement;
- const gallery = document.getElementById('gallery') as HTMLElement;
- const expandedImageDiv = document.getElementById(
- 'expanded-image'
- ) as HTMLElement;
-
- // Show the display name and summary for the place.
- heading.textContent = place.displayName as string;
- summary.textContent = place.editorialSummary as string;
-
- // Add photos to the gallery.
- place.photos?.forEach((photo) => {
- const altText = 'Photo of ' + place.displayName;
- const img = document.createElement('img');
- const imgButton = document.createElement('button');
- const expandedImage = document.createElement('img');
- img.src = photo?.getURI({ maxHeight: 380 });
- img.alt = altText;
- imgButton.addEventListener('click', (event) => {
- centerSelectedThumbnail(imgButton);
- event.preventDefault();
- expandedImage.src = img.src;
- expandedImage.alt = altText;
- expandedImageDiv.innerHTML = '';
- expandedImageDiv.appendChild(expandedImage);
- const attributionLabel = createAttribution(
- photo.authorAttributions[0]
- )!;
- expandedImageDiv.appendChild(attributionLabel);
- });
-
- imgButton.addEventListener('focus', () => {
- centerSelectedThumbnail(imgButton);
- });
-
- imgButton.appendChild(img);
- gallery.appendChild(imgButton);
- });
-
- // Display the first photo.
- if (place.photos && place.photos.length > 0) {
- const photo = place.photos[0];
- const img = document.createElement('img');
- img.alt = 'Photo of ' + place.displayName;
- img.src = photo.getURI();
- expandedImageDiv.appendChild(img);
-
- if (photo.authorAttributions && photo.authorAttributions.length > 0) {
- expandedImageDiv.appendChild(
- createAttribution(photo.authorAttributions[0])
- );
- }
- }
-
- // Helper function to create attribution DIV.
- function createAttribution(
- attribution: google.maps.places.AuthorAttribution
- ) {
- const attributionLabel = document.createElement('a');
- attributionLabel.classList.add('attribution-label');
- attributionLabel.textContent = attribution.displayName;
- attributionLabel.href = attribution.uri!;
- attributionLabel.target = '_blank';
- attributionLabel.rel = 'noopener noreferrer';
- return attributionLabel;
- }
-
- // Helper function to center the selected thumbnail in the gallery.
- function centerSelectedThumbnail(element: HTMLElement) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center',
- });
- }
-}
-
-init();
-// [END maps_place_photos]
diff --git a/dist/samples/place-photos/app/package.json b/dist/samples/place-photos/app/package.json
deleted file mode 100644
index 6b47f1c64..000000000
--- a/dist/samples/place-photos/app/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "name": "@js-api-samples/place-photos",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh place-photos && bash ../app.sh place-photos && bash ../docs.sh place-photos && npm run build:vite --workspace=. && bash ../dist.sh place-photos",
- "test": "tsc && npm run build:vite --workspace=.",
- "start": "tsc && vite build --base './' && vite",
- "build:vite": "vite build --base './'",
- "preview": "vite preview"
- }
-}
diff --git a/dist/samples/place-photos/app/style.css b/dist/samples/place-photos/app/style.css
deleted file mode 100644
index 2703d4262..000000000
--- a/dist/samples/place-photos/app/style.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_photos] */
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-#container {
- display: flex;
- border: 2px solid black;
- border-radius: 10px;
- padding: 10px;
- max-width: 950px;
- height: 100%;
- max-height: 400px;
- box-sizing: border-box;
-}
-
-.place-overview {
- width: 400px;
- height: 380px;
- overflow-x: auto;
- position: relative;
- margin-right: 20px;
-}
-
-#info {
- font-family: sans-serif;
- position: sticky;
- position: -webkit-sticky;
- left: 0;
- padding-bottom: 10px;
-}
-
-#heading {
- width: 500px;
- font-size: x-large;
- margin-bottom: 20px;
-}
-
-#summary {
- width: 100%;
-}
-
-#gallery {
- display: flex;
- padding-top: 10px;
-}
-
-#gallery img {
- width: 200px;
- height: 200px;
- margin: 10px;
- border-radius: 10px;
- cursor: pointer;
- object-fit: cover; /* fill the area without distorting the image */
-}
-
-#expanded-image {
- display: flex;
- height: 370px;
- overflow: hidden;
- background-color: #000;
- border-radius: 10px;
- margin: 0 auto;
-}
-
-.attribution-label {
- background-color: rgba(255, 255, 255, 0.7);
- font-size: 10px;
- font-family: sans-serif;
- margin: 2px;
- position: absolute;
-}
-
-button {
- display: flex;
- outline: none;
- border: none;
- padding: 0;
- background: none;
- cursor: pointer;
-}
-
-button:focus {
- border: 2px solid blue;
- border-radius: 10px;
-}
-
-/* [END maps_place_photos] */
diff --git a/dist/samples/place-photos/app/tsconfig.json b/dist/samples/place-photos/app/tsconfig.json
deleted file mode 100644
index 366aabb04..000000000
--- a/dist/samples/place-photos/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "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/place-photos/dist/assets/index-C4lA2gkl.js b/dist/samples/place-photos/dist/assets/index-C4lA2gkl.js
deleted file mode 100644
index 85248d86d..000000000
--- a/dist/samples/place-photos/dist/assets/index-C4lA2gkl.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))c(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const i of t.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&c(i)}).observe(document,{childList:!0,subtree:!0});function l(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 c(e){if(e.ep)return;e.ep=!0;const t=l(e);fetch(e.href,t)}})();async function h(){const{Place:u}=await google.maps.importLibrary("places"),n=new u({id:"ChIJydSuSkkUkFQRsqhB-cEtYnw"});await n.fetchFields({fields:["displayName","photos","editorialSummary"]});const l=document.getElementById("heading"),c=document.getElementById("summary"),e=document.getElementById("gallery"),t=document.getElementById("expanded-image");if(l.textContent=n.displayName,c.textContent=n.editorialSummary,n.photos?.forEach(r=>{const o="Photo of "+n.displayName,s=document.createElement("img"),a=document.createElement("button"),d=document.createElement("img");s.src=r?.getURI({maxHeight:380}),s.alt=o,a.addEventListener("click",p=>{m(a),p.preventDefault(),d.src=s.src,d.alt=o,t.innerHTML="",t.appendChild(d);const f=i(r.authorAttributions[0]);t.appendChild(f)}),a.addEventListener("focus",()=>{m(a)}),a.appendChild(s),e.appendChild(a)}),n.photos&&n.photos.length>0){const r=n.photos[0],o=document.createElement("img");o.alt="Photo of "+n.displayName,o.src=r.getURI(),t.appendChild(o),r.authorAttributions&&r.authorAttributions.length>0&&t.appendChild(i(r.authorAttributions[0]))}function i(r){const o=document.createElement("a");return o.classList.add("attribution-label"),o.textContent=r.displayName,o.href=r.uri,o.target="_blank",o.rel="noopener noreferrer",o}function m(r){r.scrollIntoView({behavior:"smooth",block:"center",inline:"center"})}}h();
diff --git a/dist/samples/place-photos/dist/assets/index-DauSJnBH.css b/dist/samples/place-photos/dist/assets/index-DauSJnBH.css
deleted file mode 100644
index f02b6ab88..000000000
--- a/dist/samples/place-photos/dist/assets/index-DauSJnBH.css
+++ /dev/null
@@ -1 +0,0 @@
-html,body{height:100%;margin:0;padding:0}#container{display:flex;border:2px solid black;border-radius:10px;padding:10px;max-width:950px;height:100%;max-height:400px;box-sizing:border-box}.place-overview{width:400px;height:380px;overflow-x:auto;position:relative;margin-right:20px}#info{font-family:sans-serif;position:sticky;position:-webkit-sticky;left:0;padding-bottom:10px}#heading{width:500px;font-size:x-large;margin-bottom:20px}#summary{width:100%}#gallery{display:flex;padding-top:10px}#gallery img{width:200px;height:200px;margin:10px;border-radius:10px;cursor:pointer;object-fit:cover}#expanded-image{display:flex;height:370px;overflow:hidden;background-color:#000;border-radius:10px;margin:0 auto}.attribution-label{background-color:#ffffffb3;font-size:10px;font-family:sans-serif;margin:2px;position:absolute}button{display:flex;outline:none;border:none;padding:0;background:none;cursor:pointer}button:focus{border:2px solid blue;border-radius:10px}
diff --git a/dist/samples/place-photos/dist/index.html b/dist/samples/place-photos/dist/index.html
deleted file mode 100644
index df4003034..000000000
--- a/dist/samples/place-photos/dist/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-photos/docs/index.html b/dist/samples/place-photos/docs/index.html
deleted file mode 100644
index 80cce7172..000000000
--- a/dist/samples/place-photos/docs/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-photos/docs/index.js b/dist/samples/place-photos/docs/index.js
deleted file mode 100644
index c276c86bb..000000000
--- a/dist/samples/place-photos/docs/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_place_photos]
-async function init() {
- const { Place } = (await google.maps.importLibrary('places'));
- // Use a place ID to create a new Place instance.
- const place = new Place({
- id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
- });
- // Call fetchFields, passing the desired data fields.
- await place.fetchFields({
- fields: ['displayName', 'photos', 'editorialSummary'],
- });
- // Get the various HTML elements.
- const heading = document.getElementById('heading');
- const summary = document.getElementById('summary');
- const gallery = document.getElementById('gallery');
- const expandedImageDiv = document.getElementById('expanded-image');
- // Show the display name and summary for the place.
- heading.textContent = place.displayName;
- summary.textContent = place.editorialSummary;
- // Add photos to the gallery.
- place.photos?.forEach((photo) => {
- const altText = 'Photo of ' + place.displayName;
- const img = document.createElement('img');
- const imgButton = document.createElement('button');
- const expandedImage = document.createElement('img');
- img.src = photo?.getURI({ maxHeight: 380 });
- img.alt = altText;
- imgButton.addEventListener('click', (event) => {
- centerSelectedThumbnail(imgButton);
- event.preventDefault();
- expandedImage.src = img.src;
- expandedImage.alt = altText;
- expandedImageDiv.innerHTML = '';
- expandedImageDiv.appendChild(expandedImage);
- const attributionLabel = createAttribution(photo.authorAttributions[0]);
- expandedImageDiv.appendChild(attributionLabel);
- });
- imgButton.addEventListener('focus', () => {
- centerSelectedThumbnail(imgButton);
- });
- imgButton.appendChild(img);
- gallery.appendChild(imgButton);
- });
- // Display the first photo.
- if (place.photos && place.photos.length > 0) {
- const photo = place.photos[0];
- const img = document.createElement('img');
- img.alt = 'Photo of ' + place.displayName;
- img.src = photo.getURI();
- expandedImageDiv.appendChild(img);
- if (photo.authorAttributions && photo.authorAttributions.length > 0) {
- expandedImageDiv.appendChild(createAttribution(photo.authorAttributions[0]));
- }
- }
- // Helper function to create attribution DIV.
- function createAttribution(attribution) {
- const attributionLabel = document.createElement('a');
- attributionLabel.classList.add('attribution-label');
- attributionLabel.textContent = attribution.displayName;
- attributionLabel.href = attribution.uri;
- attributionLabel.target = '_blank';
- attributionLabel.rel = 'noopener noreferrer';
- return attributionLabel;
- }
- // Helper function to center the selected thumbnail in the gallery.
- function centerSelectedThumbnail(element) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center',
- });
- }
-}
-init();
-// [END maps_place_photos]
diff --git a/dist/samples/place-photos/docs/index.ts b/dist/samples/place-photos/docs/index.ts
deleted file mode 100644
index 050b97266..000000000
--- a/dist/samples/place-photos/docs/index.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_photos]
-async function init() {
- const { Place } = (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
-
- // Use a place ID to create a new Place instance.
- const place = new Place({
- id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
- });
-
- // Call fetchFields, passing the desired data fields.
- await place.fetchFields({
- fields: ['displayName', 'photos', 'editorialSummary'],
- });
-
- // Get the various HTML elements.
- const heading = document.getElementById('heading') as HTMLElement;
- const summary = document.getElementById('summary') as HTMLElement;
- const gallery = document.getElementById('gallery') as HTMLElement;
- const expandedImageDiv = document.getElementById(
- 'expanded-image'
- ) as HTMLElement;
-
- // Show the display name and summary for the place.
- heading.textContent = place.displayName as string;
- summary.textContent = place.editorialSummary as string;
-
- // Add photos to the gallery.
- place.photos?.forEach((photo) => {
- const altText = 'Photo of ' + place.displayName;
- const img = document.createElement('img');
- const imgButton = document.createElement('button');
- const expandedImage = document.createElement('img');
- img.src = photo?.getURI({ maxHeight: 380 });
- img.alt = altText;
- imgButton.addEventListener('click', (event) => {
- centerSelectedThumbnail(imgButton);
- event.preventDefault();
- expandedImage.src = img.src;
- expandedImage.alt = altText;
- expandedImageDiv.innerHTML = '';
- expandedImageDiv.appendChild(expandedImage);
- const attributionLabel = createAttribution(
- photo.authorAttributions[0]
- )!;
- expandedImageDiv.appendChild(attributionLabel);
- });
-
- imgButton.addEventListener('focus', () => {
- centerSelectedThumbnail(imgButton);
- });
-
- imgButton.appendChild(img);
- gallery.appendChild(imgButton);
- });
-
- // Display the first photo.
- if (place.photos && place.photos.length > 0) {
- const photo = place.photos[0];
- const img = document.createElement('img');
- img.alt = 'Photo of ' + place.displayName;
- img.src = photo.getURI();
- expandedImageDiv.appendChild(img);
-
- if (photo.authorAttributions && photo.authorAttributions.length > 0) {
- expandedImageDiv.appendChild(
- createAttribution(photo.authorAttributions[0])
- );
- }
- }
-
- // Helper function to create attribution DIV.
- function createAttribution(
- attribution: google.maps.places.AuthorAttribution
- ) {
- const attributionLabel = document.createElement('a');
- attributionLabel.classList.add('attribution-label');
- attributionLabel.textContent = attribution.displayName;
- attributionLabel.href = attribution.uri!;
- attributionLabel.target = '_blank';
- attributionLabel.rel = 'noopener noreferrer';
- return attributionLabel;
- }
-
- // Helper function to center the selected thumbnail in the gallery.
- function centerSelectedThumbnail(element: HTMLElement) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center',
- });
- }
-}
-
-init();
-// [END maps_place_photos]
diff --git a/dist/samples/place-photos/docs/style.css b/dist/samples/place-photos/docs/style.css
deleted file mode 100644
index 2703d4262..000000000
--- a/dist/samples/place-photos/docs/style.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_photos] */
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-#container {
- display: flex;
- border: 2px solid black;
- border-radius: 10px;
- padding: 10px;
- max-width: 950px;
- height: 100%;
- max-height: 400px;
- box-sizing: border-box;
-}
-
-.place-overview {
- width: 400px;
- height: 380px;
- overflow-x: auto;
- position: relative;
- margin-right: 20px;
-}
-
-#info {
- font-family: sans-serif;
- position: sticky;
- position: -webkit-sticky;
- left: 0;
- padding-bottom: 10px;
-}
-
-#heading {
- width: 500px;
- font-size: x-large;
- margin-bottom: 20px;
-}
-
-#summary {
- width: 100%;
-}
-
-#gallery {
- display: flex;
- padding-top: 10px;
-}
-
-#gallery img {
- width: 200px;
- height: 200px;
- margin: 10px;
- border-radius: 10px;
- cursor: pointer;
- object-fit: cover; /* fill the area without distorting the image */
-}
-
-#expanded-image {
- display: flex;
- height: 370px;
- overflow: hidden;
- background-color: #000;
- border-radius: 10px;
- margin: 0 auto;
-}
-
-.attribution-label {
- background-color: rgba(255, 255, 255, 0.7);
- font-size: 10px;
- font-family: sans-serif;
- margin: 2px;
- position: absolute;
-}
-
-button {
- display: flex;
- outline: none;
- border: none;
- padding: 0;
- background: none;
- cursor: pointer;
-}
-
-button:focus {
- border: 2px solid blue;
- border-radius: 10px;
-}
-
-/* [END maps_place_photos] */
diff --git a/dist/samples/place-photos/jsfiddle/demo.css b/dist/samples/place-photos/jsfiddle/demo.css
deleted file mode 100644
index f9c11747d..000000000
--- a/dist/samples/place-photos/jsfiddle/demo.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/*
- * Optional: Makes the sample page fill the window.
- */
-html,
-body {
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-#container {
- display: flex;
- border: 2px solid black;
- border-radius: 10px;
- padding: 10px;
- max-width: 950px;
- height: 100%;
- max-height: 400px;
- box-sizing: border-box;
-}
-
-.place-overview {
- width: 400px;
- height: 380px;
- overflow-x: auto;
- position: relative;
- margin-right: 20px;
-}
-
-#info {
- font-family: sans-serif;
- position: sticky;
- position: -webkit-sticky;
- left: 0;
- padding-bottom: 10px;
-}
-
-#heading {
- width: 500px;
- font-size: x-large;
- margin-bottom: 20px;
-}
-
-#summary {
- width: 100%;
-}
-
-#gallery {
- display: flex;
- padding-top: 10px;
-}
-
-#gallery img {
- width: 200px;
- height: 200px;
- margin: 10px;
- border-radius: 10px;
- cursor: pointer;
- object-fit: cover; /* fill the area without distorting the image */
-}
-
-#expanded-image {
- display: flex;
- height: 370px;
- overflow: hidden;
- background-color: #000;
- border-radius: 10px;
- margin: 0 auto;
-}
-
-.attribution-label {
- background-color: rgba(255, 255, 255, 0.7);
- font-size: 10px;
- font-family: sans-serif;
- margin: 2px;
- position: absolute;
-}
-
-button {
- display: flex;
- outline: none;
- border: none;
- padding: 0;
- background: none;
- cursor: pointer;
-}
-
-button:focus {
- border: 2px solid blue;
- border-radius: 10px;
-}
-
-
diff --git a/dist/samples/place-photos/jsfiddle/demo.details b/dist/samples/place-photos/jsfiddle/demo.details
deleted file mode 100644
index 618cbe430..000000000
--- a/dist/samples/place-photos/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: place-photos
-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/place-photos/jsfiddle/demo.html b/dist/samples/place-photos/jsfiddle/demo.html
deleted file mode 100644
index 3612175e8..000000000
--- a/dist/samples/place-photos/jsfiddle/demo.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-photos/jsfiddle/demo.js b/dist/samples/place-photos/jsfiddle/demo.js
deleted file mode 100644
index d6774c05a..000000000
--- a/dist/samples/place-photos/jsfiddle/demo.js
+++ /dev/null
@@ -1,81 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2026 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-async function init() {
- const { Place } = (await google.maps.importLibrary('places'));
- // Use a place ID to create a new Place instance.
- const place = new Place({
- id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
- });
- // Call fetchFields, passing the desired data fields.
- await place.fetchFields({
- fields: ['displayName', 'photos', 'editorialSummary'],
- });
- // Get the various HTML elements.
- const heading = document.getElementById('heading');
- const summary = document.getElementById('summary');
- const gallery = document.getElementById('gallery');
- const expandedImageDiv = document.getElementById('expanded-image');
- // Show the display name and summary for the place.
- heading.textContent = place.displayName;
- summary.textContent = place.editorialSummary;
- // Add photos to the gallery.
- place.photos?.forEach((photo) => {
- const altText = 'Photo of ' + place.displayName;
- const img = document.createElement('img');
- const imgButton = document.createElement('button');
- const expandedImage = document.createElement('img');
- img.src = photo?.getURI({ maxHeight: 380 });
- img.alt = altText;
- imgButton.addEventListener('click', (event) => {
- centerSelectedThumbnail(imgButton);
- event.preventDefault();
- expandedImage.src = img.src;
- expandedImage.alt = altText;
- expandedImageDiv.innerHTML = '';
- expandedImageDiv.appendChild(expandedImage);
- const attributionLabel = createAttribution(photo.authorAttributions[0]);
- expandedImageDiv.appendChild(attributionLabel);
- });
- imgButton.addEventListener('focus', () => {
- centerSelectedThumbnail(imgButton);
- });
- imgButton.appendChild(img);
- gallery.appendChild(imgButton);
- });
- // Display the first photo.
- if (place.photos && place.photos.length > 0) {
- const photo = place.photos[0];
- const img = document.createElement('img');
- img.alt = 'Photo of ' + place.displayName;
- img.src = photo.getURI();
- expandedImageDiv.appendChild(img);
- if (photo.authorAttributions && photo.authorAttributions.length > 0) {
- expandedImageDiv.appendChild(createAttribution(photo.authorAttributions[0]));
- }
- }
- // Helper function to create attribution DIV.
- function createAttribution(attribution) {
- const attributionLabel = document.createElement('a');
- attributionLabel.classList.add('attribution-label');
- attributionLabel.textContent = attribution.displayName;
- attributionLabel.href = attribution.uri;
- attributionLabel.target = '_blank';
- attributionLabel.rel = 'noopener noreferrer';
- return attributionLabel;
- }
- // Helper function to center the selected thumbnail in the gallery.
- function centerSelectedThumbnail(element) {
- element.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center',
- });
- }
-}
-init();
-
diff --git a/dist/samples/place-reviews/app/.eslintsrc.json b/dist/samples/place-reviews/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/place-reviews/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/place-reviews/app/README.md b/dist/samples/place-reviews/app/README.md
deleted file mode 100644
index 8b585a15c..000000000
--- a/dist/samples/place-reviews/app/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Google Maps JavaScript Sample
-
-## place-reviews
-
-Demonstrates retrieving place reviews.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-`cd samples/place-reviews`
-`npm start`
-
-### Build an individual example
-
-`cd samples/place-reviews`
-`npm run build`
-
-From 'samples':
-
-`npm run build --workspace=place-reviews/`
-
-### Build all of the examples.
-
-From 'samples':
-
-`npm run build-all`
-
-### Run lint to check for problems
-
-`cd samples/place-reviews`
-`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/place-reviews/app/index.html b/dist/samples/place-reviews/app/index.html
deleted file mode 100644
index 6a89aec08..000000000
--- a/dist/samples/place-reviews/app/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-text-search/app/index.ts b/dist/samples/place-text-search/app/index.ts
deleted file mode 100644
index 2b1f2e236..000000000
--- a/dist/samples/place-text-search/app/index.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_text_search]
-let map;
-let markers = {};
-let infoWindow;
-
-async function initMap() {
- const { Map, InfoWindow } = (await google.maps.importLibrary(
- 'maps'
- )) as google.maps.MapsLibrary;
-
- const center = { lat: 37.4161493, lng: -122.0812166 };
- map = new Map(document.getElementById('map') as HTMLElement, {
- center: center,
- zoom: 11,
- mapTypeControl: false,
- mapId: 'DEMO_MAP_ID',
- });
-
- const textInput = document.getElementById('text-input') as HTMLInputElement;
- const textInputButton = document.getElementById(
- 'text-input-button'
- ) as HTMLButtonElement;
- const card = document.getElementById('text-input-card') as HTMLElement;
- map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
-
- textInputButton.addEventListener('click', () => {
- findPlaces(textInput.value);
- });
-
- textInput.addEventListener('keydown', (event) => {
- if (event.key === 'Enter') {
- findPlaces(textInput.value);
- }
- });
-
- infoWindow = new google.maps.InfoWindow();
-}
-
-async function findPlaces(query) {
- const { Place } = (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
- const { AdvancedMarkerElement } = (await google.maps.importLibrary(
- 'marker'
- )) as google.maps.MarkerLibrary;
- // [START maps_place_text_search_request]
- const request = {
- textQuery: query,
- fields: ['displayName', 'location', 'businessStatus'],
- includedType: '', // Restrict query to a specific type (leave blank for any).
- useStrictTypeFiltering: true,
- locationBias: map.center,
- isOpenNow: true,
- language: 'en-US',
- maxResultCount: 8,
- minRating: 1, // Specify a minimum rating.
- region: 'us',
- };
-
- const { places } = await Place.searchByText(request);
- // [END maps_place_text_search_request]
-
- if (places.length) {
- const { LatLngBounds } = (await google.maps.importLibrary(
- 'core'
- )) as google.maps.CoreLibrary;
- const bounds = new LatLngBounds();
-
- // First remove all existing markers.
- for (const id in markers) {
- markers[id].map = null;
- }
- markers = {};
-
- // Loop through and get all the results.
- places.forEach((place) => {
- const marker = new AdvancedMarkerElement({
- map,
- position: place.location,
- title: place.displayName,
- });
- markers[place.id] = marker;
-
- marker.addListener('gmp-click', () => {
- map.panTo(place.location);
- updateInfoWindow(place.displayName, place.id, marker);
- });
-
- if (place.location != null) {
- bounds.extend(place.location);
- }
- });
-
- map.fitBounds(bounds);
- } else {
- console.log('No results');
- }
-}
-
-// Helper function to create an info window.
-async function updateInfoWindow(title, content, anchor) {
- infoWindow.setContent(content);
- infoWindow.setHeaderContent(title);
- infoWindow.open({
- map,
- anchor,
- shouldFocus: false,
- });
-}
-
-initMap();
-// [END maps_place_text_search]
diff --git a/dist/samples/place-text-search/app/package.json b/dist/samples/place-text-search/app/package.json
deleted file mode 100644
index 88fdfcb47..000000000
--- a/dist/samples/place-text-search/app/package.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "name": "@js-api-samples/place-text-search",
- "version": "1.0.0",
- "scripts": {
- "build": "tsc && bash ../jsfiddle.sh place-text-search && bash ../app.sh place-text-search && bash ../docs.sh place-text-search && npm run build:vite --workspace=. && bash ../dist.sh place-text-search",
- "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/place-text-search/app/style.css b/dist/samples/place-text-search/app/style.css
deleted file mode 100644
index 18ccc553a..000000000
--- a/dist/samples/place-text-search/app/style.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_text_search] */
-/*
- * 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;
-}
-
-#text-input-card {
- width: 25%;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- margin: 10px;
- padding: 5px;
- font-family: Roboto, sans-serif;
- font-size: large;
- font-weight: bold;
-}
-
-#text-input {
- width: 100%;
- padding: 10px;
- margin: 0;
- box-sizing: border-box;
-}
-
-#text-input-button {
- display: inline-block;
- margin-top: 0.5rem;
- width: auto;
- padding: 0.6rem 0.75rem;
- font-size: 0.875rem;
- font-weight: 500;
- color: #fff;
- background-color: #2563eb;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- transition: background-color 0.15s ease-in-out;
- text-align: center;
-}
-
-/* [END maps_place_text_search] */
diff --git a/dist/samples/place-text-search/app/tsconfig.json b/dist/samples/place-text-search/app/tsconfig.json
deleted file mode 100644
index 366aabb04..000000000
--- a/dist/samples/place-text-search/app/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "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/place-text-search/dist/assets/index-D7_52T9M.css b/dist/samples/place-text-search/dist/assets/index-D7_52T9M.css
deleted file mode 100644
index 1fa094059..000000000
--- a/dist/samples/place-text-search/dist/assets/index-D7_52T9M.css
+++ /dev/null
@@ -1 +0,0 @@
-#map{height:100%}html,body{height:100%;margin:0;padding:0}#text-input-card{width:25%;background-color:#fff;border-radius:5px;box-shadow:#00000059 0 5px 15px;margin:10px;padding:5px;font-family:Roboto,sans-serif;font-size:large;font-weight:700}#text-input{width:100%;padding:10px;margin:0;box-sizing:border-box}#text-input-button{display:inline-block;margin-top:.5rem;width:auto;padding:.6rem .75rem;font-size:.875rem;font-weight:500;color:#fff;background-color:#2563eb;border:none;border-radius:.375rem;cursor:pointer;transition:background-color .15s ease-in-out;text-align:center}
diff --git a/dist/samples/place-text-search/dist/assets/index-DnhF614C.js b/dist/samples/place-text-search/dist/assets/index-DnhF614C.js
deleted file mode 100644
index e5af1fbee..000000000
--- a/dist/samples/place-text-search/dist/assets/index-DnhF614C.js
+++ /dev/null
@@ -1 +0,0 @@
-(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const r of t.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&i(r)}).observe(document,{childList:!0,subtree:!0});function s(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 i(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();let a,l={},u;async function p(){const{Map:c,InfoWindow:n}=await google.maps.importLibrary("maps"),s={lat:37.4161493,lng:-122.0812166};a=new c(document.getElementById("map"),{center:s,zoom:11,mapTypeControl:!1,mapId:"DEMO_MAP_ID"});const i=document.getElementById("text-input"),e=document.getElementById("text-input-button"),t=document.getElementById("text-input-card");a.controls[google.maps.ControlPosition.TOP_LEFT].push(t),e.addEventListener("click",()=>{m(i.value)}),i.addEventListener("keydown",r=>{r.key==="Enter"&&m(i.value)}),u=new google.maps.InfoWindow}async function m(c){const{Place:n}=await google.maps.importLibrary("places"),{AdvancedMarkerElement:s}=await google.maps.importLibrary("marker"),i={textQuery:c,fields:["displayName","location","businessStatus"],includedType:"",useStrictTypeFiltering:!0,locationBias:a.center,isOpenNow:!0,language:"en-US",maxResultCount:8,minRating:1,region:"us"},{places:e}=await n.searchByText(i);if(e.length){const{LatLngBounds:t}=await google.maps.importLibrary("core"),r=new t;for(const o in l)l[o].map=null;l={},e.forEach(o=>{const d=new s({map:a,position:o.location,title:o.displayName});l[o.id]=d,d.addListener("gmp-click",()=>{a.panTo(o.location),f(o.displayName,o.id,d)}),o.location!=null&&r.extend(o.location)}),a.fitBounds(r)}else console.log("No results")}async function f(c,n,s){u.setContent(n),u.setHeaderContent(c),u.open({map:a,anchor:s,shouldFocus:!1})}p();
diff --git a/dist/samples/place-text-search/dist/index.html b/dist/samples/place-text-search/dist/index.html
deleted file mode 100644
index 71483ff5c..000000000
--- a/dist/samples/place-text-search/dist/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-text-search/docs/index.html b/dist/samples/place-text-search/docs/index.html
deleted file mode 100644
index 0f12265e6..000000000
--- a/dist/samples/place-text-search/docs/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-text-search/docs/index.js b/dist/samples/place-text-search/docs/index.js
deleted file mode 100644
index 4e7b4ae9e..000000000
--- a/dist/samples/place-text-search/docs/index.js
+++ /dev/null
@@ -1,93 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_place_text_search]
-let map;
-let markers = {};
-let infoWindow;
-async function initMap() {
- const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
- const center = { lat: 37.4161493, lng: -122.0812166 };
- map = new Map(document.getElementById('map'), {
- center: center,
- zoom: 11,
- mapTypeControl: false,
- mapId: 'DEMO_MAP_ID',
- });
- const textInput = document.getElementById('text-input');
- const textInputButton = document.getElementById('text-input-button');
- const card = document.getElementById('text-input-card');
- map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
- textInputButton.addEventListener('click', () => {
- findPlaces(textInput.value);
- });
- textInput.addEventListener('keydown', (event) => {
- if (event.key === 'Enter') {
- findPlaces(textInput.value);
- }
- });
- infoWindow = new google.maps.InfoWindow();
-}
-async function findPlaces(query) {
- const { Place } = (await google.maps.importLibrary('places'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
- // [START maps_place_text_search_request]
- const request = {
- textQuery: query,
- fields: ['displayName', 'location', 'businessStatus'],
- includedType: '', // Restrict query to a specific type (leave blank for any).
- useStrictTypeFiltering: true,
- locationBias: map.center,
- isOpenNow: true,
- language: 'en-US',
- maxResultCount: 8,
- minRating: 1, // Specify a minimum rating.
- region: 'us',
- };
- const { places } = await Place.searchByText(request);
- // [END maps_place_text_search_request]
- if (places.length) {
- const { LatLngBounds } = (await google.maps.importLibrary('core'));
- const bounds = new LatLngBounds();
- // First remove all existing markers.
- for (const id in markers) {
- markers[id].map = null;
- }
- markers = {};
- // Loop through and get all the results.
- places.forEach((place) => {
- const marker = new AdvancedMarkerElement({
- map,
- position: place.location,
- title: place.displayName,
- });
- markers[place.id] = marker;
- marker.addListener('gmp-click', () => {
- map.panTo(place.location);
- updateInfoWindow(place.displayName, place.id, marker);
- });
- if (place.location != null) {
- bounds.extend(place.location);
- }
- });
- map.fitBounds(bounds);
- }
- else {
- console.log('No results');
- }
-}
-// Helper function to create an info window.
-async function updateInfoWindow(title, content, anchor) {
- infoWindow.setContent(content);
- infoWindow.setHeaderContent(title);
- infoWindow.open({
- map,
- anchor,
- shouldFocus: false,
- });
-}
-initMap();
-// [END maps_place_text_search]
diff --git a/dist/samples/place-text-search/docs/index.ts b/dist/samples/place-text-search/docs/index.ts
deleted file mode 100644
index 2b1f2e236..000000000
--- a/dist/samples/place-text-search/docs/index.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_place_text_search]
-let map;
-let markers = {};
-let infoWindow;
-
-async function initMap() {
- const { Map, InfoWindow } = (await google.maps.importLibrary(
- 'maps'
- )) as google.maps.MapsLibrary;
-
- const center = { lat: 37.4161493, lng: -122.0812166 };
- map = new Map(document.getElementById('map') as HTMLElement, {
- center: center,
- zoom: 11,
- mapTypeControl: false,
- mapId: 'DEMO_MAP_ID',
- });
-
- const textInput = document.getElementById('text-input') as HTMLInputElement;
- const textInputButton = document.getElementById(
- 'text-input-button'
- ) as HTMLButtonElement;
- const card = document.getElementById('text-input-card') as HTMLElement;
- map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
-
- textInputButton.addEventListener('click', () => {
- findPlaces(textInput.value);
- });
-
- textInput.addEventListener('keydown', (event) => {
- if (event.key === 'Enter') {
- findPlaces(textInput.value);
- }
- });
-
- infoWindow = new google.maps.InfoWindow();
-}
-
-async function findPlaces(query) {
- const { Place } = (await google.maps.importLibrary(
- 'places'
- )) as google.maps.PlacesLibrary;
- const { AdvancedMarkerElement } = (await google.maps.importLibrary(
- 'marker'
- )) as google.maps.MarkerLibrary;
- // [START maps_place_text_search_request]
- const request = {
- textQuery: query,
- fields: ['displayName', 'location', 'businessStatus'],
- includedType: '', // Restrict query to a specific type (leave blank for any).
- useStrictTypeFiltering: true,
- locationBias: map.center,
- isOpenNow: true,
- language: 'en-US',
- maxResultCount: 8,
- minRating: 1, // Specify a minimum rating.
- region: 'us',
- };
-
- const { places } = await Place.searchByText(request);
- // [END maps_place_text_search_request]
-
- if (places.length) {
- const { LatLngBounds } = (await google.maps.importLibrary(
- 'core'
- )) as google.maps.CoreLibrary;
- const bounds = new LatLngBounds();
-
- // First remove all existing markers.
- for (const id in markers) {
- markers[id].map = null;
- }
- markers = {};
-
- // Loop through and get all the results.
- places.forEach((place) => {
- const marker = new AdvancedMarkerElement({
- map,
- position: place.location,
- title: place.displayName,
- });
- markers[place.id] = marker;
-
- marker.addListener('gmp-click', () => {
- map.panTo(place.location);
- updateInfoWindow(place.displayName, place.id, marker);
- });
-
- if (place.location != null) {
- bounds.extend(place.location);
- }
- });
-
- map.fitBounds(bounds);
- } else {
- console.log('No results');
- }
-}
-
-// Helper function to create an info window.
-async function updateInfoWindow(title, content, anchor) {
- infoWindow.setContent(content);
- infoWindow.setHeaderContent(title);
- infoWindow.open({
- map,
- anchor,
- shouldFocus: false,
- });
-}
-
-initMap();
-// [END maps_place_text_search]
diff --git a/dist/samples/place-text-search/docs/style.css b/dist/samples/place-text-search/docs/style.css
deleted file mode 100644
index 18ccc553a..000000000
--- a/dist/samples/place-text-search/docs/style.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-/* [START maps_place_text_search] */
-/*
- * 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;
-}
-
-#text-input-card {
- width: 25%;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- margin: 10px;
- padding: 5px;
- font-family: Roboto, sans-serif;
- font-size: large;
- font-weight: bold;
-}
-
-#text-input {
- width: 100%;
- padding: 10px;
- margin: 0;
- box-sizing: border-box;
-}
-
-#text-input-button {
- display: inline-block;
- margin-top: 0.5rem;
- width: auto;
- padding: 0.6rem 0.75rem;
- font-size: 0.875rem;
- font-weight: 500;
- color: #fff;
- background-color: #2563eb;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- transition: background-color 0.15s ease-in-out;
- text-align: center;
-}
-
-/* [END maps_place_text_search] */
diff --git a/dist/samples/place-text-search/jsfiddle/demo.css b/dist/samples/place-text-search/jsfiddle/demo.css
deleted file mode 100644
index 24e8a28e0..000000000
--- a/dist/samples/place-text-search/jsfiddle/demo.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * @license
- * Copyright 2025 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;
-}
-
-#text-input-card {
- width: 25%;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
- margin: 10px;
- padding: 5px;
- font-family: Roboto, sans-serif;
- font-size: large;
- font-weight: bold;
-}
-
-#text-input {
- width: 100%;
- padding: 10px;
- margin: 0;
- box-sizing: border-box;
-}
-
-#text-input-button {
- display: inline-block;
- margin-top: 0.5rem;
- width: auto;
- padding: 0.6rem 0.75rem;
- font-size: 0.875rem;
- font-weight: 500;
- color: #fff;
- background-color: #2563eb;
- border: none;
- border-radius: 0.375rem;
- cursor: pointer;
- transition: background-color 0.15s ease-in-out;
- text-align: center;
-}
-
-
diff --git a/dist/samples/place-text-search/jsfiddle/demo.details b/dist/samples/place-text-search/jsfiddle/demo.details
deleted file mode 100644
index d73f7c71d..000000000
--- a/dist/samples/place-text-search/jsfiddle/demo.details
+++ /dev/null
@@ -1,7 +0,0 @@
-name: place-text-search
-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/place-text-search/jsfiddle/demo.html b/dist/samples/place-text-search/jsfiddle/demo.html
deleted file mode 100644
index d648c82ee..000000000
--- a/dist/samples/place-text-search/jsfiddle/demo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/dist/samples/place-text-search/jsfiddle/demo.js b/dist/samples/place-text-search/jsfiddle/demo.js
deleted file mode 100644
index 197299d16..000000000
--- a/dist/samples/place-text-search/jsfiddle/demo.js
+++ /dev/null
@@ -1,93 +0,0 @@
-"use strict";
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-let map;
-let markers = {};
-let infoWindow;
-async function initMap() {
- const { Map, InfoWindow } = (await google.maps.importLibrary('maps'));
- const center = { lat: 37.4161493, lng: -122.0812166 };
- map = new Map(document.getElementById('map'), {
- center: center,
- zoom: 11,
- mapTypeControl: false,
- mapId: 'DEMO_MAP_ID',
- });
- const textInput = document.getElementById('text-input');
- const textInputButton = document.getElementById('text-input-button');
- const card = document.getElementById('text-input-card');
- map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
- textInputButton.addEventListener('click', () => {
- findPlaces(textInput.value);
- });
- textInput.addEventListener('keydown', (event) => {
- if (event.key === 'Enter') {
- findPlaces(textInput.value);
- }
- });
- infoWindow = new google.maps.InfoWindow();
-}
-async function findPlaces(query) {
- const { Place } = (await google.maps.importLibrary('places'));
- const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
-
- const request = {
- textQuery: query,
- fields: ['displayName', 'location', 'businessStatus'],
- includedType: '', // Restrict query to a specific type (leave blank for any).
- useStrictTypeFiltering: true,
- locationBias: map.center,
- isOpenNow: true,
- language: 'en-US',
- maxResultCount: 8,
- minRating: 1, // Specify a minimum rating.
- region: 'us',
- };
- const { places } = await Place.searchByText(request);
-
- if (places.length) {
- const { LatLngBounds } = (await google.maps.importLibrary('core'));
- const bounds = new LatLngBounds();
- // First remove all existing markers.
- for (const id in markers) {
- markers[id].map = null;
- }
- markers = {};
- // Loop through and get all the results.
- places.forEach((place) => {
- const marker = new AdvancedMarkerElement({
- map,
- position: place.location,
- title: place.displayName,
- });
- markers[place.id] = marker;
- marker.addListener('gmp-click', () => {
- map.panTo(place.location);
- updateInfoWindow(place.displayName, place.id, marker);
- });
- if (place.location != null) {
- bounds.extend(place.location);
- }
- });
- map.fitBounds(bounds);
- }
- else {
- console.log('No results');
- }
-}
-// Helper function to create an info window.
-async function updateInfoWindow(title, content, anchor) {
- infoWindow.setContent(content);
- infoWindow.setHeaderContent(title);
- infoWindow.open({
- map,
- anchor,
- shouldFocus: false,
- });
-}
-initMap();
-
diff --git a/dist/samples/places-autocomplete-addressform/app/.eslintsrc.json b/dist/samples/places-autocomplete-addressform/app/.eslintsrc.json
deleted file mode 100644
index 4c44dab04..000000000
--- a/dist/samples/places-autocomplete-addressform/app/.eslintsrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "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/places-autocomplete-addressform/app/README.md b/dist/samples/places-autocomplete-addressform/app/README.md
deleted file mode 100644
index 1b78f4a34..000000000
--- a/dist/samples/places-autocomplete-addressform/app/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# Google Maps JavaScript Sample
-
-## places-autocomplete-addressform
-
-The places-autocomplete-addressform sample demonstrates how to use the Places Autocomplete feature to automatically fill in a shipping address form.
-
-Follow these instructions to set up and run places-autocomplete-addressform sample on your local computer.
-
-## Setup
-
-### Before starting run:
-
-`npm i`
-
-### Run an example on a local web server
-
-`cd samples/places-autocomplete-addressform`
-`npm start`
-
-### Build an individual example
-
-`cd samples/places-autocomplete-addressform`
-`npm run build`
-
-From 'samples':
-
-`npm run build --workspace=places-autocomplete-addressform/`
-
-### Build all of the examples.
-
-From 'samples':
-
-`npm run build-all`
-
-### Run lint to check for problems
-
-`cd samples/places-autocomplete-addressform`
-`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/places-autocomplete-addressform/app/index.html b/dist/samples/places-autocomplete-addressform/app/index.html
deleted file mode 100644
index cd4b13760..000000000
--- a/dist/samples/places-autocomplete-addressform/app/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
-
-
- Place ID:
- -
-
-
diff --git a/dist/samples/places-placeid-finder/app/index.ts b/dist/samples/places-placeid-finder/app/index.ts
deleted file mode 100644
index d4c0bc11c..000000000
--- a/dist/samples/places-placeid-finder/app/index.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_places_placeid_finder]
-// This sample uses the Place Autocomplete widget to allow the user to search
-// for and select a place. The sample then displays an info window containing
-// the place ID and other information about the place that the user has
-// selected.
-
-async function initMap(): Promise- Place ID:
- -
-
- Place ID:
- -
-
-
diff --git a/dist/samples/places-placeid-finder/docs/index.html b/dist/samples/places-placeid-finder/docs/index.html
deleted file mode 100644
index 8fc548384..000000000
--- a/dist/samples/places-placeid-finder/docs/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
- - Place ID:
- -
-
- Place ID:
- -
-
-
diff --git a/dist/samples/places-placeid-finder/docs/index.js b/dist/samples/places-placeid-finder/docs/index.js
deleted file mode 100644
index 680b6f642..000000000
--- a/dist/samples/places-placeid-finder/docs/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-// [START maps_places_placeid_finder]
-// This sample uses the Place Autocomplete widget to allow the user to search
-// for and select a place. The sample then displays an info window containing
-// the place ID and other information about the place that the user has
-// selected.
-async function initMap() {
- // Request needed libraries.
- const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
- google.maps.importLibrary('maps'),
- google.maps.importLibrary('marker'),
- google.maps.importLibrary('places'),
- ]);
- const mapElement = document.querySelector('gmp-map');
- const map = mapElement.innerMap;
- const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
- // Set the map options.
- map.setOptions({
- clickableIcons: false,
- mapTypeControl: false,
- streetViewControl: false,
- });
- // Use the bounds_changed event to bias results to the current map bounds.
- map.addListener('bounds_changed', () => {
- const bounds = map.getBounds();
- if (bounds) {
- placeAutocomplete.locationBias = bounds;
- }
- });
- const infowindow = new InfoWindow();
- const infowindowContent = document.getElementById('infowindow-content');
- infowindow.setContent(infowindowContent);
- const marker = new AdvancedMarkerElement({
- map: map,
- collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
- });
- marker.addListener('click', () => {
- infowindow.open(map, marker);
- });
- placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
- infowindow.close();
- const place = placePrediction.toPlace();
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress', 'location', 'id'],
- });
- if (!place.location) {
- return;
- }
- if (place.viewport) {
- map.fitBounds(place.viewport);
- }
- else {
- map.setCenter(place.location);
- map.setZoom(17);
- }
- // Set the position of the marker using the place ID and location.
- marker.position = place.location;
- // marker.setVisible(true); // AdvancedMarkerElement is visible by default when map and position are set.
- infowindowContent.children.namedItem('place-name').textContent = place.displayName;
- infowindowContent.children.namedItem('place-id').textContent = place.id;
- infowindowContent.children.namedItem('place-address').textContent = place.formattedAddress;
- infowindow.open(map, marker);
- });
-}
-initMap();
-// [END maps_places_placeid_finder]
diff --git a/dist/samples/places-placeid-finder/docs/index.ts b/dist/samples/places-placeid-finder/docs/index.ts
deleted file mode 100644
index d4c0bc11c..000000000
--- a/dist/samples/places-placeid-finder/docs/index.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// [START maps_places_placeid_finder]
-// This sample uses the Place Autocomplete widget to allow the user to search
-// for and select a place. The sample then displays an info window containing
-// the place ID and other information about the place that the user has
-// selected.
-
-async function initMap(): Promise- Place ID:
- -
-
- Place ID:
- -
-
-
diff --git a/dist/samples/places-placeid-finder/jsfiddle/demo.js b/dist/samples/places-placeid-finder/jsfiddle/demo.js
deleted file mode 100644
index 666a29ebc..000000000
--- a/dist/samples/places-placeid-finder/jsfiddle/demo.js
+++ /dev/null
@@ -1,71 +0,0 @@
-"use strict";
-/**
- * @license
- * Copyright 2019 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// This sample uses the Place Autocomplete widget to allow the user to search
-// for and select a place. The sample then displays an info window containing
-// the place ID and other information about the place that the user has
-// selected.
-async function initMap() {
- // Request needed libraries.
- const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
- google.maps.importLibrary('maps'),
- google.maps.importLibrary('marker'),
- google.maps.importLibrary('places'),
- ]);
- const mapElement = document.querySelector('gmp-map');
- const map = mapElement.innerMap;
- const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
- // Set the map options.
- map.setOptions({
- clickableIcons: false,
- mapTypeControl: false,
- streetViewControl: false,
- });
- // Use the bounds_changed event to bias results to the current map bounds.
- map.addListener('bounds_changed', () => {
- const bounds = map.getBounds();
- if (bounds) {
- placeAutocomplete.locationBias = bounds;
- }
- });
- const infowindow = new InfoWindow();
- const infowindowContent = document.getElementById('infowindow-content');
- infowindow.setContent(infowindowContent);
- const marker = new AdvancedMarkerElement({
- map: map,
- collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
- });
- marker.addListener('click', () => {
- infowindow.open(map, marker);
- });
- placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
- infowindow.close();
- const place = placePrediction.toPlace();
- await place.fetchFields({
- fields: ['displayName', 'formattedAddress', 'location', 'id'],
- });
- if (!place.location) {
- return;
- }
- if (place.viewport) {
- map.fitBounds(place.viewport);
- }
- else {
- map.setCenter(place.location);
- map.setZoom(17);
- }
- // Set the position of the marker using the place ID and location.
- marker.position = place.location;
- // marker.setVisible(true); // AdvancedMarkerElement is visible by default when map and position are set.
- infowindowContent.children.namedItem('place-name').textContent = place.displayName;
- infowindowContent.children.namedItem('place-id').textContent = place.id;
- infowindowContent.children.namedItem('place-address').textContent = place.formattedAddress;
- infowindow.open(map, marker);
- });
-}
-initMap();
-
diff --git a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css b/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css
deleted file mode 100644
index f2a1287dc..000000000
--- a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DYsp_gI5.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * @license
- * Copyright 2025 Google LLC. All Rights Reserved.
- * SPDX-License-Identifier: Apache-2.0
- */html,body{display:flex;width:100%;height:400px;margin:0}h1{font-size:16px;text-align:center}#map-container{box-sizing:border-box;width:100%}gmp-place-details-compact{--gmp-mat-color-on-surface: light-dark(black, white);--gmp-mat-color-surface: light-dark(white, black);--gmp-mat-font-family: Google Sans Text, sans-serif;--gmp-mat-font-body-medium: normal 400 .875em/1.25em var(--gmp-mat-font-family, "Google Sans Text");width:360px;border:none;padding:0;margin:0;position:relative}gmp-place-details-compact:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:20px solid var(--gmp-mat-color-surface, light-dark(white, black))}
diff --git a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js b/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js
deleted file mode 100644
index 0f98820c6..000000000
--- a/dist/samples/react-ui-kit-place-details-compact/dist/assets/index-DwWFQETP.js
+++ /dev/null
@@ -1,57 +0,0 @@
-(function(){const S=document.createElement("link").relList;if(S&&S.supports&&S.supports("modulepreload"))return;for(const R of document.querySelectorAll('link[rel="modulepreload"]'))r(R);new MutationObserver(R=>{for(const H of R)if(H.type==="childList")for(const B of H.addedNodes)B.tagName==="LINK"&&B.rel==="modulepreload"&&r(B)}).observe(document,{childList:!0,subtree:!0});function O(R){const H={};return R.integrity&&(H.integrity=R.integrity),R.referrerPolicy&&(H.referrerPolicy=R.referrerPolicy),R.crossOrigin==="use-credentials"?H.credentials="include":R.crossOrigin==="anonymous"?H.credentials="omit":H.credentials="same-origin",H}function r(R){if(R.ep)return;R.ep=!0;const H=O(R);fetch(R.href,H)}})();function Zv(g){return g&&g.__esModule&&Object.prototype.hasOwnProperty.call(g,"default")?g.default:g}var ei={exports:{}},be={};/**
- * @license React
- * react-jsx-runtime.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var ed;function jv(){if(ed)return be;ed=1;var g=Symbol.for("react.transitional.element"),S=Symbol.for("react.fragment");function O(r,R,H){var B=null;if(H!==void 0&&(B=""+H),R.key!==void 0&&(B=""+R.key),"key"in R){H={};for(var j in R)j!=="key"&&(H[j]=R[j])}else H=R;return R=H.ref,{$$typeof:g,type:r,key:B,ref:R!==void 0?R:null,props:H}}return be.Fragment=S,be.jsx=O,be.jsxs=O,be}var nd;function Vv(){return nd||(nd=1,ei.exports=jv()),ei.exports}var Ea=Vv(),ni={exports:{}},V={};/**
- * @license React
- * react.production.js
- *
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */var fd;function Kv(){if(fd)return V;fd=1;var g=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),r=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),B=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),_=Symbol.for("react.suspense"),A=Symbol.for("react.memo"),U=Symbol.for("react.lazy"),K=Symbol.iterator;function J(s){return s===null||typeof s!="object"?null:(s=K&&s[K]||s["@@iterator"],typeof s=="function"?s:null)}var P={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},G=Object.assign,rl={};function Al(s,z,N){this.props=s,this.context=z,this.refs=rl,this.updater=N||P}Al.prototype.isReactComponent={},Al.prototype.setState=function(s,z){if(typeof s!="object"&&typeof s!="function"&&s!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,s,z,"setState")},Al.prototype.forceUpdate=function(s){this.updater.enqueueForceUpdate(this,s,"forceUpdate")};function vt(){}vt.prototype=Al.prototype;function yt(s,z,N){this.props=s,this.context=z,this.refs=rl,this.updater=N||P}var zl=yt.prototype=new vt;zl.constructor=yt,G(zl,Al.prototype),zl.isPureReactComponent=!0;var wl=Array.isArray,$={H:null,A:null,T:null,S:null,V:null},Sl=Object.prototype.hasOwnProperty;function Ol(s,z,N,p,C,tl){return N=tl.ref,{$$typeof:g,type:s,key:z,ref:N!==void 0?N:null,props:tl}}function Bl(s,z){return Ol(s.type,z,void 0,void 0,void 0,s.props)}function bt(s){return typeof s=="object"&&s!==null&&s.$$typeof===g}function Yu(s){var z={"=":"=0",":":"=2"};return"$"+s.replace(/[=:]/g,function(N){return z[N]})}var _t=/\/+/g;function Gl(s,z){return typeof s=="object"&&s!==null&&s.key!=null?Yu(""+s.key):z.toString(36)}function yu(){}function hu(s){switch(s.status){case"fulfilled":return s.value;case"rejected":throw s.reason;default:switch(typeof s.status=="string"?s.then(yu,yu):(s.status="pending",s.then(function(z){s.status==="pending"&&(s.status="fulfilled",s.value=z)},function(z){s.status==="pending"&&(s.status="rejected",s.reason=z)})),s.status){case"fulfilled":return s.value;case"rejected":throw s.reason}}throw s}function Cl(s,z,N,p,C){var tl=typeof s;(tl==="undefined"||tl==="boolean")&&(s=null);var Z=!1;if(s===null)Z=!0;else switch(tl){case"bigint":case"string":case"number":Z=!0;break;case"object":switch(s.$$typeof){case g:case S:Z=!0;break;case U:return Z=s._init,Cl(Z(s._payload),z,N,p,C)}}if(Z)return C=C(s),Z=p===""?"."+Gl(s,0):p,wl(C)?(N="",Z!=null&&(N=Z.replace(_t,"$&/")+"/"),Cl(C,z,N,"",function(Zt){return Zt})):C!=null&&(bt(C)&&(C=Bl(C,N+(C.key==null||s&&s.key===C.key?"":(""+C.key).replace(_t,"$&/")+"/")+Z)),z.push(C)),1;Z=0;var Wl=p===""?".":p+":";if(wl(s))for(var vl=0;vl- Place ID:
- -
-
-
-
-