diff --git a/dist/samples/advanced-markers-accessibility/app/index.html b/dist/samples/advanced-markers-accessibility/app/index.html index 1eb28a32..0489d6fe 100644 --- a/dist/samples/advanced-markers-accessibility/app/index.html +++ b/dist/samples/advanced-markers-accessibility/app/index.html @@ -11,13 +11,13 @@ - - -
+ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); + + + diff --git a/dist/samples/advanced-markers-accessibility/app/index.ts b/dist/samples/advanced-markers-accessibility/app/index.ts index c716075f..f97eebc1 100644 --- a/dist/samples/advanced-markers-accessibility/app/index.ts +++ b/dist/samples/advanced-markers-accessibility/app/index.ts @@ -5,17 +5,13 @@ */ // [START maps_advanced_markers_accessibility] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + 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. @@ -47,19 +43,19 @@ async function initMap() { // Create the markers. tourStops.forEach(({position, title}, i) => { + // [START maps_advanced_markers_accessibility_marker] const pin = new PinElement({ //@ts-ignore glyphText: `${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, }); + marker.append(pin); + mapElement.append(marker); // [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. @@ -74,4 +70,4 @@ async function initMap() { } initMap(); -// [END maps_advanced_markers_accessibility] \ No newline at end of file +// [END maps_advanced_markers_accessibility] diff --git a/dist/samples/advanced-markers-accessibility/dist/assets/index-8ZTzap-z.js b/dist/samples/advanced-markers-accessibility/dist/assets/index-8ZTzap-z.js new file mode 100644 index 00000000..22759dbe --- /dev/null +++ b/dist/samples/advanced-markers-accessibility/dist/assets/index-8ZTzap-z.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"]'))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)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const u=document.querySelector("gmp-map");async function f(){const{Map:c,InfoWindow:n}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:s,PinElement:i}=await google.maps.importLibrary("marker"),e=[{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"}],t=new n;e.forEach(({position:r,title:a},l)=>{const p=new i({glyphText:`${l+1}`,scale:1.5}),o=new s({position:r,title:`${l+1}. ${a}`,gmpClickable:!0});o.append(p),u.append(o),o.addListener("click",({domEvent:d,latLng:m})=>{const{target:g}=d;t.close(),t.setContent(o.title),t.open(o.map,o)})})}f(); diff --git a/dist/samples/advanced-markers-accessibility/dist/assets/index-DuBZ4WNk.js b/dist/samples/advanced-markers-accessibility/dist/assets/index-DuBZ4WNk.js deleted file mode 100644 index 0ecd9c5f..00000000 --- a/dist/samples/advanced-markers-accessibility/dist/assets/index-DuBZ4WNk.js +++ /dev/null @@ -1,5 +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"]'))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({glyphText:`${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 index acd1ec9c..43eb22ad 100644 --- a/dist/samples/advanced-markers-accessibility/dist/index.html +++ b/dist/samples/advanced-markers-accessibility/dist/index.html @@ -9,15 +9,15 @@ Advanced Marker Accessibility - - - - -
+ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); + + + + + diff --git a/dist/samples/advanced-markers-accessibility/docs/index.html b/dist/samples/advanced-markers-accessibility/docs/index.html index 1eb28a32..0489d6fe 100644 --- a/dist/samples/advanced-markers-accessibility/docs/index.html +++ b/dist/samples/advanced-markers-accessibility/docs/index.html @@ -11,13 +11,13 @@ - - -
+ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); + + + diff --git a/dist/samples/advanced-markers-accessibility/docs/index.js b/dist/samples/advanced-markers-accessibility/docs/index.js index 5d4c7a48..9b3ef133 100644 --- a/dist/samples/advanced-markers-accessibility/docs/index.js +++ b/dist/samples/advanced-markers-accessibility/docs/index.js @@ -5,15 +5,11 @@ * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_accessibility] +const mapElement = document.querySelector('gmp-map'); 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. @@ -43,19 +39,19 @@ async function initMap() { const infoWindow = new InfoWindow(); // Create the markers. tourStops.forEach(({ position, title }, i) => { + // [START maps_advanced_markers_accessibility_marker] const pin = new PinElement({ //@ts-ignore glyphText: `${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, }); + marker.append(pin); + mapElement.append(marker); // [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. diff --git a/dist/samples/advanced-markers-accessibility/docs/index.ts b/dist/samples/advanced-markers-accessibility/docs/index.ts index c716075f..f97eebc1 100644 --- a/dist/samples/advanced-markers-accessibility/docs/index.ts +++ b/dist/samples/advanced-markers-accessibility/docs/index.ts @@ -5,17 +5,13 @@ */ // [START maps_advanced_markers_accessibility] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + 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. @@ -47,19 +43,19 @@ async function initMap() { // Create the markers. tourStops.forEach(({position, title}, i) => { + // [START maps_advanced_markers_accessibility_marker] const pin = new PinElement({ //@ts-ignore glyphText: `${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, }); + marker.append(pin); + mapElement.append(marker); // [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. @@ -74,4 +70,4 @@ async function initMap() { } initMap(); -// [END maps_advanced_markers_accessibility] \ No newline at end of file +// [END maps_advanced_markers_accessibility] diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html index c09d9b91..79c9cfaf 100644 --- a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.html @@ -11,13 +11,13 @@ - - -
+ ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"}); + + + diff --git a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js index 82519dcc..828434b2 100644 --- a/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-accessibility/jsfiddle/demo.js @@ -5,15 +5,11 @@ * SPDX-License-Identifier: Apache-2.0 */ +const mapElement = document.querySelector('gmp-map'); 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. @@ -43,19 +39,19 @@ async function initMap() { const infoWindow = new InfoWindow(); // Create the markers. tourStops.forEach(({ position, title }, i) => { + const pin = new PinElement({ //@ts-ignore glyphText: `${i + 1}`, scale: 1.5, }); - const marker = new AdvancedMarkerElement({ position, - map, title: `${i + 1}. ${title}`, - content: pin.element, gmpClickable: true, }); + marker.append(pin); + mapElement.append(marker); // Add a click listener for each marker, and set up the info window.