diff --git a/dist/index.html b/dist/index.html index 270fbaac..02fd02e4 100644 --- a/dist/index.html +++ b/dist/index.html @@ -33,6 +33,7 @@

Maps JSAPI Samples

  • 3d-simple-marker
  • add-map
  • address-validation
    • +
  • advanced-markers-accessibility
  • advanced-markers-animation
  • advanced-markers-html
  • advanced-markers-html-simple
    • diff --git a/dist/samples/advanced-markers-accessibility/app/.eslintsrc.json b/dist/samples/advanced-markers-accessibility/app/.eslintsrc.json new file mode 100644 index 00000000..4c44dab0 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/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/advanced-markers-accessibility/app/README.md b/dist/samples/advanced-markers-accessibility/app/README.md new file mode 100644 index 00000000..385d8923 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/app/README.md @@ -0,0 +1,33 @@ +# Google Maps JavaScript Sample + +This sample is generated from @googlemaps/js-samples located at +https://github.com/googlemaps-samples/js-api-samples. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +First `cd` to the folder for the sample to run, then: + +`npm start` + +### Build an individual example + +From `samples/`: + +`npm run build --workspace=sample-name/` + +### 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-accessibility/app/index.html b/dist/samples/advanced-markers-accessibility/app/index.html new file mode 100644 index 00000000..1eb28a32 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/app/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Accessibility + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-accessibility/app/index.ts b/dist/samples/advanced-markers-accessibility/app/index.ts new file mode 100644 index 00000000..ad2204f1 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/app/index.ts @@ -0,0 +1,76 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_accessibility] +async function initMap() { + // Request needed libraries. + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 12, + center: { lat: 34.84555, lng: -111.8035 }, + mapId: '4504f8b37365c3d0', + }); + + // Set LatLng and title text for the markers. The first marker (Boynton Pass) + // receives the initial focus when tab is pressed. Use arrow keys to move + // between markers; press tab again to cycle through the map controls. + const tourStops = [ + { + position: { lat: 34.8791806, lng: -111.8265049 }, + title: "Boynton Pass" + }, + { + position: { lat: 34.8559195, lng: -111.7988186 }, + title: "Airport Mesa" + }, + { + position: { lat: 34.832149, lng: -111.7695277 }, + title: "Chapel of the Holy Cross" + }, + { + position: { lat: 34.823736, lng: -111.8001857 }, + title: "Red Rock Crossing" + }, + { + position: { lat: 34.800326, lng: -111.7665047 }, + title: "Bell Rock" + }, + ]; + + // Create an info window to share between markers. + const infoWindow = new InfoWindow(); + + // Create the markers. + tourStops.forEach(({position, title}, i) => { + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + // [START maps_advanced_markers_accessibility_marker] + const marker = new AdvancedMarkerElement({ + position, + map, + title: `${i + 1}. ${title}`, + content: pin.element, + gmpClickable: true, + }); + // [END maps_advanced_markers_accessibility_marker] + // [START maps_advanced_markers_accessibility_event_listener] + // Add a click listener for each marker, and set up the info window. + marker.addListener('click', ({ domEvent, latLng }) => { + const { target } = domEvent; + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + // [END maps_advanced_markers_accessibility_event_listener] + }); +} + +initMap(); +// [END maps_advanced_markers_accessibility] \ No newline at end of file diff --git a/dist/samples/advanced-markers-accessibility/app/package.json b/dist/samples/advanced-markers-accessibility/app/package.json new file mode 100644 index 00000000..25ae916a --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/app/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/advanced-markers-accessibility", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh advanced-markers-accessibility && bash ../app.sh advanced-markers-accessibility && bash ../docs.sh advanced-markers-accessibility && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-accessibility", + "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-accessibility/app/style.css b/dist/samples/advanced-markers-accessibility/app/style.css new file mode 100644 index 00000000..635c259f --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/app/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_accessibility] */ +/* + * 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_advanced_markers_accessibility] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-accessibility/app/tsconfig.json b/dist/samples/advanced-markers-accessibility/app/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/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/advanced-markers-accessibility/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-accessibility/dist/assets/index-DW_Ml_OD.css new file mode 100644 index 00000000..672cb7cc --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/dist/assets/index-DW_Ml_OD.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */#map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-accessibility/dist/assets/index-sJUxmU39.js b/dist/samples/advanced-markers-accessibility/dist/assets/index-sJUxmU39.js new file mode 100644 index 00000000..005eae7f --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/dist/assets/index-sJUxmU39.js @@ -0,0 +1,5 @@ +(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const o of t.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&r(o)}).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 r(e){if(e.ep)return;e.ep=!0;const t=s(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */async function m(){const{Map:l,InfoWindow:n}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:s,PinElement:r}=await google.maps.importLibrary("marker"),e=new l(document.getElementById("map"),{zoom:12,center:{lat:34.84555,lng:-111.8035},mapId:"4504f8b37365c3d0"}),t=[{position:{lat:34.8791806,lng:-111.8265049},title:"Boynton Pass"},{position:{lat:34.8559195,lng:-111.7988186},title:"Airport Mesa"},{position:{lat:34.832149,lng:-111.7695277},title:"Chapel of the Holy Cross"},{position:{lat:34.823736,lng:-111.8001857},title:"Red Rock Crossing"},{position:{lat:34.800326,lng:-111.7665047},title:"Bell Rock"}],o=new n;t.forEach(({position:a,title:p},c)=>{const d=new r({glyph:`${c+1}`,scale:1.5}),i=new s({position:a,map:e,title:`${c+1}. ${p}`,content:d.element,gmpClickable:!0});i.addListener("click",({domEvent:f,latLng:u})=>{const{target:g}=f;o.close(),o.setContent(i.title),o.open(i.map,i)})})}m(); diff --git a/dist/samples/advanced-markers-accessibility/dist/index.html b/dist/samples/advanced-markers-accessibility/dist/index.html new file mode 100644 index 00000000..d5acb722 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/dist/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Accessibility + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-accessibility/docs/index.html b/dist/samples/advanced-markers-accessibility/docs/index.html new file mode 100644 index 00000000..1eb28a32 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/docs/index.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Accessibility + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-accessibility/docs/index.js b/dist/samples/advanced-markers-accessibility/docs/index.js new file mode 100644 index 00000000..e313fa0e --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/docs/index.js @@ -0,0 +1,71 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +// [START maps_advanced_markers_accessibility] +async function initMap() { + // Request needed libraries. + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); + const map = new Map(document.getElementById("map"), { + zoom: 12, + center: { lat: 34.84555, lng: -111.8035 }, + mapId: '4504f8b37365c3d0', + }); + // Set LatLng and title text for the markers. The first marker (Boynton Pass) + // receives the initial focus when tab is pressed. Use arrow keys to move + // between markers; press tab again to cycle through the map controls. + const tourStops = [ + { + position: { lat: 34.8791806, lng: -111.8265049 }, + title: "Boynton Pass" + }, + { + position: { lat: 34.8559195, lng: -111.7988186 }, + title: "Airport Mesa" + }, + { + position: { lat: 34.832149, lng: -111.7695277 }, + title: "Chapel of the Holy Cross" + }, + { + position: { lat: 34.823736, lng: -111.8001857 }, + title: "Red Rock Crossing" + }, + { + position: { lat: 34.800326, lng: -111.7665047 }, + title: "Bell Rock" + }, + ]; + // Create an info window to share between markers. + const infoWindow = new InfoWindow(); + // Create the markers. + tourStops.forEach(({ position, title }, i) => { + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + // [START maps_advanced_markers_accessibility_marker] + const marker = new AdvancedMarkerElement({ + position, + map, + title: `${i + 1}. ${title}`, + content: pin.element, + gmpClickable: true, + }); + // [END maps_advanced_markers_accessibility_marker] + // [START maps_advanced_markers_accessibility_event_listener] + // Add a click listener for each marker, and set up the info window. + marker.addListener('click', ({ domEvent, latLng }) => { + const { target } = domEvent; + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + // [END maps_advanced_markers_accessibility_event_listener] + }); +} +initMap(); +// [END maps_advanced_markers_accessibility] diff --git a/dist/samples/advanced-markers-accessibility/docs/index.ts b/dist/samples/advanced-markers-accessibility/docs/index.ts new file mode 100644 index 00000000..ad2204f1 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/docs/index.ts @@ -0,0 +1,76 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_advanced_markers_accessibility] +async function initMap() { + // Request needed libraries. + const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; + + const map = new Map(document.getElementById("map") as HTMLElement, { + zoom: 12, + center: { lat: 34.84555, lng: -111.8035 }, + mapId: '4504f8b37365c3d0', + }); + + // Set LatLng and title text for the markers. The first marker (Boynton Pass) + // receives the initial focus when tab is pressed. Use arrow keys to move + // between markers; press tab again to cycle through the map controls. + const tourStops = [ + { + position: { lat: 34.8791806, lng: -111.8265049 }, + title: "Boynton Pass" + }, + { + position: { lat: 34.8559195, lng: -111.7988186 }, + title: "Airport Mesa" + }, + { + position: { lat: 34.832149, lng: -111.7695277 }, + title: "Chapel of the Holy Cross" + }, + { + position: { lat: 34.823736, lng: -111.8001857 }, + title: "Red Rock Crossing" + }, + { + position: { lat: 34.800326, lng: -111.7665047 }, + title: "Bell Rock" + }, + ]; + + // Create an info window to share between markers. + const infoWindow = new InfoWindow(); + + // Create the markers. + tourStops.forEach(({position, title}, i) => { + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + // [START maps_advanced_markers_accessibility_marker] + const marker = new AdvancedMarkerElement({ + position, + map, + title: `${i + 1}. ${title}`, + content: pin.element, + gmpClickable: true, + }); + // [END maps_advanced_markers_accessibility_marker] + // [START maps_advanced_markers_accessibility_event_listener] + // Add a click listener for each marker, and set up the info window. + marker.addListener('click', ({ domEvent, latLng }) => { + const { target } = domEvent; + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + // [END maps_advanced_markers_accessibility_event_listener] + }); +} + +initMap(); +// [END maps_advanced_markers_accessibility] \ No newline at end of file diff --git a/dist/samples/advanced-markers-accessibility/docs/style.css b/dist/samples/advanced-markers-accessibility/docs/style.css new file mode 100644 index 00000000..635c259f --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/docs/style.css @@ -0,0 +1,25 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_advanced_markers_accessibility] */ +/* + * 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_advanced_markers_accessibility] */ \ No newline at end of file diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.css b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.css new file mode 100644 index 00000000..fa4d8cd3 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/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/advanced-markers-accessibility/jsfiddle/demo.details b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.details new file mode 100644 index 00000000..165704f7 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.details @@ -0,0 +1,7 @@ +name: advanced-markers-accessibility +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-accessibility/jsfiddle/demo.html b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html new file mode 100644 index 00000000..c09d9b91 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html @@ -0,0 +1,23 @@ + + + + + + Advanced Marker Accessibility + + + + + +
    + + + + + + diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js new file mode 100644 index 00000000..9ab8e3d7 --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js @@ -0,0 +1,71 @@ +"use strict"; +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +async function initMap() { + // Request needed libraries. + const { Map, InfoWindow } = await google.maps.importLibrary("maps"); + const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); + const map = new Map(document.getElementById("map"), { + zoom: 12, + center: { lat: 34.84555, lng: -111.8035 }, + mapId: '4504f8b37365c3d0', + }); + // Set LatLng and title text for the markers. The first marker (Boynton Pass) + // receives the initial focus when tab is pressed. Use arrow keys to move + // between markers; press tab again to cycle through the map controls. + const tourStops = [ + { + position: { lat: 34.8791806, lng: -111.8265049 }, + title: "Boynton Pass" + }, + { + position: { lat: 34.8559195, lng: -111.7988186 }, + title: "Airport Mesa" + }, + { + position: { lat: 34.832149, lng: -111.7695277 }, + title: "Chapel of the Holy Cross" + }, + { + position: { lat: 34.823736, lng: -111.8001857 }, + title: "Red Rock Crossing" + }, + { + position: { lat: 34.800326, lng: -111.7665047 }, + title: "Bell Rock" + }, + ]; + // Create an info window to share between markers. + const infoWindow = new InfoWindow(); + // Create the markers. + tourStops.forEach(({ position, title }, i) => { + const pin = new PinElement({ + glyph: `${i + 1}`, + scale: 1.5, + }); + + const marker = new AdvancedMarkerElement({ + position, + map, + title: `${i + 1}. ${title}`, + content: pin.element, + gmpClickable: true, + }); + + + // Add a click listener for each marker, and set up the info window. + marker.addListener('click', ({ domEvent, latLng }) => { + const { target } = domEvent; + infoWindow.close(); + infoWindow.setContent(marker.title); + infoWindow.open(marker.map, marker); + }); + + }); +} +initMap(); + diff --git a/package-lock.json b/package-lock.json index 94d54a43..df21ce7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -569,6 +569,10 @@ "resolved": "samples/address-validation", "link": true }, + "node_modules/@js-api-samples/advanced-markers-accessibility": { + "resolved": "samples/advanced-markers-accessibility", + "link": true + }, "node_modules/@js-api-samples/advanced-markers-animation": { "resolved": "samples/advanced-markers-animation", "link": true @@ -2423,6 +2427,10 @@ "name": "@js-api-samples/address-validation", "version": "1.0.0" }, + "samples/advanced-markers-accessibility": { + "name": "@js-api-samples/advanced-markers-accessibility", + "version": "1.0.0" + }, "samples/advanced-markers-animation": { "name": "@js-api-samples/advanced-markers-animation", "version": "1.0.0"