diff --git a/dist/samples/control-custom/app/.eslintsrc.json b/dist/samples/control-custom/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/control-custom/app/.eslintsrc.json @@ -0,0 +1,13 @@ +{ + "extends": [ + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "rules": { + "@typescript-eslint/ban-ts-comment": 0, + "@typescript-eslint/no-this-alias": 1, + "@typescript-eslint/no-empty-function": 1, + "@typescript-eslint/explicit-module-boundary-types": 1, + "@typescript-eslint/no-unused-vars": 1 + } +} diff --git a/dist/samples/control-custom/app/README.md b/dist/samples/control-custom/app/README.md new file mode 100644 index 00000000..c0c0c4ac --- /dev/null +++ b/dist/samples/control-custom/app/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-custom + +Create a map with custom controls. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-custom` +`npm start` + +### Build an individual example + +`cd samples/control-custom` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-custom/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-custom` +`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/control-custom/app/index.html b/dist/samples/control-custom/app/index.html new file mode 100644 index 00000000..1c3875b0 --- /dev/null +++ b/dist/samples/control-custom/app/index.html @@ -0,0 +1,31 @@ + + + + + + Custom Controls + + + + + +
+ + + + + + diff --git a/dist/samples/control-custom/app/index.ts b/dist/samples/control-custom/app/index.ts new file mode 100755 index 00000000..14d63f87 --- /dev/null +++ b/dist/samples/control-custom/app/index.ts @@ -0,0 +1,67 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_custom] +let map: google.maps.Map; + +const chicago = { lat: 41.85, lng: -87.65 }; + +/** + * Creates a control that recenters the map on Chicago. + */ + function createCenterControl(map) { + const controlButton = document.createElement('button'); + + // Set CSS for the control. + controlButton.style.backgroundColor = '#fff'; + controlButton.style.border = '2px solid #fff'; + controlButton.style.borderRadius = '3px'; + controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; + controlButton.style.color = 'rgb(25,25,25)'; + controlButton.style.cursor = 'pointer'; + controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; + controlButton.style.fontSize = '16px'; + controlButton.style.lineHeight = '38px'; + controlButton.style.margin = '8px 0 22px'; + controlButton.style.padding = '0 5px'; + controlButton.style.textAlign = 'center'; + + controlButton.textContent = 'Center Map'; + controlButton.title = 'Click to recenter the map'; + controlButton.type = 'button'; + + // Setup the click event listeners: simply set the map to Chicago. + controlButton.addEventListener('click', () => { + map.setCenter(chicago); + }); + + return controlButton; +} + +function initMap() { + map = new google.maps.Map(document.getElementById('map') as HTMLElement, { + zoom: 12, + center: chicago, + }); + + // Create the DIV to hold the control. + const centerControlDiv = document.createElement('div'); + // Create the control. + const centerControl = createCenterControl(map); + // Append the control to the DIV. + centerControlDiv.appendChild(centerControl); + + map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_control_custom] +export {}; diff --git a/dist/samples/control-custom/app/package.json b/dist/samples/control-custom/app/package.json new file mode 100644 index 00000000..33a095c9 --- /dev/null +++ b/dist/samples/control-custom/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-custom", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-custom && bash ../app.sh control-custom && bash ../docs.sh control-custom && npm run build:vite --workspace=. && bash ../dist.sh control-custom", + "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/control-custom/app/style.css b/dist/samples/control-custom/app/style.css new file mode 100644 index 00000000..8b3d06fd --- /dev/null +++ b/dist/samples/control-custom/app/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_custom] */ +/* + * 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_control_custom] */ \ No newline at end of file diff --git a/dist/samples/control-custom/app/tsconfig.json b/dist/samples/control-custom/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/control-custom/app/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +} diff --git a/dist/samples/control-custom/dist/assets/index-DWepjxzn.css b/dist/samples/control-custom/dist/assets/index-DWepjxzn.css new file mode 100644 index 00000000..c49b8a3f --- /dev/null +++ b/dist/samples/control-custom/dist/assets/index-DWepjxzn.css @@ -0,0 +1 @@ +#map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/control-custom/dist/assets/index-sPwHwC05.js b/dist/samples/control-custom/dist/assets/index-sPwHwC05.js new file mode 100644 index 00000000..7c3aee60 --- /dev/null +++ b/dist/samples/control-custom/dist/assets/index-sPwHwC05.js @@ -0,0 +1 @@ +(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))s(t);new MutationObserver(t=>{for(const o of t)if(o.type==="childList")for(const n of o.addedNodes)n.tagName==="LINK"&&n.rel==="modulepreload"&&s(n)}).observe(document,{childList:!0,subtree:!0});function c(t){const o={};return t.integrity&&(o.integrity=t.integrity),t.referrerPolicy&&(o.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?o.credentials="include":t.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function s(t){if(t.ep)return;t.ep=!0;const o=c(t);fetch(t.href,o)}})();let i;const l={lat:41.85,lng:-87.65};function a(r){const e=document.createElement("button");return e.style.backgroundColor="#fff",e.style.border="2px solid #fff",e.style.borderRadius="3px",e.style.boxShadow="0 2px 6px rgba(0,0,0,.3)",e.style.color="rgb(25,25,25)",e.style.cursor="pointer",e.style.fontFamily="Roboto,Arial,sans-serif",e.style.fontSize="16px",e.style.lineHeight="38px",e.style.margin="8px 0 22px",e.style.padding="0 5px",e.style.textAlign="center",e.textContent="Center Map",e.title="Click to recenter the map",e.type="button",e.addEventListener("click",()=>{r.setCenter(l)}),e}function d(){i=new google.maps.Map(document.getElementById("map"),{zoom:12,center:l});const r=document.createElement("div"),e=a(i);r.appendChild(e),i.controls[google.maps.ControlPosition.TOP_CENTER].push(r)}window.initMap=d; diff --git a/dist/samples/control-custom/dist/index.html b/dist/samples/control-custom/dist/index.html new file mode 100644 index 00000000..5de98c11 --- /dev/null +++ b/dist/samples/control-custom/dist/index.html @@ -0,0 +1,31 @@ + + + + + + Custom Controls + + + + + +
+ + + + + + diff --git a/dist/samples/control-custom/docs/index.html b/dist/samples/control-custom/docs/index.html new file mode 100644 index 00000000..1c3875b0 --- /dev/null +++ b/dist/samples/control-custom/docs/index.html @@ -0,0 +1,31 @@ + + + + + + Custom Controls + + + + + +
+ + + + + + diff --git a/dist/samples/control-custom/docs/index.js b/dist/samples/control-custom/docs/index.js new file mode 100644 index 00000000..aa4789af --- /dev/null +++ b/dist/samples/control-custom/docs/index.js @@ -0,0 +1,51 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_control_custom] +let map; +const chicago = { lat: 41.85, lng: -87.65 }; +/** + * Creates a control that recenters the map on Chicago. + */ +function createCenterControl(map) { + const controlButton = document.createElement('button'); + // Set CSS for the control. + controlButton.style.backgroundColor = '#fff'; + controlButton.style.border = '2px solid #fff'; + controlButton.style.borderRadius = '3px'; + controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; + controlButton.style.color = 'rgb(25,25,25)'; + controlButton.style.cursor = 'pointer'; + controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; + controlButton.style.fontSize = '16px'; + controlButton.style.lineHeight = '38px'; + controlButton.style.margin = '8px 0 22px'; + controlButton.style.padding = '0 5px'; + controlButton.style.textAlign = 'center'; + controlButton.textContent = 'Center Map'; + controlButton.title = 'Click to recenter the map'; + controlButton.type = 'button'; + // Setup the click event listeners: simply set the map to Chicago. + controlButton.addEventListener('click', () => { + map.setCenter(chicago); + }); + return controlButton; +} +function initMap() { + map = new google.maps.Map(document.getElementById('map'), { + zoom: 12, + center: chicago, + }); + // Create the DIV to hold the control. + const centerControlDiv = document.createElement('div'); + // Create the control. + const centerControl = createCenterControl(map); + // Append the control to the DIV. + centerControlDiv.appendChild(centerControl); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); +} +window.initMap = initMap; +export {}; +// [END maps_control_custom diff --git a/dist/samples/control-custom/docs/index.ts b/dist/samples/control-custom/docs/index.ts new file mode 100755 index 00000000..14d63f87 --- /dev/null +++ b/dist/samples/control-custom/docs/index.ts @@ -0,0 +1,67 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_custom] +let map: google.maps.Map; + +const chicago = { lat: 41.85, lng: -87.65 }; + +/** + * Creates a control that recenters the map on Chicago. + */ + function createCenterControl(map) { + const controlButton = document.createElement('button'); + + // Set CSS for the control. + controlButton.style.backgroundColor = '#fff'; + controlButton.style.border = '2px solid #fff'; + controlButton.style.borderRadius = '3px'; + controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; + controlButton.style.color = 'rgb(25,25,25)'; + controlButton.style.cursor = 'pointer'; + controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; + controlButton.style.fontSize = '16px'; + controlButton.style.lineHeight = '38px'; + controlButton.style.margin = '8px 0 22px'; + controlButton.style.padding = '0 5px'; + controlButton.style.textAlign = 'center'; + + controlButton.textContent = 'Center Map'; + controlButton.title = 'Click to recenter the map'; + controlButton.type = 'button'; + + // Setup the click event listeners: simply set the map to Chicago. + controlButton.addEventListener('click', () => { + map.setCenter(chicago); + }); + + return controlButton; +} + +function initMap() { + map = new google.maps.Map(document.getElementById('map') as HTMLElement, { + zoom: 12, + center: chicago, + }); + + // Create the DIV to hold the control. + const centerControlDiv = document.createElement('div'); + // Create the control. + const centerControl = createCenterControl(map); + // Append the control to the DIV. + centerControlDiv.appendChild(centerControl); + + map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); +} + +declare global { + interface Window { + initMap: () => void; + } +} +window.initMap = initMap; +// [END maps_control_custom] +export {}; diff --git a/dist/samples/control-custom/docs/style.css b/dist/samples/control-custom/docs/style.css new file mode 100644 index 00000000..8b3d06fd --- /dev/null +++ b/dist/samples/control-custom/docs/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_custom] */ +/* + * 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_control_custom] */ \ No newline at end of file diff --git a/dist/samples/control-custom/jsfiddle/demo.css b/dist/samples/control-custom/jsfiddle/demo.css new file mode 100644 index 00000000..fa4d8cd3 --- /dev/null +++ b/dist/samples/control-custom/jsfiddle/demo.css @@ -0,0 +1,24 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +/* + * Always set the map height explicitly to define the size of the div element + * that contains the map. + */ +#map { + height: 100%; +} + +/* + * Optional: Makes the sample page fill the window. + */ +html, +body { + height: 100%; + margin: 0; + padding: 0; +} + diff --git a/dist/samples/control-custom/jsfiddle/demo.details b/dist/samples/control-custom/jsfiddle/demo.details new file mode 100644 index 00000000..f104914a --- /dev/null +++ b/dist/samples/control-custom/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: control-custom +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/control-custom/jsfiddle/demo.html b/dist/samples/control-custom/jsfiddle/demo.html new file mode 100644 index 00000000..23668de8 --- /dev/null +++ b/dist/samples/control-custom/jsfiddle/demo.html @@ -0,0 +1,31 @@ + + + + + + Custom Controls + + + + + +
+ + + + + + diff --git a/dist/samples/control-custom/jsfiddle/demo.js b/dist/samples/control-custom/jsfiddle/demo.js new file mode 100644 index 00000000..45e63936 --- /dev/null +++ b/dist/samples/control-custom/jsfiddle/demo.js @@ -0,0 +1,50 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +let map; +const chicago = { lat: 41.85, lng: -87.65 }; +/** + * Creates a control that recenters the map on Chicago. + */ +function createCenterControl(map) { + const controlButton = document.createElement('button'); + // Set CSS for the control. + controlButton.style.backgroundColor = '#fff'; + controlButton.style.border = '2px solid #fff'; + controlButton.style.borderRadius = '3px'; + controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; + controlButton.style.color = 'rgb(25,25,25)'; + controlButton.style.cursor = 'pointer'; + controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; + controlButton.style.fontSize = '16px'; + controlButton.style.lineHeight = '38px'; + controlButton.style.margin = '8px 0 22px'; + controlButton.style.padding = '0 5px'; + controlButton.style.textAlign = 'center'; + controlButton.textContent = 'Center Map'; + controlButton.title = 'Click to recenter the map'; + controlButton.type = 'button'; + // Setup the click event listeners: simply set the map to Chicago. + controlButton.addEventListener('click', () => { + map.setCenter(chicago); + }); + return controlButton; +} +function initMap() { + map = new google.maps.Map(document.getElementById('map'), { + zoom: 12, + center: chicago, + }); + // Create the DIV to hold the control. + const centerControlDiv = document.createElement('div'); + // Create the control. + const centerControl = createCenterControl(map); + // Append the control to the DIV. + centerControlDiv.appendChild(centerControl); + map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); +} +window.initMap = initMap; +export {}; diff --git a/samples/control-custom/README.md b/samples/control-custom/README.md new file mode 100644 index 00000000..c0c0c4ac --- /dev/null +++ b/samples/control-custom/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## control-custom + +Create a map with custom controls. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/control-custom` +`npm start` + +### Build an individual example + +`cd samples/control-custom` +`npm run build` + +From 'samples': + +`npm run build --workspace=control-custom/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/control-custom` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/control-custom/index.html b/samples/control-custom/index.html new file mode 100644 index 00000000..2872a7c4 --- /dev/null +++ b/samples/control-custom/index.html @@ -0,0 +1,41 @@ + + + + + + + Custom Controls + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/samples/control-custom/index.ts b/samples/control-custom/index.ts new file mode 100644 index 00000000..6fe8d5b2 --- /dev/null +++ b/samples/control-custom/index.ts @@ -0,0 +1,72 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_control_custom] +let map: google.maps.Map; + +const chicago = { lat: 41.85, lng: -87.65 }; + +/** + * Creates a control that recenters the map on Chicago. + */ + function createCenterControl(map) { + const controlButton = document.createElement('button'); + + // Set CSS for the control. + controlButton.style.backgroundColor = '#fff'; + controlButton.style.border = '2px solid #fff'; + controlButton.style.borderRadius = '3px'; + controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'; + controlButton.style.color = 'rgb(25,25,25)'; + controlButton.style.cursor = 'pointer'; + controlButton.style.fontFamily = 'Roboto,Arial,sans-serif'; + controlButton.style.fontSize = '16px'; + controlButton.style.lineHeight = '38px'; + controlButton.style.margin = '8px 0 22px'; + controlButton.style.padding = '0 5px'; + controlButton.style.textAlign = 'center'; + + controlButton.textContent = 'Center Map'; + controlButton.title = 'Click to recenter the map'; + controlButton.type = 'button'; + + // Setup the click event listeners: simply set the map to Chicago. + controlButton.addEventListener('click', () => { + map.setCenter(chicago); + }); + + return controlButton; +} + +//Get the gmp-map element +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + +async function initMap() { + const { Map } = (await google.maps.importLibrary( + 'maps' + )) as typeof google.maps; + + // Get the inner map. + const innerMap = mapElement.innerMap; + + // Set map options. + mapElement.innerMap.setOptions({ + zoom: 12, + center: chicago, + }); + + // Create the DIV to hold the control. + const centerControlDiv = document.createElement('div'); + // Create the control. + const centerControl = createCenterControl(map); + // Append the control to the DIV. + centerControlDiv.appendChild(centerControl); + + map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv); +} + +initMap(); +//[END maps_control_custom] diff --git a/samples/control-custom/package.json b/samples/control-custom/package.json new file mode 100644 index 00000000..33a095c9 --- /dev/null +++ b/samples/control-custom/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/control-custom", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh control-custom && bash ../app.sh control-custom && bash ../docs.sh control-custom && npm run build:vite --workspace=. && bash ../dist.sh control-custom", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/control-custom/style.css b/samples/control-custom/style.css new file mode 100644 index 00000000..8b3d06fd --- /dev/null +++ b/samples/control-custom/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_control_custom] */ +/* + * 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_control_custom] */ \ No newline at end of file diff --git a/samples/control-custom/tsconfig.json b/samples/control-custom/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/control-custom/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +}