diff --git a/dist/samples/advanced-markers-basic-style/app/index.html b/dist/samples/advanced-markers-basic-style/app/index.html index 8bdfa9b9..c1aca1ab 100644 --- a/dist/samples/advanced-markers-basic-style/app/index.html +++ b/dist/samples/advanced-markers-basic-style/app/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-basic-style/app/index.ts b/dist/samples/advanced-markers-basic-style/app/index.ts index ad1b1b67..fa63f6c1 100644 --- a/dist/samples/advanced-markers-basic-style/app/index.ts +++ b/dist/samples/advanced-markers-basic-style/app/index.ts @@ -6,27 +6,22 @@ // [START maps_advanced_markers_basic_style] const parser = new DOMParser(); +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; async function initMap() { // Request needed libraries. const { Map } = 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, { - center: { lat: 37.419, lng: -122.02 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - - // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. + // Each PinElement is paired with a marker to demonstrate setting each parameter. // [START maps_advanced_markers_basic_style_title] // Default marker with title text (no PinElement). - const markerViewWithText = new AdvancedMarkerElement({ - map, + const markerWithText = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', }); + mapElement.append(markerWithText); // [END maps_advanced_markers_basic_style_title] // [START maps_advanced_markers_basic_style_scale] @@ -34,11 +29,11 @@ async function initMap() { const pinScaled = new PinElement({ scale: 1.5, }); - const markerViewScaled = new AdvancedMarkerElement({ - map, + const markerScaled = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.02 }, - content: pinScaled.element, }); + markerScaled.append(pinScaled); + mapElement.append(markerScaled); // [END maps_advanced_markers_basic_style_scale] // [START maps_advanced_markers_basic_style_background] @@ -46,11 +41,11 @@ async function initMap() { const pinBackground = new PinElement({ background: '#FBBC04', }); - const markerViewBackground = new AdvancedMarkerElement({ - map, + const markerBackground = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.01 }, - content: pinBackground.element, }); + markerBackground.append(pinBackground); + mapElement.append(markerBackground); // [END maps_advanced_markers_basic_style_background] // [START maps_advanced_markers_basic_style_border] @@ -58,11 +53,11 @@ async function initMap() { const pinBorder = new PinElement({ borderColor: '#137333', }); - const markerViewBorder = new AdvancedMarkerElement({ - map, + const markerBorder = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.035 }, - content: pinBorder.element, }); + markerBorder.append(pinBorder); + mapElement.append(markerBorder); // [END maps_advanced_markers_basic_style_border] // [START maps_advanced_markers_basic_style_glyph] @@ -70,11 +65,11 @@ async function initMap() { const pinGlyph = new PinElement({ glyphColor: 'white', }); - const markerViewGlyph = new AdvancedMarkerElement({ - map, + const markerGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.025 }, - content: pinGlyph.element, }); + markerGlyph.append(pinGlyph); + mapElement.append(markerGlyph); // [END maps_advanced_markers_basic_style_glyph] // [START maps_advanced_markers_basic_style_text_glyph] @@ -83,11 +78,11 @@ async function initMap() { glyphText: 'T', glyphColor: 'white', }); - const markerViewGlyphText = new AdvancedMarkerElement({ - map, + const markerGlyphText = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.015 }, - content: pinTextGlyph.element, }); + markerGlyphText.append(pinTextGlyph); + mapElement.append(markerGlyphText); // [END maps_advanced_markers_basic_style_text_glyph] // [START maps_advanced_markers_basic_style_hide_glyph] @@ -96,14 +91,14 @@ async function initMap() { //@ts-ignore glyphText: '', }); - const markerViewNoGlyph = new AdvancedMarkerElement({ - map, + const markerNoGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.005 }, - content: pinNoGlyph.element, }); + markerNoGlyph.append(pinNoGlyph); + mapElement.append(markerNoGlyph); // [END maps_advanced_markers_basic_style_hide_glyph] } initMap(); -// [END maps_advanced_markers_basic_style] \ No newline at end of file +// [END maps_advanced_markers_basic_style] diff --git a/dist/samples/advanced-markers-basic-style/app/style.css b/dist/samples/advanced-markers-basic-style/app/style.css index 66a5f08a..57f4b29d 100644 --- a/dist/samples/advanced-markers-basic-style/app/style.css +++ b/dist/samples/advanced-markers-basic-style/app/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-basic-style/dist/assets/index-B9CtUwB1.js b/dist/samples/advanced-markers-basic-style/dist/assets/index-B9CtUwB1.js new file mode 100644 index 00000000..7d297938 --- /dev/null +++ b/dist/samples/advanced-markers-basic-style/dist/assets/index-B9CtUwB1.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 p of t.addedNodes)p.tagName==="LINK"&&p.rel==="modulepreload"&&i(p)}).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)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */new DOMParser;const r=document.querySelector("gmp-map");async function h(){const{Map:m}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:n,PinElement:o}=await google.maps.importLibrary("marker"),i=new n({position:{lat:37.419,lng:-122.03},title:"Title text for the marker at lat: 37.419, lng: -122.03"});r.append(i);const e=new o({scale:1.5}),t=new n({position:{lat:37.419,lng:-122.02}});t.append(e),r.append(t);const p=new o({background:"#FBBC04"}),a=new n({position:{lat:37.419,lng:-122.01}});a.append(p),r.append(a);const u=new o({borderColor:"#137333"}),l=new n({position:{lat:37.415,lng:-122.035}});l.append(u),r.append(l);const g=new o({glyphColor:"white"}),s=new n({position:{lat:37.415,lng:-122.025}});s.append(g),r.append(s);const f=new o({glyphText:"T",glyphColor:"white"}),c=new n({position:{lat:37.415,lng:-122.015}});c.append(f),r.append(c);const y=new o({glyphText:""}),d=new n({position:{lat:37.415,lng:-122.005}});d.append(y),r.append(d)}h(); diff --git a/dist/samples/advanced-markers-draggable/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-basic-style/dist/assets/index-BOPY9jPg.css similarity index 61% rename from dist/samples/advanced-markers-draggable/dist/assets/index-DW_Ml_OD.css rename to dist/samples/advanced-markers-basic-style/dist/assets/index-BOPY9jPg.css index 672cb7cc..2de1147b 100644 --- a/dist/samples/advanced-markers-draggable/dist/assets/index-DW_Ml_OD.css +++ b/dist/samples/advanced-markers-basic-style/dist/assets/index-BOPY9jPg.css @@ -2,4 +2,4 @@ * @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} + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.js b/dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.js deleted file mode 100644 index aef69e46..00000000 --- a/dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.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"]'))o(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"&&o(i)}).observe(document,{childList:!0,subtree:!0});function r(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=r(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */new DOMParser;async function p(){const{Map:l}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:n,PinElement:r}=await google.maps.importLibrary("marker"),o=new l(document.getElementById("map"),{center:{lat:37.419,lng:-122.02},zoom:14,mapId:"4504f8b37365c3d0"});new n({map:o,position:{lat:37.419,lng:-122.03},title:"Title text for the marker at lat: 37.419, lng: -122.03"});const e=new r({scale:1.5});new n({map:o,position:{lat:37.419,lng:-122.02},content:e.element});const t=new r({background:"#FBBC04"});new n({map:o,position:{lat:37.419,lng:-122.01},content:t.element});const i=new r({borderColor:"#137333"});new n({map:o,position:{lat:37.415,lng:-122.035},content:i.element});const s=new r({glyphColor:"white"});new n({map:o,position:{lat:37.415,lng:-122.025},content:s.element});const c=new r({glyphText:"T",glyphColor:"white"});new n({map:o,position:{lat:37.415,lng:-122.015},content:c.element});const a=new r({glyphText:""});new n({map:o,position:{lat:37.415,lng:-122.005},content:a.element})}p(); diff --git a/dist/samples/advanced-markers-basic-style/dist/index.html b/dist/samples/advanced-markers-basic-style/dist/index.html index 86bb13e7..eae2c29a 100644 --- a/dist/samples/advanced-markers-basic-style/dist/index.html +++ b/dist/samples/advanced-markers-basic-style/dist/index.html @@ -9,15 +9,14 @@ Advanced Marker Basic Customization - - - - -
- + + + + + diff --git a/dist/samples/advanced-markers-basic-style/docs/index.html b/dist/samples/advanced-markers-basic-style/docs/index.html index 8bdfa9b9..c1aca1ab 100644 --- a/dist/samples/advanced-markers-basic-style/docs/index.html +++ b/dist/samples/advanced-markers-basic-style/docs/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-basic-style/docs/index.js b/dist/samples/advanced-markers-basic-style/docs/index.js index acd620a8..7f53c96a 100644 --- a/dist/samples/advanced-markers-basic-style/docs/index.js +++ b/dist/samples/advanced-markers-basic-style/docs/index.js @@ -6,67 +6,63 @@ */ // [START maps_advanced_markers_basic_style] const parser = new DOMParser(); +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.419, lng: -122.02 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. + // Each PinElement is paired with a marker to demonstrate setting each parameter. // [START maps_advanced_markers_basic_style_title] // Default marker with title text (no PinElement). - const markerViewWithText = new AdvancedMarkerElement({ - map, + const markerWithText = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', }); + mapElement.append(markerWithText); // [END maps_advanced_markers_basic_style_title] // [START maps_advanced_markers_basic_style_scale] // Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); - const markerViewScaled = new AdvancedMarkerElement({ - map, + const markerScaled = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.02 }, - content: pinScaled.element, }); + markerScaled.append(pinScaled); + mapElement.append(markerScaled); // [END maps_advanced_markers_basic_style_scale] // [START maps_advanced_markers_basic_style_background] // Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); - const markerViewBackground = new AdvancedMarkerElement({ - map, + const markerBackground = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.01 }, - content: pinBackground.element, }); + markerBackground.append(pinBackground); + mapElement.append(markerBackground); // [END maps_advanced_markers_basic_style_background] // [START maps_advanced_markers_basic_style_border] // Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); - const markerViewBorder = new AdvancedMarkerElement({ - map, + const markerBorder = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.035 }, - content: pinBorder.element, }); + markerBorder.append(pinBorder); + mapElement.append(markerBorder); // [END maps_advanced_markers_basic_style_border] // [START maps_advanced_markers_basic_style_glyph] // Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); - const markerViewGlyph = new AdvancedMarkerElement({ - map, + const markerGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.025 }, - content: pinGlyph.element, }); + markerGlyph.append(pinGlyph); + mapElement.append(markerGlyph); // [END maps_advanced_markers_basic_style_glyph] // [START maps_advanced_markers_basic_style_text_glyph] const pinTextGlyph = new PinElement({ @@ -74,11 +70,11 @@ async function initMap() { glyphText: 'T', glyphColor: 'white', }); - const markerViewGlyphText = new AdvancedMarkerElement({ - map, + const markerGlyphText = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.015 }, - content: pinTextGlyph.element, }); + markerGlyphText.append(pinTextGlyph); + mapElement.append(markerGlyphText); // [END maps_advanced_markers_basic_style_text_glyph] // [START maps_advanced_markers_basic_style_hide_glyph] // Hide the glyph. @@ -86,11 +82,11 @@ async function initMap() { //@ts-ignore glyphText: '', }); - const markerViewNoGlyph = new AdvancedMarkerElement({ - map, + const markerNoGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.005 }, - content: pinNoGlyph.element, }); + markerNoGlyph.append(pinNoGlyph); + mapElement.append(markerNoGlyph); // [END maps_advanced_markers_basic_style_hide_glyph] } initMap(); diff --git a/dist/samples/advanced-markers-basic-style/docs/index.ts b/dist/samples/advanced-markers-basic-style/docs/index.ts index ad1b1b67..fa63f6c1 100644 --- a/dist/samples/advanced-markers-basic-style/docs/index.ts +++ b/dist/samples/advanced-markers-basic-style/docs/index.ts @@ -6,27 +6,22 @@ // [START maps_advanced_markers_basic_style] const parser = new DOMParser(); +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; async function initMap() { // Request needed libraries. const { Map } = 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, { - center: { lat: 37.419, lng: -122.02 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - - // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. + // Each PinElement is paired with a marker to demonstrate setting each parameter. // [START maps_advanced_markers_basic_style_title] // Default marker with title text (no PinElement). - const markerViewWithText = new AdvancedMarkerElement({ - map, + const markerWithText = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', }); + mapElement.append(markerWithText); // [END maps_advanced_markers_basic_style_title] // [START maps_advanced_markers_basic_style_scale] @@ -34,11 +29,11 @@ async function initMap() { const pinScaled = new PinElement({ scale: 1.5, }); - const markerViewScaled = new AdvancedMarkerElement({ - map, + const markerScaled = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.02 }, - content: pinScaled.element, }); + markerScaled.append(pinScaled); + mapElement.append(markerScaled); // [END maps_advanced_markers_basic_style_scale] // [START maps_advanced_markers_basic_style_background] @@ -46,11 +41,11 @@ async function initMap() { const pinBackground = new PinElement({ background: '#FBBC04', }); - const markerViewBackground = new AdvancedMarkerElement({ - map, + const markerBackground = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.01 }, - content: pinBackground.element, }); + markerBackground.append(pinBackground); + mapElement.append(markerBackground); // [END maps_advanced_markers_basic_style_background] // [START maps_advanced_markers_basic_style_border] @@ -58,11 +53,11 @@ async function initMap() { const pinBorder = new PinElement({ borderColor: '#137333', }); - const markerViewBorder = new AdvancedMarkerElement({ - map, + const markerBorder = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.035 }, - content: pinBorder.element, }); + markerBorder.append(pinBorder); + mapElement.append(markerBorder); // [END maps_advanced_markers_basic_style_border] // [START maps_advanced_markers_basic_style_glyph] @@ -70,11 +65,11 @@ async function initMap() { const pinGlyph = new PinElement({ glyphColor: 'white', }); - const markerViewGlyph = new AdvancedMarkerElement({ - map, + const markerGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.025 }, - content: pinGlyph.element, }); + markerGlyph.append(pinGlyph); + mapElement.append(markerGlyph); // [END maps_advanced_markers_basic_style_glyph] // [START maps_advanced_markers_basic_style_text_glyph] @@ -83,11 +78,11 @@ async function initMap() { glyphText: 'T', glyphColor: 'white', }); - const markerViewGlyphText = new AdvancedMarkerElement({ - map, + const markerGlyphText = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.015 }, - content: pinTextGlyph.element, }); + markerGlyphText.append(pinTextGlyph); + mapElement.append(markerGlyphText); // [END maps_advanced_markers_basic_style_text_glyph] // [START maps_advanced_markers_basic_style_hide_glyph] @@ -96,14 +91,14 @@ async function initMap() { //@ts-ignore glyphText: '', }); - const markerViewNoGlyph = new AdvancedMarkerElement({ - map, + const markerNoGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.005 }, - content: pinNoGlyph.element, }); + markerNoGlyph.append(pinNoGlyph); + mapElement.append(markerNoGlyph); // [END maps_advanced_markers_basic_style_hide_glyph] } initMap(); -// [END maps_advanced_markers_basic_style] \ No newline at end of file +// [END maps_advanced_markers_basic_style] diff --git a/dist/samples/advanced-markers-basic-style/docs/style.css b/dist/samples/advanced-markers-basic-style/docs/style.css index 66a5f08a..57f4b29d 100644 --- a/dist/samples/advanced-markers-basic-style/docs/style.css +++ b/dist/samples/advanced-markers-basic-style/docs/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.css b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.css index fa4d8cd3..211f559b 100644 --- a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.html b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.html index a9c0e17a..d86218a7 100644 --- a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js index 0b6537ad..be8cf8e9 100644 --- a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js @@ -6,67 +6,63 @@ */ const parser = new DOMParser(); +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.419, lng: -122.02 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. + // Each PinElement is paired with a marker to demonstrate setting each parameter. // Default marker with title text (no PinElement). - const markerViewWithText = new AdvancedMarkerElement({ - map, + const markerWithText = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.03 }, title: 'Title text for the marker at lat: 37.419, lng: -122.03', }); + mapElement.append(markerWithText); // Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); - const markerViewScaled = new AdvancedMarkerElement({ - map, + const markerScaled = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.02 }, - content: pinScaled.element, }); + markerScaled.append(pinScaled); + mapElement.append(markerScaled); // Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); - const markerViewBackground = new AdvancedMarkerElement({ - map, + const markerBackground = new AdvancedMarkerElement({ position: { lat: 37.419, lng: -122.01 }, - content: pinBackground.element, }); + markerBackground.append(pinBackground); + mapElement.append(markerBackground); // Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); - const markerViewBorder = new AdvancedMarkerElement({ - map, + const markerBorder = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.035 }, - content: pinBorder.element, }); + markerBorder.append(pinBorder); + mapElement.append(markerBorder); // Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); - const markerViewGlyph = new AdvancedMarkerElement({ - map, + const markerGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.025 }, - content: pinGlyph.element, }); + markerGlyph.append(pinGlyph); + mapElement.append(markerGlyph); const pinTextGlyph = new PinElement({ @@ -74,11 +70,11 @@ async function initMap() { glyphText: 'T', glyphColor: 'white', }); - const markerViewGlyphText = new AdvancedMarkerElement({ - map, + const markerGlyphText = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.015 }, - content: pinTextGlyph.element, }); + markerGlyphText.append(pinTextGlyph); + mapElement.append(markerGlyphText); // Hide the glyph. @@ -86,11 +82,11 @@ async function initMap() { //@ts-ignore glyphText: '', }); - const markerViewNoGlyph = new AdvancedMarkerElement({ - map, + const markerNoGlyph = new AdvancedMarkerElement({ position: { lat: 37.415, lng: -122.005 }, - content: pinNoGlyph.element, }); + markerNoGlyph.append(pinNoGlyph); + mapElement.append(markerNoGlyph); } initMap(); diff --git a/dist/samples/advanced-markers-collision/app/index.html b/dist/samples/advanced-markers-collision/app/index.html index c9d4e412..b4725575 100644 --- a/dist/samples/advanced-markers-collision/app/index.html +++ b/dist/samples/advanced-markers-collision/app/index.html @@ -21,10 +21,13 @@ + +
-
+
- - - diff --git a/dist/samples/advanced-markers-collision/app/index.ts b/dist/samples/advanced-markers-collision/app/index.ts index 4fb454db..e2a85d36 100644 --- a/dist/samples/advanced-markers-collision/app/index.ts +++ b/dist/samples/advanced-markers-collision/app/index.ts @@ -6,33 +6,27 @@ // eslint-disable no-undef // [START maps_advanced_markers_collision] -let map: google.maps.Map; +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; // Initialize and add the map async function initMap(): Promise { // 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 { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; + let markers: google.maps.marker.AdvancedMarkerElement[] = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED; - map = new Map( - document.getElementById("map") as HTMLElement, - { - mapId: "6ff586e93e18149f", - center: { lat: 47.609414458375674, lng: -122.33897030353548 }, - zoom: 17, - } as google.maps.MapOptions - ); - // @ts-ignore const select = new mdc.select.MDCSelect( document.querySelector(".mdc-select") as HTMLElement ); - select.listen("MDCSelect:change", () => { collisionBehavior = select.value; markers.forEach((marker) => { @@ -63,13 +57,13 @@ async function initMap(): Promise { // [START maps_advanced_markers_collision_create_marker] const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), - map, collisionBehavior: collisionBehavior, }); + mapElement.appendChild(advancedMarker); // [END maps_advanced_markers_collision_create_marker] markers.push(advancedMarker); }); } initMap(); -// [END maps_advanced_markers_collision] \ No newline at end of file +// [END maps_advanced_markers_collision] diff --git a/dist/samples/advanced-markers-collision/app/style.css b/dist/samples/advanced-markers-collision/app/style.css index e59fa27b..b5ead478 100644 --- a/dist/samples/advanced-markers-collision/app/style.css +++ b/dist/samples/advanced-markers-collision/app/style.css @@ -40,13 +40,13 @@ body { flex-basis: 15rem; flex-grow: 1; padding: 1rem; - max-width: 30rem; + max-width: 33rem; height: 100%; box-sizing: border-box; overflow: auto; } -#map { +gmp-map { flex-basis: 0; flex-grow: 4; height: 100%; diff --git a/dist/samples/advanced-markers-collision/dist/assets/index-B1kLTfiY.css b/dist/samples/advanced-markers-collision/dist/assets/index-CSEW3kTE.css similarity index 85% rename from dist/samples/advanced-markers-collision/dist/assets/index-B1kLTfiY.css rename to dist/samples/advanced-markers-collision/dist/assets/index-CSEW3kTE.css index 09e3a125..46f6c6ae 100644 --- a/dist/samples/advanced-markers-collision/dist/assets/index-B1kLTfiY.css +++ b/dist/samples/advanced-markers-collision/dist/assets/index-CSEW3kTE.css @@ -2,4 +2,4 @@ * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 - */:root{--mdc-theme-primary: #1a73e8;--mdc-theme-secondary: #rgb(225, 245, 254);--mdc-theme-on-primary: #fff;--mdc-theme-on-secondary: rgb(1, 87, 155)}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mdc-theme-primary)}.mdc-select--focused .mdc-select__dropdown-icon{background:url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E) no-repeat center}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:var(--mdc-theme-primary)}html,body{height:100%;margin:0;padding:0}#container{height:100%;display:flex}#sidebar{flex-basis:15rem;flex-grow:1;padding:1rem;max-width:30rem;height:100%;box-sizing:border-box;overflow:auto}#map{flex-basis:0;flex-grow:4;height:100%}.mdc-select,.mdc-select__anchor,.mdc-select__menu{width:100%} + */:root{--mdc-theme-primary: #1a73e8;--mdc-theme-secondary: #rgb(225, 245, 254);--mdc-theme-on-primary: #fff;--mdc-theme-on-secondary: rgb(1, 87, 155)}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:var(--mdc-theme-primary)}.mdc-select--focused .mdc-select__dropdown-icon{background:url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E) no-repeat center}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:var(--mdc-theme-primary)}html,body{height:100%;margin:0;padding:0}#container{height:100%;display:flex}#sidebar{flex-basis:15rem;flex-grow:1;padding:1rem;max-width:33rem;height:100%;box-sizing:border-box;overflow:auto}gmp-map{flex-basis:0;flex-grow:4;height:100%}.mdc-select,.mdc-select__anchor,.mdc-select__menu{width:100%} diff --git a/dist/samples/advanced-markers-collision/dist/assets/index-DVEpXRXB.js b/dist/samples/advanced-markers-collision/dist/assets/index-DVEpXRXB.js new file mode 100644 index 00000000..9c043b56 --- /dev/null +++ b/dist/samples/advanced-markers-collision/dist/assets/index-DVEpXRXB.js @@ -0,0 +1,5 @@ +(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&t(r)}).observe(document,{childList:!0,subtree:!0});function n(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 t(e){if(e.ep)return;e.ep=!0;const o=n(e);fetch(e.href,o)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const a=document.querySelector("gmp-map");async function u(){const{Map:s}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker");let n=[],t=google.maps.CollisionBehavior.REQUIRED;const e=new mdc.select.MDCSelect(document.querySelector(".mdc-select"));e.listen("MDCSelect:change",()=>{t=e.value,n.forEach(r=>{r.collisionBehavior=t})}),e.value=t,[[-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]].forEach(([r,l])=>{const c=new i({position:new google.maps.LatLng({lat:l,lng:r}),collisionBehavior:t});a.appendChild(c),n.push(c)})}u(); diff --git a/dist/samples/advanced-markers-collision/dist/assets/index-z7rYeqFA.js b/dist/samples/advanced-markers-collision/dist/assets/index-z7rYeqFA.js deleted file mode 100644 index a5abf91d..00000000 --- a/dist/samples/advanced-markers-collision/dist/assets/index-z7rYeqFA.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.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 n(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=n(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */let s;async function u(){const{Map:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker");let n=[],o=google.maps.CollisionBehavior.REQUIRED;s=new c(document.getElementById("map"),{mapId:"6ff586e93e18149f",center:{lat:47.609414458375674,lng:-122.33897030353548},zoom:17});const e=new mdc.select.MDCSelect(document.querySelector(".mdc-select"));e.listen("MDCSelect:change",()=>{o=e.value,n.forEach(r=>{r.collisionBehavior=o})}),e.value=o,[[-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]].forEach(([r,l])=>{const a=new i({position:new google.maps.LatLng({lat:l,lng:r}),map:s,collisionBehavior:o});n.push(a)})}u(); diff --git a/dist/samples/advanced-markers-collision/dist/index.html b/dist/samples/advanced-markers-collision/dist/index.html index 1bd2f937..d8f51325 100644 --- a/dist/samples/advanced-markers-collision/dist/index.html +++ b/dist/samples/advanced-markers-collision/dist/index.html @@ -19,12 +19,15 @@ href="https://fonts.googleapis.com/icon?family=Material+Icons" /> - - + + + +
-
+
- - - diff --git a/dist/samples/advanced-markers-collision/docs/index.html b/dist/samples/advanced-markers-collision/docs/index.html index c9d4e412..b4725575 100644 --- a/dist/samples/advanced-markers-collision/docs/index.html +++ b/dist/samples/advanced-markers-collision/docs/index.html @@ -21,10 +21,13 @@ + +
-
+
- - - diff --git a/dist/samples/advanced-markers-collision/docs/index.js b/dist/samples/advanced-markers-collision/docs/index.js index cb067f62..d081da10 100644 --- a/dist/samples/advanced-markers-collision/docs/index.js +++ b/dist/samples/advanced-markers-collision/docs/index.js @@ -6,19 +6,14 @@ */ // eslint-disable no-undef // [START maps_advanced_markers_collision] -let map; +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"); + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); let markers = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED; - map = new Map(document.getElementById("map"), { - mapId: "6ff586e93e18149f", - center: { lat: 47.609414458375674, lng: -122.33897030353548 }, - zoom: 17, - }); // @ts-ignore const select = new mdc.select.MDCSelect(document.querySelector(".mdc-select")); select.listen("MDCSelect:change", () => { @@ -48,9 +43,9 @@ async function initMap() { // [START maps_advanced_markers_collision_create_marker] const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), - map, collisionBehavior: collisionBehavior, }); + mapElement.appendChild(advancedMarker); // [END maps_advanced_markers_collision_create_marker] markers.push(advancedMarker); }); diff --git a/dist/samples/advanced-markers-collision/docs/index.ts b/dist/samples/advanced-markers-collision/docs/index.ts index 4fb454db..e2a85d36 100644 --- a/dist/samples/advanced-markers-collision/docs/index.ts +++ b/dist/samples/advanced-markers-collision/docs/index.ts @@ -6,33 +6,27 @@ // eslint-disable no-undef // [START maps_advanced_markers_collision] -let map: google.maps.Map; +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; // Initialize and add the map async function initMap(): Promise { // 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 { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; + let markers: google.maps.marker.AdvancedMarkerElement[] = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED; - map = new Map( - document.getElementById("map") as HTMLElement, - { - mapId: "6ff586e93e18149f", - center: { lat: 47.609414458375674, lng: -122.33897030353548 }, - zoom: 17, - } as google.maps.MapOptions - ); - // @ts-ignore const select = new mdc.select.MDCSelect( document.querySelector(".mdc-select") as HTMLElement ); - select.listen("MDCSelect:change", () => { collisionBehavior = select.value; markers.forEach((marker) => { @@ -63,13 +57,13 @@ async function initMap(): Promise { // [START maps_advanced_markers_collision_create_marker] const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), - map, collisionBehavior: collisionBehavior, }); + mapElement.appendChild(advancedMarker); // [END maps_advanced_markers_collision_create_marker] markers.push(advancedMarker); }); } initMap(); -// [END maps_advanced_markers_collision] \ No newline at end of file +// [END maps_advanced_markers_collision] diff --git a/dist/samples/advanced-markers-collision/docs/style.css b/dist/samples/advanced-markers-collision/docs/style.css index e59fa27b..b5ead478 100644 --- a/dist/samples/advanced-markers-collision/docs/style.css +++ b/dist/samples/advanced-markers-collision/docs/style.css @@ -40,13 +40,13 @@ body { flex-basis: 15rem; flex-grow: 1; padding: 1rem; - max-width: 30rem; + max-width: 33rem; height: 100%; box-sizing: border-box; overflow: auto; } -#map { +gmp-map { flex-basis: 0; flex-grow: 4; height: 100%; diff --git a/dist/samples/advanced-markers-collision/jsfiddle/demo.css b/dist/samples/advanced-markers-collision/jsfiddle/demo.css index 40292ca2..b64ffb42 100644 --- a/dist/samples/advanced-markers-collision/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-collision/jsfiddle/demo.css @@ -40,13 +40,13 @@ body { flex-basis: 15rem; flex-grow: 1; padding: 1rem; - max-width: 30rem; + max-width: 33rem; height: 100%; box-sizing: border-box; overflow: auto; } -#map { +gmp-map { flex-basis: 0; flex-grow: 4; height: 100%; diff --git a/dist/samples/advanced-markers-collision/jsfiddle/demo.html b/dist/samples/advanced-markers-collision/jsfiddle/demo.html index eec1a5ae..0f05e76d 100644 --- a/dist/samples/advanced-markers-collision/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-collision/jsfiddle/demo.html @@ -21,10 +21,13 @@ + +
-
+
- - - diff --git a/dist/samples/advanced-markers-collision/jsfiddle/demo.js b/dist/samples/advanced-markers-collision/jsfiddle/demo.js index 920536d4..5f50f31e 100644 --- a/dist/samples/advanced-markers-collision/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-collision/jsfiddle/demo.js @@ -6,19 +6,14 @@ */ // eslint-disable no-undef -let map; +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"); + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); let markers = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED; - map = new Map(document.getElementById("map"), { - mapId: "6ff586e93e18149f", - center: { lat: 47.609414458375674, lng: -122.33897030353548 }, - zoom: 17, - }); // @ts-ignore const select = new mdc.select.MDCSelect(document.querySelector(".mdc-select")); select.listen("MDCSelect:change", () => { @@ -48,9 +43,9 @@ async function initMap() { const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), - map, collisionBehavior: collisionBehavior, }); + mapElement.appendChild(advancedMarker); markers.push(advancedMarker); }); diff --git a/dist/samples/advanced-markers-draggable/app/index.html b/dist/samples/advanced-markers-draggable/app/index.html index e61373da..e1df7bfc 100644 --- a/dist/samples/advanced-markers-draggable/app/index.html +++ b/dist/samples/advanced-markers-draggable/app/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-draggable/app/index.ts b/dist/samples/advanced-markers-draggable/app/index.ts index b7268104..a5e3639e 100644 --- a/dist/samples/advanced-markers-draggable/app/index.ts +++ b/dist/samples/advanced-markers-draggable/app/index.ts @@ -5,35 +5,31 @@ */ // [START maps_advanced_markers_draggable] +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 } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - - const map = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.39094933041195, lng: -122.02503913145092}, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const infoWindow = new InfoWindow(); // [START maps_advanced_markers_draggable_marker] const draggableMarker = new AdvancedMarkerElement({ - map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, gmpDraggable: true, title: "This marker is draggable.", }); + mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] + draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position as google.maps.LatLng; infoWindow.close(); infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`); infoWindow.open(draggableMarker.map, draggableMarker); }); - } initMap(); -// [END maps_advanced_markers_draggable] \ No newline at end of file +// [END maps_advanced_markers_draggable] diff --git a/dist/samples/advanced-markers-draggable/app/style.css b/dist/samples/advanced-markers-draggable/app/style.css index 316c1899..1d28b1cb 100644 --- a/dist/samples/advanced-markers-draggable/app/style.css +++ b/dist/samples/advanced-markers-draggable/app/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-basic-style/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-draggable/dist/assets/index-BOPY9jPg.css similarity index 61% rename from dist/samples/advanced-markers-basic-style/dist/assets/index-DW_Ml_OD.css rename to dist/samples/advanced-markers-draggable/dist/assets/index-BOPY9jPg.css index 672cb7cc..2de1147b 100644 --- a/dist/samples/advanced-markers-basic-style/dist/assets/index-DW_Ml_OD.css +++ b/dist/samples/advanced-markers-draggable/dist/assets/index-BOPY9jPg.css @@ -2,4 +2,4 @@ * @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} + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-draggable/dist/assets/index-D0rjiuks.js b/dist/samples/advanced-markers-draggable/dist/assets/index-D0rjiuks.js new file mode 100644 index 00000000..dff45975 --- /dev/null +++ b/dist/samples/advanced-markers-draggable/dist/assets/index-D0rjiuks.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 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 r(e){if(e.ep)return;e.ep=!0;const t=i(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const a=document.querySelector("gmp-map");async function c(){const{Map:s,InfoWindow:n}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker"),r=new n,e=new i({position:{lat:37.39094933041195,lng:-122.02503913145092},gmpDraggable:!0,title:"This marker is draggable."});a.append(e),e.addListener("dragend",t=>{const o=e.position;r.close(),r.setContent(`Pin dropped at: ${o.lat}, ${o.lng}`),r.open(e.map,e)})}c(); diff --git a/dist/samples/advanced-markers-draggable/dist/assets/index-xBd1d_SC.js b/dist/samples/advanced-markers-draggable/dist/assets/index-xBd1d_SC.js deleted file mode 100644 index 830d23b8..00000000 --- a/dist/samples/advanced-markers-draggable/dist/assets/index-xBd1d_SC.js +++ /dev/null @@ -1,5 +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"]'))o(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"&&o(n)}).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)}})();/** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */async function c(){const{Map:s,InfoWindow:r}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:i}=await google.maps.importLibrary("marker"),o=new s(document.getElementById("map"),{center:{lat:37.39094933041195,lng:-122.02503913145092},zoom:14,mapId:"4504f8b37365c3d0"}),e=new r,t=new i({map:o,position:{lat:37.39094933041195,lng:-122.02503913145092},gmpDraggable:!0,title:"This marker is draggable."});t.addListener("dragend",n=>{const a=t.position;e.close(),e.setContent(`Pin dropped at: ${a.lat}, ${a.lng}`),e.open(t.map,t)})}c(); diff --git a/dist/samples/advanced-markers-draggable/dist/index.html b/dist/samples/advanced-markers-draggable/dist/index.html index a7afa8bb..82e21567 100644 --- a/dist/samples/advanced-markers-draggable/dist/index.html +++ b/dist/samples/advanced-markers-draggable/dist/index.html @@ -9,15 +9,14 @@ Draggable Advanced Marker - - - - -
- + + + + + diff --git a/dist/samples/advanced-markers-draggable/docs/index.html b/dist/samples/advanced-markers-draggable/docs/index.html index e61373da..e1df7bfc 100644 --- a/dist/samples/advanced-markers-draggable/docs/index.html +++ b/dist/samples/advanced-markers-draggable/docs/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-draggable/docs/index.js b/dist/samples/advanced-markers-draggable/docs/index.js index 97393ccd..7c475d38 100644 --- a/dist/samples/advanced-markers-draggable/docs/index.js +++ b/dist/samples/advanced-markers-draggable/docs/index.js @@ -5,23 +5,19 @@ * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_draggable] +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.39094933041195, lng: -122.02503913145092 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const infoWindow = new InfoWindow(); // [START maps_advanced_markers_draggable_marker] const draggableMarker = new AdvancedMarkerElement({ - map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, gmpDraggable: true, title: "This marker is draggable.", }); + mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position; diff --git a/dist/samples/advanced-markers-draggable/docs/index.ts b/dist/samples/advanced-markers-draggable/docs/index.ts index b7268104..a5e3639e 100644 --- a/dist/samples/advanced-markers-draggable/docs/index.ts +++ b/dist/samples/advanced-markers-draggable/docs/index.ts @@ -5,35 +5,31 @@ */ // [START maps_advanced_markers_draggable] +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 } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; - - const map = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.39094933041195, lng: -122.02503913145092}, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const infoWindow = new InfoWindow(); // [START maps_advanced_markers_draggable_marker] const draggableMarker = new AdvancedMarkerElement({ - map, position: {lat: 37.39094933041195, lng: -122.02503913145092}, gmpDraggable: true, title: "This marker is draggable.", }); + mapElement.append(draggableMarker); // [END maps_advanced_markers_draggable_marker] + draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position as google.maps.LatLng; infoWindow.close(); infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`); infoWindow.open(draggableMarker.map, draggableMarker); }); - } initMap(); -// [END maps_advanced_markers_draggable] \ No newline at end of file +// [END maps_advanced_markers_draggable] diff --git a/dist/samples/advanced-markers-draggable/docs/style.css b/dist/samples/advanced-markers-draggable/docs/style.css index 316c1899..1d28b1cb 100644 --- a/dist/samples/advanced-markers-draggable/docs/style.css +++ b/dist/samples/advanced-markers-draggable/docs/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-draggable/jsfiddle/demo.css b/dist/samples/advanced-markers-draggable/jsfiddle/demo.css index fa4d8cd3..211f559b 100644 --- a/dist/samples/advanced-markers-draggable/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-draggable/jsfiddle/demo.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-draggable/jsfiddle/demo.html b/dist/samples/advanced-markers-draggable/jsfiddle/demo.html index 457f2e88..e9ddc501 100644 --- a/dist/samples/advanced-markers-draggable/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-draggable/jsfiddle/demo.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-draggable/jsfiddle/demo.js b/dist/samples/advanced-markers-draggable/jsfiddle/demo.js index db66d681..c3ef7223 100644 --- a/dist/samples/advanced-markers-draggable/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-draggable/jsfiddle/demo.js @@ -5,23 +5,19 @@ * 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 } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.39094933041195, lng: -122.02503913145092 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const infoWindow = new InfoWindow(); const draggableMarker = new AdvancedMarkerElement({ - map, position: { lat: 37.39094933041195, lng: -122.02503913145092 }, gmpDraggable: true, title: "This marker is draggable.", }); + mapElement.append(draggableMarker); draggableMarker.addListener('dragend', (event) => { const position = draggableMarker.position; diff --git a/dist/samples/advanced-markers-html-simple/app/index.html b/dist/samples/advanced-markers-html-simple/app/index.html index 5b177756..63f996e1 100644 --- a/dist/samples/advanced-markers-html-simple/app/index.html +++ b/dist/samples/advanced-markers-html-simple/app/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-html-simple/app/index.ts b/dist/samples/advanced-markers-html-simple/app/index.ts index a722b171..406a47d5 100644 --- a/dist/samples/advanced-markers-html-simple/app/index.ts +++ b/dist/samples/advanced-markers-html-simple/app/index.ts @@ -6,26 +6,26 @@ // [START maps_advanced_markers_html_simple] // [START maps_advanced_markers_html_simple_snippet] +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; + 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 map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.42, lng: -122.1 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; - const priceTag = document.createElement('div'); - priceTag.className = 'price-tag'; - priceTag.textContent = '$2.5M'; + const priceTag = document.createElement("div"); + priceTag.className = "price-tag"; + priceTag.textContent = "$2.5M"; const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.42, lng: -122.1 }, - content: priceTag, }); + marker.append(priceTag); + mapElement.append(marker); } // [END maps_advanced_markers_html_simple_snippet] initMap(); diff --git a/dist/samples/advanced-markers-html-simple/app/style.css b/dist/samples/advanced-markers-html-simple/app/style.css index 489a5547..5f17b9d8 100644 --- a/dist/samples/advanced-markers-html-simple/app/style.css +++ b/dist/samples/advanced-markers-html-simple/app/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } @@ -24,9 +24,9 @@ body { /* HTML marker styles */ .price-tag { - background-color: #4285F4; + background-color: #4285f4; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; font-size: 14px; padding: 10px 15px; position: relative; @@ -43,7 +43,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #4285F4; + border-top: 8px solid #4285f4; } -/* [END maps_advanced_markers_html_simple] */ \ No newline at end of file +/* [END maps_advanced_markers_html_simple] */ diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-1wmlXvj8.js b/dist/samples/advanced-markers-html-simple/dist/assets/index-1wmlXvj8.js new file mode 100644 index 00000000..c5e62ffa --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/dist/assets/index-1wmlXvj8.js @@ -0,0 +1,5 @@ +(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))n(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"&&n(i)}).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 n(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const c=document.querySelector("gmp-map");async function a(){const{Map:s}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),o=document.createElement("div");o.className="price-tag",o.textContent="$2.5M";const n=new r({position:{lat:37.42,lng:-122.1}});n.append(o),c.append(n)}a(); diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-B8k9Te69.css b/dist/samples/advanced-markers-html-simple/dist/assets/index-B8k9Te69.css new file mode 100644 index 00000000..04add897 --- /dev/null +++ b/dist/samples/advanced-markers-html-simple/dist/assets/index-B8k9Te69.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0}.price-tag{background-color:#4285f4;border-radius:8px;color:#fff;font-size:14px;padding:10px 15px;position:relative;transform:translateY(-8px)}.price-tag:after{content:"";position:absolute;left:50%;top:100%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #4285f4} diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css b/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css deleted file mode 100644 index a88e35fb..00000000 --- a/dist/samples/advanced-markers-html-simple/dist/assets/index-Bzi1-kwo.css +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @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}.price-tag{background-color:#4285f4;border-radius:8px;color:#fff;font-size:14px;padding:10px 15px;position:relative;transform:translateY(-8px)}.price-tag:after{content:"";position:absolute;left:50%;top:100%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #4285F4} diff --git a/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js b/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js deleted file mode 100644 index e5c95aa9..00000000 --- a/dist/samples/advanced-markers-html-simple/dist/assets/index-CLyJqEP7.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.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 i of t.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&r(i)}).observe(document,{childList:!0,subtree:!0});function n(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=n(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */async function s(){const{Map:c}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o}=await google.maps.importLibrary("marker"),n=new c(document.getElementById("map"),{center:{lat:37.42,lng:-122.1},zoom:14,mapId:"4504f8b37365c3d0"}),r=document.createElement("div");r.className="price-tag",r.textContent="$2.5M",new o({map:n,position:{lat:37.42,lng:-122.1},content:r})}s(); diff --git a/dist/samples/advanced-markers-html-simple/dist/index.html b/dist/samples/advanced-markers-html-simple/dist/index.html index 89986891..def75d28 100644 --- a/dist/samples/advanced-markers-html-simple/dist/index.html +++ b/dist/samples/advanced-markers-html-simple/dist/index.html @@ -1,4 +1,4 @@ - + + + + + + diff --git a/dist/samples/advanced-markers-html-simple/docs/index.html b/dist/samples/advanced-markers-html-simple/docs/index.html index 5b177756..63f996e1 100644 --- a/dist/samples/advanced-markers-html-simple/docs/index.html +++ b/dist/samples/advanced-markers-html-simple/docs/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-html-simple/docs/index.js b/dist/samples/advanced-markers-html-simple/docs/index.js index 433faacf..1d96a266 100644 --- a/dist/samples/advanced-markers-html-simple/docs/index.js +++ b/dist/samples/advanced-markers-html-simple/docs/index.js @@ -6,23 +6,19 @@ */ // [START maps_advanced_markers_html_simple] // [START maps_advanced_markers_html_simple_snippet] +const mapElement = document.querySelector("gmp-map"); async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.42, lng: -122.1 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - const priceTag = document.createElement('div'); - priceTag.className = 'price-tag'; - priceTag.textContent = '$2.5M'; + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); + const priceTag = document.createElement("div"); + priceTag.className = "price-tag"; + priceTag.textContent = "$2.5M"; const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.42, lng: -122.1 }, - content: priceTag, }); + marker.append(priceTag); + mapElement.append(marker); } // [END maps_advanced_markers_html_simple_snippet] initMap(); diff --git a/dist/samples/advanced-markers-html-simple/docs/index.ts b/dist/samples/advanced-markers-html-simple/docs/index.ts index a722b171..406a47d5 100644 --- a/dist/samples/advanced-markers-html-simple/docs/index.ts +++ b/dist/samples/advanced-markers-html-simple/docs/index.ts @@ -6,26 +6,26 @@ // [START maps_advanced_markers_html_simple] // [START maps_advanced_markers_html_simple_snippet] +const mapElement = document.querySelector("gmp-map") as google.maps.MapElement; + 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 map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.42, lng: -122.1 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); + const { Map } = (await google.maps.importLibrary( + "maps" + )) as google.maps.MapsLibrary; + const { AdvancedMarkerElement } = (await google.maps.importLibrary( + "marker" + )) as google.maps.MarkerLibrary; - const priceTag = document.createElement('div'); - priceTag.className = 'price-tag'; - priceTag.textContent = '$2.5M'; + const priceTag = document.createElement("div"); + priceTag.className = "price-tag"; + priceTag.textContent = "$2.5M"; const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.42, lng: -122.1 }, - content: priceTag, }); + marker.append(priceTag); + mapElement.append(marker); } // [END maps_advanced_markers_html_simple_snippet] initMap(); diff --git a/dist/samples/advanced-markers-html-simple/docs/style.css b/dist/samples/advanced-markers-html-simple/docs/style.css index 489a5547..5f17b9d8 100644 --- a/dist/samples/advanced-markers-html-simple/docs/style.css +++ b/dist/samples/advanced-markers-html-simple/docs/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } @@ -24,9 +24,9 @@ body { /* HTML marker styles */ .price-tag { - background-color: #4285F4; + background-color: #4285f4; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; font-size: 14px; padding: 10px 15px; position: relative; @@ -43,7 +43,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #4285F4; + border-top: 8px solid #4285f4; } -/* [END maps_advanced_markers_html_simple] */ \ No newline at end of file +/* [END maps_advanced_markers_html_simple] */ diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css index c033273b..58e22c43 100644 --- a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } @@ -24,9 +24,9 @@ body { /* HTML marker styles */ .price-tag { - background-color: #4285F4; + background-color: #4285f4; border-radius: 8px; - color: #FFFFFF; + color: #ffffff; font-size: 14px; padding: 10px 15px; position: relative; @@ -43,6 +43,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #4285F4; + border-top: 8px solid #4285f4; } + diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html index bb896b9f..d4d012ce 100644 --- a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js index 9fd3697e..3b4195e9 100644 --- a/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-html-simple/jsfiddle/demo.js @@ -6,23 +6,19 @@ */ +const mapElement = document.querySelector("gmp-map"); async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.42, lng: -122.1 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - const priceTag = document.createElement('div'); - priceTag.className = 'price-tag'; - priceTag.textContent = '$2.5M'; + const { Map } = (await google.maps.importLibrary("maps")); + const { AdvancedMarkerElement } = (await google.maps.importLibrary("marker")); + const priceTag = document.createElement("div"); + priceTag.className = "price-tag"; + priceTag.textContent = "$2.5M"; const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.42, lng: -122.1 }, - content: priceTag, }); + marker.append(priceTag); + mapElement.append(marker); } initMap(); diff --git a/dist/samples/advanced-markers-simple/app/index.html b/dist/samples/advanced-markers-simple/app/index.html index 95330d1e..26efc246 100644 --- a/dist/samples/advanced-markers-simple/app/index.html +++ b/dist/samples/advanced-markers-simple/app/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-simple/app/index.ts b/dist/samples/advanced-markers-simple/app/index.ts index 29439274..410781e7 100644 --- a/dist/samples/advanced-markers-simple/app/index.ts +++ b/dist/samples/advanced-markers-simple/app/index.ts @@ -6,22 +6,18 @@ // [START maps_advanced_markers_simple] // [START maps_advanced_markers_simple_snippet] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + 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 map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.4239163, lng: -122.0947209 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.4239163, lng: -122.0947209 }, }); + mapElement.append(marker); } // [END maps_advanced_markers_simple_snippet] initMap(); -// [END maps_advanced_markers_simple] \ No newline at end of file +// [END maps_advanced_markers_simple] diff --git a/dist/samples/advanced-markers-simple/app/style.css b/dist/samples/advanced-markers-simple/app/style.css index 0cc9310b..8b0e49d9 100644 --- a/dist/samples/advanced-markers-simple/app/style.css +++ b/dist/samples/advanced-markers-simple/app/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-simple/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-simple/dist/assets/index-BOPY9jPg.css similarity index 61% rename from dist/samples/advanced-markers-simple/dist/assets/index-DW_Ml_OD.css rename to dist/samples/advanced-markers-simple/dist/assets/index-BOPY9jPg.css index 672cb7cc..2de1147b 100644 --- a/dist/samples/advanced-markers-simple/dist/assets/index-DW_Ml_OD.css +++ b/dist/samples/advanced-markers-simple/dist/assets/index-BOPY9jPg.css @@ -2,4 +2,4 @@ * @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} + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-simple/dist/assets/index-ClNHZjac.js b/dist/samples/advanced-markers-simple/dist/assets/index-CvDhpJPd.js similarity index 54% rename from dist/samples/advanced-markers-simple/dist/assets/index-ClNHZjac.js rename to dist/samples/advanced-markers-simple/dist/assets/index-CvDhpJPd.js index fec5a932..ea93e00c 100644 --- a/dist/samples/advanced-markers-simple/dist/assets/index-ClNHZjac.js +++ b/dist/samples/advanced-markers-simple/dist/assets/index-CvDhpJPd.js @@ -1,5 +1,5 @@ -(function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(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"&&s(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 s(e){if(e.ep)return;e.ep=!0;const t=o(e);fetch(e.href,t)}})();/** +(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)}})();/** * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 - */async function c(){const{Map:i}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),o=new i(document.getElementById("map"),{center:{lat:37.4239163,lng:-122.0947209},zoom:14,mapId:"4504f8b37365c3d0"});new r({map:o,position:{lat:37.4239163,lng:-122.0947209}})}c(); + */const c=document.querySelector("gmp-map");async function a(){const{Map:s}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),o=new r({position:{lat:37.4239163,lng:-122.0947209}});c.append(o)}a(); diff --git a/dist/samples/advanced-markers-simple/dist/index.html b/dist/samples/advanced-markers-simple/dist/index.html index 95de7cbd..b3ee49ee 100644 --- a/dist/samples/advanced-markers-simple/dist/index.html +++ b/dist/samples/advanced-markers-simple/dist/index.html @@ -9,15 +9,14 @@ Default Advanced Marker - - - - -
- + + + + + diff --git a/dist/samples/advanced-markers-simple/docs/index.html b/dist/samples/advanced-markers-simple/docs/index.html index 95330d1e..26efc246 100644 --- a/dist/samples/advanced-markers-simple/docs/index.html +++ b/dist/samples/advanced-markers-simple/docs/index.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-simple/docs/index.js b/dist/samples/advanced-markers-simple/docs/index.js index 435c8604..cf7e45aa 100644 --- a/dist/samples/advanced-markers-simple/docs/index.js +++ b/dist/samples/advanced-markers-simple/docs/index.js @@ -6,19 +6,15 @@ */ // [START maps_advanced_markers_simple] // [START maps_advanced_markers_simple_snippet] +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.4239163, lng: -122.0947209 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.4239163, lng: -122.0947209 }, }); + mapElement.append(marker); } // [END maps_advanced_markers_simple_snippet] initMap(); diff --git a/dist/samples/advanced-markers-simple/docs/index.ts b/dist/samples/advanced-markers-simple/docs/index.ts index 29439274..410781e7 100644 --- a/dist/samples/advanced-markers-simple/docs/index.ts +++ b/dist/samples/advanced-markers-simple/docs/index.ts @@ -6,22 +6,18 @@ // [START maps_advanced_markers_simple] // [START maps_advanced_markers_simple_snippet] +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; + 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 map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.4239163, lng: -122.0947209 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); - const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.4239163, lng: -122.0947209 }, }); + mapElement.append(marker); } // [END maps_advanced_markers_simple_snippet] initMap(); -// [END maps_advanced_markers_simple] \ No newline at end of file +// [END maps_advanced_markers_simple] diff --git a/dist/samples/advanced-markers-simple/docs/style.css b/dist/samples/advanced-markers-simple/docs/style.css index 0cc9310b..8b0e49d9 100644 --- a/dist/samples/advanced-markers-simple/docs/style.css +++ b/dist/samples/advanced-markers-simple/docs/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-simple/jsfiddle/demo.css b/dist/samples/advanced-markers-simple/jsfiddle/demo.css index fa4d8cd3..211f559b 100644 --- a/dist/samples/advanced-markers-simple/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-simple/jsfiddle/demo.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-simple/jsfiddle/demo.html b/dist/samples/advanced-markers-simple/jsfiddle/demo.html index 514e4140..71a65c21 100644 --- a/dist/samples/advanced-markers-simple/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-simple/jsfiddle/demo.html @@ -11,13 +11,12 @@ - - -
- + + + diff --git a/dist/samples/advanced-markers-simple/jsfiddle/demo.js b/dist/samples/advanced-markers-simple/jsfiddle/demo.js index e5609cef..5ca3bb7e 100644 --- a/dist/samples/advanced-markers-simple/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-simple/jsfiddle/demo.js @@ -6,19 +6,15 @@ */ +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.4239163, lng: -122.0947209 }, - zoom: 14, - mapId: '4504f8b37365c3d0', - }); const marker = new AdvancedMarkerElement({ - map, position: { lat: 37.4239163, lng: -122.0947209 }, }); + mapElement.append(marker); } initMap(); diff --git a/dist/samples/advanced-markers-zoom/app/index.html b/dist/samples/advanced-markers-zoom/app/index.html index 968569cd..de6e68c4 100644 --- a/dist/samples/advanced-markers-zoom/app/index.html +++ b/dist/samples/advanced-markers-zoom/app/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-zoom/app/index.ts b/dist/samples/advanced-markers-zoom/app/index.ts index b513872a..79ea4db3 100644 --- a/dist/samples/advanced-markers-zoom/app/index.ts +++ b/dist/samples/advanced-markers-zoom/app/index.ts @@ -1,4 +1,3 @@ - /** * @license * Copyright 2019 Google LLC. All Rights Reserved. @@ -6,53 +5,57 @@ */ // [START maps_advanced_markers_zoom] -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 map = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.424563902650114, lng: -122.09512859577026}, - zoom: 17, - mapId: '4504f8b37365c3d0', - }); - - const marker01 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4239163, lng: -122.094 }, - title: 'This marker is visible at zoom level 15 and higher.' - }); +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; - const marker02 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4245, lng: -122.096 }, - title: 'This marker is visible at zoom level 16 and higher.' - }); - - const marker03 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4249, lng: -122.095 }, - title: 'This marker is visible at zoom level 17 and higher.' - }); - - const marker04 = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.0955 }, - title: 'This marker is visible at zoom level 18 and higher.' - }); - // [START maps_advanced_markers_zoom_listener] - map.addListener('zoom_changed', () => { - const zoom = map.getZoom(); - if (zoom) { - // Only show each marker above a certain zoom level. - marker01.map = zoom > 14 ? map : null; - marker02.map = zoom > 15 ? map : null; - marker03.map = zoom > 16 ? map : null; - marker04.map = zoom > 17 ? map : null; - } - }); - // [END maps_advanced_markers_zoom_listener] +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 markerOptions = [ + { + position: { lat: 37.4239163, lng: -122.094 }, + title: 'This marker is visible at zoom level 15 and higher.', + minZoom: 14, + }, + { + position: { lat: 37.4245, lng: -122.096 }, + title: 'This marker is visible at zoom level 16 and higher.', + minZoom: 15, + }, + { + position: { lat: 37.4249, lng: -122.095 }, + title: 'This marker is visible at zoom level 17 and higher.', + minZoom: 16, + }, + { + position: { lat: 37.425, lng: -122.0955 }, + title: 'This marker is visible at zoom level 18 and higher.', + minZoom: 17, + }, + ]; + + const markers: google.maps.marker.AdvancedMarkerElement[] = []; + for (const { position, title } of markerOptions) { + const marker = new AdvancedMarkerElement({ position, title }); + mapElement.append(marker); + markers.push(marker); + } + + // [START maps_advanced_markers_zoom_listener] + mapElement.innerMap.addListener('zoom_changed', () => { + let zoom = mapElement.innerMap.getZoom(); + for (let i = 0; i < markers.length; i++) { + const { position, minZoom } = markerOptions[i]; + markers[i].position = zoom! > minZoom ? position : null; + } + }); + // [END maps_advanced_markers_zoom_listener] } initMap(); -// [END maps_advanced_markers_zoom] \ No newline at end of file +// [END maps_advanced_markers_zoom] diff --git a/dist/samples/advanced-markers-zoom/app/style.css b/dist/samples/advanced-markers-zoom/app/style.css index a748b5a2..b70100d0 100644 --- a/dist/samples/advanced-markers-zoom/app/style.css +++ b/dist/samples/advanced-markers-zoom/app/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-zoom/dist/assets/index-BOPY9jPg.css similarity index 61% rename from dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css rename to dist/samples/advanced-markers-zoom/dist/assets/index-BOPY9jPg.css index 672cb7cc..2de1147b 100644 --- a/dist/samples/advanced-markers-zoom/dist/assets/index-DW_Ml_OD.css +++ b/dist/samples/advanced-markers-zoom/dist/assets/index-BOPY9jPg.css @@ -2,4 +2,4 @@ * @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} + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js b/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js deleted file mode 100644 index 3c3cdfcc..00000000 --- a/dist/samples/advanced-markers-zoom/dist/assets/index-DqaTsQYt.js +++ /dev/null @@ -1,5 +0,0 @@ -(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))s(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"&&s(i)}).observe(document,{childList:!0,subtree:!0});function r(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 s(e){if(e.ep)return;e.ep=!0;const t=r(e);fetch(e.href,t)}})();/** - * @license - * Copyright 2019 Google LLC. All Rights Reserved. - * SPDX-License-Identifier: Apache-2.0 - */async function a(){const{Map:l}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o}=await google.maps.importLibrary("marker"),r=new l(document.getElementById("map"),{center:{lat:37.424563902650114,lng:-122.09512859577026},zoom:17,mapId:"4504f8b37365c3d0"}),s=new o({map:r,position:{lat:37.4239163,lng:-122.094},title:"This marker is visible at zoom level 15 and higher."}),e=new o({map:r,position:{lat:37.4245,lng:-122.096},title:"This marker is visible at zoom level 16 and higher."}),t=new o({map:r,position:{lat:37.4249,lng:-122.095},title:"This marker is visible at zoom level 17 and higher."}),i=new o({map:r,position:{lat:37.425,lng:-122.0955},title:"This marker is visible at zoom level 18 and higher."});r.addListener("zoom_changed",()=>{const n=r.getZoom();n&&(s.map=n>14?r:null,e.map=n>15?r:null,t.map=n>16?r:null,i.map=n>17?r:null)})}a(); diff --git a/dist/samples/advanced-markers-zoom/dist/assets/index-rKx-wNnJ.js b/dist/samples/advanced-markers-zoom/dist/assets/index-rKx-wNnJ.js new file mode 100644 index 00000000..324165d4 --- /dev/null +++ b/dist/samples/advanced-markers-zoom/dist/assets/index-rKx-wNnJ.js @@ -0,0 +1,5 @@ +(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 o of e)if(o.type==="childList")for(const t of o.addedNodes)t.tagName==="LINK"&&t.rel==="modulepreload"&&i(t)}).observe(document,{childList:!0,subtree:!0});function n(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 i(e){if(e.ep)return;e.ep=!0;const o=n(e);fetch(e.href,o)}})();/** + * @license + * Copyright 2019 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */const s=document.querySelector("gmp-map");async function m(){const{Map:l}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:r}=await google.maps.importLibrary("marker"),n=[{position:{lat:37.4239163,lng:-122.094},title:"This marker is visible at zoom level 15 and higher.",minZoom:14},{position:{lat:37.4245,lng:-122.096},title:"This marker is visible at zoom level 16 and higher.",minZoom:15},{position:{lat:37.4249,lng:-122.095},title:"This marker is visible at zoom level 17 and higher.",minZoom:16},{position:{lat:37.425,lng:-122.0955},title:"This marker is visible at zoom level 18 and higher.",minZoom:17}],i=[];for(const{position:e,title:o}of n){const t=new r({position:e,title:o});s.append(t),i.push(t)}s.innerMap.addListener("zoom_changed",()=>{let e=s.innerMap.getZoom();for(let o=0;oa?t:null}})}m(); diff --git a/dist/samples/advanced-markers-zoom/dist/index.html b/dist/samples/advanced-markers-zoom/dist/index.html index 7d696511..115b4039 100644 --- a/dist/samples/advanced-markers-zoom/dist/index.html +++ b/dist/samples/advanced-markers-zoom/dist/index.html @@ -1,4 +1,4 @@ - + + + + + + diff --git a/dist/samples/advanced-markers-zoom/docs/index.html b/dist/samples/advanced-markers-zoom/docs/index.html index 968569cd..de6e68c4 100644 --- a/dist/samples/advanced-markers-zoom/docs/index.html +++ b/dist/samples/advanced-markers-zoom/docs/index.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-zoom/docs/index.js b/dist/samples/advanced-markers-zoom/docs/index.js index a759ccbb..7f635cd2 100644 --- a/dist/samples/advanced-markers-zoom/docs/index.js +++ b/dist/samples/advanced-markers-zoom/docs/index.js @@ -5,44 +5,45 @@ * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_zoom] +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.424563902650114, lng: -122.09512859577026 }, - zoom: 17, - mapId: '4504f8b37365c3d0', - }); - const marker01 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4239163, lng: -122.094 }, - title: 'This marker is visible at zoom level 15 and higher.' - }); - const marker02 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4245, lng: -122.096 }, - title: 'This marker is visible at zoom level 16 and higher.' - }); - const marker03 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4249, lng: -122.095 }, - title: 'This marker is visible at zoom level 17 and higher.' - }); - const marker04 = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.0955 }, - title: 'This marker is visible at zoom level 18 and higher.' - }); + const { Map } = (await google.maps.importLibrary('maps')); + const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); + const markerOptions = [ + { + position: { lat: 37.4239163, lng: -122.094 }, + title: 'This marker is visible at zoom level 15 and higher.', + minZoom: 14, + }, + { + position: { lat: 37.4245, lng: -122.096 }, + title: 'This marker is visible at zoom level 16 and higher.', + minZoom: 15, + }, + { + position: { lat: 37.4249, lng: -122.095 }, + title: 'This marker is visible at zoom level 17 and higher.', + minZoom: 16, + }, + { + position: { lat: 37.425, lng: -122.0955 }, + title: 'This marker is visible at zoom level 18 and higher.', + minZoom: 17, + }, + ]; + const markers = []; + for (const { position, title } of markerOptions) { + const marker = new AdvancedMarkerElement({ position, title }); + mapElement.append(marker); + markers.push(marker); + } // [START maps_advanced_markers_zoom_listener] - map.addListener('zoom_changed', () => { - const zoom = map.getZoom(); - if (zoom) { - // Only show each marker above a certain zoom level. - marker01.map = zoom > 14 ? map : null; - marker02.map = zoom > 15 ? map : null; - marker03.map = zoom > 16 ? map : null; - marker04.map = zoom > 17 ? map : null; + mapElement.innerMap.addListener('zoom_changed', () => { + let zoom = mapElement.innerMap.getZoom(); + for (let i = 0; i < markers.length; i++) { + const { position, minZoom } = markerOptions[i]; + markers[i].position = zoom > minZoom ? position : null; } }); // [END maps_advanced_markers_zoom_listener] diff --git a/dist/samples/advanced-markers-zoom/docs/index.ts b/dist/samples/advanced-markers-zoom/docs/index.ts index b513872a..79ea4db3 100644 --- a/dist/samples/advanced-markers-zoom/docs/index.ts +++ b/dist/samples/advanced-markers-zoom/docs/index.ts @@ -1,4 +1,3 @@ - /** * @license * Copyright 2019 Google LLC. All Rights Reserved. @@ -6,53 +5,57 @@ */ // [START maps_advanced_markers_zoom] -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 map = new Map(document.getElementById('map') as HTMLElement, { - center: {lat: 37.424563902650114, lng: -122.09512859577026}, - zoom: 17, - mapId: '4504f8b37365c3d0', - }); - - const marker01 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4239163, lng: -122.094 }, - title: 'This marker is visible at zoom level 15 and higher.' - }); +const mapElement = document.querySelector('gmp-map') as google.maps.MapElement; - const marker02 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4245, lng: -122.096 }, - title: 'This marker is visible at zoom level 16 and higher.' - }); - - const marker03 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4249, lng: -122.095 }, - title: 'This marker is visible at zoom level 17 and higher.' - }); - - const marker04 = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.0955 }, - title: 'This marker is visible at zoom level 18 and higher.' - }); - // [START maps_advanced_markers_zoom_listener] - map.addListener('zoom_changed', () => { - const zoom = map.getZoom(); - if (zoom) { - // Only show each marker above a certain zoom level. - marker01.map = zoom > 14 ? map : null; - marker02.map = zoom > 15 ? map : null; - marker03.map = zoom > 16 ? map : null; - marker04.map = zoom > 17 ? map : null; - } - }); - // [END maps_advanced_markers_zoom_listener] +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 markerOptions = [ + { + position: { lat: 37.4239163, lng: -122.094 }, + title: 'This marker is visible at zoom level 15 and higher.', + minZoom: 14, + }, + { + position: { lat: 37.4245, lng: -122.096 }, + title: 'This marker is visible at zoom level 16 and higher.', + minZoom: 15, + }, + { + position: { lat: 37.4249, lng: -122.095 }, + title: 'This marker is visible at zoom level 17 and higher.', + minZoom: 16, + }, + { + position: { lat: 37.425, lng: -122.0955 }, + title: 'This marker is visible at zoom level 18 and higher.', + minZoom: 17, + }, + ]; + + const markers: google.maps.marker.AdvancedMarkerElement[] = []; + for (const { position, title } of markerOptions) { + const marker = new AdvancedMarkerElement({ position, title }); + mapElement.append(marker); + markers.push(marker); + } + + // [START maps_advanced_markers_zoom_listener] + mapElement.innerMap.addListener('zoom_changed', () => { + let zoom = mapElement.innerMap.getZoom(); + for (let i = 0; i < markers.length; i++) { + const { position, minZoom } = markerOptions[i]; + markers[i].position = zoom! > minZoom ? position : null; + } + }); + // [END maps_advanced_markers_zoom_listener] } initMap(); -// [END maps_advanced_markers_zoom] \ No newline at end of file +// [END maps_advanced_markers_zoom] diff --git a/dist/samples/advanced-markers-zoom/docs/style.css b/dist/samples/advanced-markers-zoom/docs/style.css index a748b5a2..b70100d0 100644 --- a/dist/samples/advanced-markers-zoom/docs/style.css +++ b/dist/samples/advanced-markers-zoom/docs/style.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.css b/dist/samples/advanced-markers-zoom/jsfiddle/demo.css index fa4d8cd3..211f559b 100644 --- a/dist/samples/advanced-markers-zoom/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.css @@ -8,7 +8,7 @@ * Always set the map height explicitly to define the size of the div element * that contains the map. */ -#map { +gmp-map { height: 100%; } diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.html b/dist/samples/advanced-markers-zoom/jsfiddle/demo.html index 6d066fa7..585b1aa3 100644 --- a/dist/samples/advanced-markers-zoom/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.html @@ -1,4 +1,4 @@ - + + + + diff --git a/dist/samples/advanced-markers-zoom/jsfiddle/demo.js b/dist/samples/advanced-markers-zoom/jsfiddle/demo.js index fbff671a..1c27bd8b 100644 --- a/dist/samples/advanced-markers-zoom/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-zoom/jsfiddle/demo.js @@ -5,44 +5,45 @@ * SPDX-License-Identifier: Apache-2.0 */ +const mapElement = document.querySelector('gmp-map'); async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.424563902650114, lng: -122.09512859577026 }, - zoom: 17, - mapId: '4504f8b37365c3d0', - }); - const marker01 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4239163, lng: -122.094 }, - title: 'This marker is visible at zoom level 15 and higher.' - }); - const marker02 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4245, lng: -122.096 }, - title: 'This marker is visible at zoom level 16 and higher.' - }); - const marker03 = new AdvancedMarkerElement({ - map, - position: { lat: 37.4249, lng: -122.095 }, - title: 'This marker is visible at zoom level 17 and higher.' - }); - const marker04 = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.0955 }, - title: 'This marker is visible at zoom level 18 and higher.' - }); + const { Map } = (await google.maps.importLibrary('maps')); + const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker')); + const markerOptions = [ + { + position: { lat: 37.4239163, lng: -122.094 }, + title: 'This marker is visible at zoom level 15 and higher.', + minZoom: 14, + }, + { + position: { lat: 37.4245, lng: -122.096 }, + title: 'This marker is visible at zoom level 16 and higher.', + minZoom: 15, + }, + { + position: { lat: 37.4249, lng: -122.095 }, + title: 'This marker is visible at zoom level 17 and higher.', + minZoom: 16, + }, + { + position: { lat: 37.425, lng: -122.0955 }, + title: 'This marker is visible at zoom level 18 and higher.', + minZoom: 17, + }, + ]; + const markers = []; + for (const { position, title } of markerOptions) { + const marker = new AdvancedMarkerElement({ position, title }); + mapElement.append(marker); + markers.push(marker); + } - map.addListener('zoom_changed', () => { - const zoom = map.getZoom(); - if (zoom) { - // Only show each marker above a certain zoom level. - marker01.map = zoom > 14 ? map : null; - marker02.map = zoom > 15 ? map : null; - marker03.map = zoom > 16 ? map : null; - marker04.map = zoom > 17 ? map : null; + mapElement.innerMap.addListener('zoom_changed', () => { + let zoom = mapElement.innerMap.getZoom(); + for (let i = 0; i < markers.length; i++) { + const { position, minZoom } = markerOptions[i]; + markers[i].position = zoom > minZoom ? position : null; } });