diff --git a/dist/samples/advanced-markers-basic-style/app/index.ts b/dist/samples/advanced-markers-basic-style/app/index.ts index 2d6a73bb..ad1b1b67 100644 --- a/dist/samples/advanced-markers-basic-style/app/index.ts +++ b/dist/samples/advanced-markers-basic-style/app/index.ts @@ -79,7 +79,8 @@ async function initMap() { // [START maps_advanced_markers_basic_style_text_glyph] const pinTextGlyph = new PinElement({ - glyph: 'T', + //@ts-ignore + glyphText: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ @@ -92,7 +93,8 @@ async function initMap() { // [START maps_advanced_markers_basic_style_hide_glyph] // Hide the glyph. const pinNoGlyph = new PinElement({ - glyph: '', + //@ts-ignore + glyphText: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, diff --git a/dist/samples/advanced-markers-basic-style/dist/assets/index-CZt8nPGO.js b/dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.js similarity index 86% rename from dist/samples/advanced-markers-basic-style/dist/assets/index-CZt8nPGO.js rename to dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.js index 5a602e23..aef69e46 100644 --- a/dist/samples/advanced-markers-basic-style/dist/assets/index-CZt8nPGO.js +++ b/dist/samples/advanced-markers-basic-style/dist/assets/index-DFenx6lm.js @@ -2,4 +2,4 @@ * @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({glyph:"T",glyphColor:"white"});new n({map:o,position:{lat:37.415,lng:-122.015},content:c.element});const a=new r({glyph:""});new n({map:o,position:{lat:37.415,lng:-122.005},content:a.element})}p(); + */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 104ab5c4..86bb13e7 100644 --- a/dist/samples/advanced-markers-basic-style/dist/index.html +++ b/dist/samples/advanced-markers-basic-style/dist/index.html @@ -9,7 +9,7 @@ Advanced Marker Basic Customization - + diff --git a/dist/samples/advanced-markers-basic-style/docs/index.js b/dist/samples/advanced-markers-basic-style/docs/index.js index 96ba39e4..acd620a8 100644 --- a/dist/samples/advanced-markers-basic-style/docs/index.js +++ b/dist/samples/advanced-markers-basic-style/docs/index.js @@ -70,7 +70,8 @@ async function initMap() { // [END maps_advanced_markers_basic_style_glyph] // [START maps_advanced_markers_basic_style_text_glyph] const pinTextGlyph = new PinElement({ - glyph: 'T', + //@ts-ignore + glyphText: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ @@ -82,7 +83,8 @@ async function initMap() { // [START maps_advanced_markers_basic_style_hide_glyph] // Hide the glyph. const pinNoGlyph = new PinElement({ - glyph: '', + //@ts-ignore + glyphText: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, diff --git a/dist/samples/advanced-markers-basic-style/docs/index.ts b/dist/samples/advanced-markers-basic-style/docs/index.ts index 2d6a73bb..ad1b1b67 100644 --- a/dist/samples/advanced-markers-basic-style/docs/index.ts +++ b/dist/samples/advanced-markers-basic-style/docs/index.ts @@ -79,7 +79,8 @@ async function initMap() { // [START maps_advanced_markers_basic_style_text_glyph] const pinTextGlyph = new PinElement({ - glyph: 'T', + //@ts-ignore + glyphText: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ @@ -92,7 +93,8 @@ async function initMap() { // [START maps_advanced_markers_basic_style_hide_glyph] // Hide the glyph. const pinNoGlyph = new PinElement({ - glyph: '', + //@ts-ignore + glyphText: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, diff --git a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js index a649f38e..0b6537ad 100644 --- a/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-basic-style/jsfiddle/demo.js @@ -70,7 +70,8 @@ async function initMap() { const pinTextGlyph = new PinElement({ - glyph: 'T', + //@ts-ignore + glyphText: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ @@ -82,7 +83,8 @@ async function initMap() { // Hide the glyph. const pinNoGlyph = new PinElement({ - glyph: '', + //@ts-ignore + glyphText: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, diff --git a/dist/samples/advanced-markers-graphics/app/index.html b/dist/samples/advanced-markers-graphics/app/index.html index 8357aeb6..13be221d 100644 --- a/dist/samples/advanced-markers-graphics/app/index.html +++ b/dist/samples/advanced-markers-graphics/app/index.html @@ -8,9 +8,6 @@ Advanced Markers Using Graphics - - - diff --git a/dist/samples/advanced-markers-graphics/app/index.ts b/dist/samples/advanced-markers-graphics/app/index.ts index de45e50e..07d7ec5a 100644 --- a/dist/samples/advanced-markers-graphics/app/index.ts +++ b/dist/samples/advanced-markers-graphics/app/index.ts @@ -39,7 +39,7 @@ async function initMap() { // [START maps_advanced_markers_graphics_png] // A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement('img'); - beachFlagImg.src = new URL('./images/beachflag.png', import.meta.url).href; + beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href; const beachFlagMarkerView = new AdvancedMarkerElement({ map, @@ -54,11 +54,11 @@ async function initMap() { // [START maps_advanced_markers_graphics_svg_glyph] // A marker with a custom SVG glyph. - const glyphImg = document.createElement('img'); - glyphImg.src = new URL('./images/google_logo_g.svg', import.meta.url).href; - + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); + const glyphSvgPinElement = new PinElement({ - glyph: glyphImg, + //@ts-ignore + glyphSrc: glyphImgSrc, }); const glyphSvgMarkerView = new AdvancedMarkerElement({ @@ -80,7 +80,8 @@ async function initMap() { const pinElement = new PinElement({ background: place.iconBackgroundColor, - glyph: new URL(String(place.svgIconMaskURI)), + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ @@ -90,25 +91,6 @@ async function initMap() { title: place.displayName, }); // [END maps_advanced_markers_graphics_place_icon] - - // [START maps_advanced_markers_graphics_fontawesome] - // A marker using a Font Awesome icon for the glyph. - const icon = document.createElement('div'); - icon.innerHTML = ''; - const faPin = new PinElement({ - glyph: icon, - glyphColor: '#ff8300', - background: '#FFD514', - borderColor: '#ff8300', - }); - - const faMarker = new AdvancedMarkerElement({ - map, - position: { lat: 37.412, lng: -122.095829650878 }, - content: faPin.element, - title: 'A marker using a FontAwesome icon for the glyph.' - }); - // [END maps_advanced_markers_graphics_fontawesome] } initMap(); diff --git a/dist/samples/advanced-markers-graphics/dist/assets/index-C7BKES5s.js b/dist/samples/advanced-markers-graphics/dist/assets/index-C7BKES5s.js deleted file mode 100644 index b5092f3f..00000000 --- a/dist/samples/advanced-markers-graphics/dist/assets/index-C7BKES5s.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"]'))i(e);new MutationObserver(e=>{for(const t of e)if(t.type==="childList")for(const a of t.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).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 i(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 m(){const{Map:s}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o,PinElement:r}=await google.maps.importLibrary("marker"),{Place:i}=await google.maps.importLibrary("places"),e=new s(document.getElementById("map"),{center:{lat:37.42475,lng:-122.0845},zoom:13,mapId:"4504f8b37365c3d0"}),h=new DOMParser().parseFromString('',"image/svg+xml").documentElement;new o({map:e,position:{lat:37.42475,lng:-122.094},content:h,title:"A marker using a custom SVG image.",anchorLeft:"-50%",anchorTop:"-50%"});const c=document.createElement("img");c.src=new URL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAACcUlEQVR4AazUA6wsZwCA0TNYXte2bdu2bdu2bdtW1I1TK6jbZ1vX3r+aoH7YL9kdn/EkSFGHZjQgRYQYSfZLUUIjWrJfI8pI/KXdDz744CNbW1u/+PDDD+/FulgBS2OpI444Yo0vv/zy+MmTJz/R1dX1ccgaGBhonTBhwjuvvvrq0VgKTchFCFdffbVrTm0244tE3RaHtvfEuZ/iOK6madqYmzF+1eqY75k4RDJtpGpXu66pU3X++ouWW0/Dzkf5pju5Z/PNN38ck1IAg7NUh99q+APXNjRttP2GabGoOvYHubo6+V9/uXJZUlcHADo+r+iaMNaSFz6+CyrojQFggW2pW4Hu7z/T89OXZrf+/v4c5kdd7C8tcRxx0RwVQoiQQ/o3MCmx+ClzjiJC9DcQCoux8PFEc476RxDyizL/0USFGoGQW4SW04gXqhEIcZH6o0hWqxEIkN+ReLsaghCtkqG1AiFZleKuNQShsCYNO9cQhIZNqVuthiAsfDBJ6R/AIUOGjNW8D/ml/WPxsiS7E51FeiNN7zP/o5JFj7PwbiCgmv0EvHvVVVc9M3PmzOmh+9sQZj4RQuuzIfR8FcJgWxj2a88999xb559//h04AcfutNNO51cqlbfDwMzw6wf4U+yP1SDgDZyGE3beeefzLr/88ut/+x1//PGX4VgcjYOwIzbBBtgQW2IP7JXNXyxCwKt4D1PRhgEAQBW9aEcXBhEhj3rE6EBrCgjoxhRMQi8CAEKG9mdYFRFitCHCAAYiBLyMVzAE4zI8+HvhH+ZHyBwhBeBvdyuYvUL2A7EaN9fgL6OPgaMG/qemgX9huYBSgwHnr9+YKVsfRAAAAABJRU5ErkJggg==",import.meta.url).href,new o({map:e,position:{lat:37.434,lng:-122.082},content:c,title:"A marker using a custom PNG Image",anchorLeft:"0px",anchorTop:"100%"});const l=document.createElement("img");l.src=new URL("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100%25'%20height='100%25'%20viewBox='0%200%2024%2024'%3e%3cg%20transform='matrix(1,%200,%200,%201,%2027.009001,%20-39.238998)'%3e%3cpath%20fill='%23FFFFFF'%20d='M%20-3.264%2051.509%20C%20-3.264%2050.719%20-3.334%2049.969%20-3.454%2049.239%20L%20-14.754%2049.239%20L%20-14.754%2053.749%20L%20-8.284%2053.749%20C%20-8.574%2055.229%20-9.424%2056.479%20-10.684%2057.329%20L%20-10.684%2060.329%20L%20-6.824%2060.329%20C%20-4.564%2058.239%20-3.264%2055.159%20-3.264%2051.509%20Z'/%3e%3cpath%20fill='%23FFFFFF'%20d='M%20-14.754%2063.239%20C%20-11.514%2063.239%20-8.804%2062.159%20-6.824%2060.329%20L%20-10.684%2057.329%20C%20-11.764%2058.049%20-13.134%2058.489%20-14.754%2058.489%20C%20-17.884%2058.489%20-20.534%2056.379%20-21.484%2053.529%20L%20-25.464%2053.529%20L%20-25.464%2056.619%20C%20-23.494%2060.539%20-19.444%2063.239%20-14.754%2063.239%20Z'/%3e%3cpath%20fill='%23FFFFFF'%20d='M%20-21.484%2053.529%20C%20-21.734%2052.809%20-21.864%2052.039%20-21.864%2051.239%20C%20-21.864%2050.439%20-21.724%2049.669%20-21.484%2048.949%20L%20-21.484%2045.859%20L%20-25.464%2045.859%20C%20-26.284%2047.479%20-26.754%2049.299%20-26.754%2051.239%20C%20-26.754%2053.179%20-26.284%2054.999%20-25.464%2056.619%20L%20-21.484%2053.529%20Z'/%3e%3cpath%20fill='%23FFFFFF'%20d='M%20-14.754%2043.989%20C%20-12.984%2043.989%20-11.404%2044.599%20-10.154%2045.789%20L%20-6.734%2042.369%20C%20-8.804%2040.429%20-11.514%2039.239%20-14.754%2039.239%20C%20-19.444%2039.239%20-23.494%2041.939%20-25.464%2045.859%20L%20-21.484%2048.949%20C%20-20.534%2046.099%20-17.884%2043.989%20-14.754%2043.989%20Z'/%3e%3c/g%3e%3c/svg%3e",import.meta.url).href;const p=new r({glyph:l});new o({map:e,position:{lat:37.425,lng:-122.07},content:p.element,title:"A marker using a custom SVG for the glyph."});const n=new i({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg"});await n.fetchFields({fields:["location","displayName","svgIconMaskURI","iconBackgroundColor"]});const g=new r({background:n.iconBackgroundColor,glyph:new URL(String(n.svgIconMaskURI))});new o({map:e,position:n.location,content:g.element,title:n.displayName});const d=document.createElement("div");d.innerHTML='';const u=new r({glyph:d,glyphColor:"#ff8300",background:"#FFD514",borderColor:"#ff8300"});new o({map:e,position:{lat:37.412,lng:-122.095829650878},content:u.element,title:"A marker using a FontAwesome icon for the glyph."})}m(); diff --git a/dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.js b/dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.js new file mode 100644 index 00000000..a7d95177 --- /dev/null +++ b/dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.js @@ -0,0 +1,5 @@ +(function(){const o=document.createElement("link").relList;if(o&&o.supports&&o.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 s of t.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&i(s)}).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 i(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 u(){const{Map:a}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o,PinElement:n}=await google.maps.importLibrary("marker"),{Place:i}=await google.maps.importLibrary("places"),e=new a(document.getElementById("map"),{center:{lat:37.42475,lng:-122.0845},zoom:13,mapId:"4504f8b37365c3d0"}),c=new DOMParser().parseFromString('',"image/svg+xml").documentElement;new o({map:e,position:{lat:37.42475,lng:-122.094},content:c,title:"A marker using a custom SVG image.",anchorLeft:"-50%",anchorTop:"-50%"});const l=document.createElement("img");l.src=new URL(""+new URL("../beachflag.png",import.meta.url).href,import.meta.url).href,new o({map:e,position:{lat:37.434,lng:-122.082},content:l,title:"A marker using a custom PNG Image",anchorLeft:"0px",anchorTop:"100%"});const p=new URL(""+new URL("../google_logo_g.svg",import.meta.url).href,import.meta.url),d=new n({glyphSrc:p});new o({map:e,position:{lat:37.425,lng:-122.07},content:d.element,title:"A marker using a custom SVG for the glyph."});const r=new i({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg"});await r.fetchFields({fields:["location","displayName","svgIconMaskURI","iconBackgroundColor"]});const h=new n({background:r.iconBackgroundColor,glyphSrc:new URL(String(r.svgIconMaskURI))});new o({map:e,position:r.location,content:h.element,title:r.displayName})}u(); diff --git a/dist/samples/advanced-markers-graphics/dist/beachflag.png b/dist/samples/advanced-markers-graphics/dist/beachflag.png new file mode 100644 index 00000000..bebbc612 Binary files /dev/null and b/dist/samples/advanced-markers-graphics/dist/beachflag.png differ diff --git a/dist/samples/advanced-markers-graphics/dist/google_logo_g.svg b/dist/samples/advanced-markers-graphics/dist/google_logo_g.svg new file mode 100644 index 00000000..25703d84 --- /dev/null +++ b/dist/samples/advanced-markers-graphics/dist/google_logo_g.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/samples/advanced-markers-graphics/dist/index.html b/dist/samples/advanced-markers-graphics/dist/index.html index 1487c65f..57aed402 100644 --- a/dist/samples/advanced-markers-graphics/dist/index.html +++ b/dist/samples/advanced-markers-graphics/dist/index.html @@ -8,10 +8,7 @@ Advanced Markers Using Graphics - - - - + diff --git a/dist/samples/advanced-markers-graphics/docs/beachflag.png b/dist/samples/advanced-markers-graphics/docs/beachflag.png new file mode 100644 index 00000000..bebbc612 Binary files /dev/null and b/dist/samples/advanced-markers-graphics/docs/beachflag.png differ diff --git a/dist/samples/advanced-markers-graphics/docs/google_logo_g.svg b/dist/samples/advanced-markers-graphics/docs/google_logo_g.svg new file mode 100644 index 00000000..25703d84 --- /dev/null +++ b/dist/samples/advanced-markers-graphics/docs/google_logo_g.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/samples/advanced-markers-graphics/docs/index.html b/dist/samples/advanced-markers-graphics/docs/index.html index 8357aeb6..13be221d 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.html +++ b/dist/samples/advanced-markers-graphics/docs/index.html @@ -8,9 +8,6 @@ Advanced Markers Using Graphics - - - diff --git a/dist/samples/advanced-markers-graphics/docs/index.js b/dist/samples/advanced-markers-graphics/docs/index.js index 0a0a180a..f83eb04f 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.js +++ b/dist/samples/advanced-markers-graphics/docs/index.js @@ -32,7 +32,7 @@ async function initMap() { // [START maps_advanced_markers_graphics_png] // A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement('img'); - beachFlagImg.src = new URL('./images/beachflag.png', import.meta.url).href; + beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href; const beachFlagMarkerView = new AdvancedMarkerElement({ map, position: { lat: 37.434, lng: -122.082 }, @@ -45,10 +45,10 @@ async function initMap() { // [END maps_advanced_markers_graphics_png] // [START maps_advanced_markers_graphics_svg_glyph] // A marker with a custom SVG glyph. - const glyphImg = document.createElement('img'); - glyphImg.src = new URL('./images/google_logo_g.svg', import.meta.url).href; + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); const glyphSvgPinElement = new PinElement({ - glyph: glyphImg, + //@ts-ignore + glyphSrc: glyphImgSrc, }); const glyphSvgMarkerView = new AdvancedMarkerElement({ map, @@ -66,7 +66,8 @@ async function initMap() { await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); const pinElement = new PinElement({ background: place.iconBackgroundColor, - glyph: new URL(String(place.svgIconMaskURI)), + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ map, @@ -75,23 +76,6 @@ async function initMap() { title: place.displayName, }); // [END maps_advanced_markers_graphics_place_icon] - // [START maps_advanced_markers_graphics_fontawesome] - // A marker using a Font Awesome icon for the glyph. - const icon = document.createElement('div'); - icon.innerHTML = ''; - const faPin = new PinElement({ - glyph: icon, - glyphColor: '#ff8300', - background: '#FFD514', - borderColor: '#ff8300', - }); - const faMarker = new AdvancedMarkerElement({ - map, - position: { lat: 37.412, lng: -122.095829650878 }, - content: faPin.element, - title: 'A marker using a FontAwesome icon for the glyph.' - }); - // [END maps_advanced_markers_graphics_fontawesome] } initMap(); export {}; diff --git a/dist/samples/advanced-markers-graphics/docs/index.ts b/dist/samples/advanced-markers-graphics/docs/index.ts index de45e50e..07d7ec5a 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.ts +++ b/dist/samples/advanced-markers-graphics/docs/index.ts @@ -39,7 +39,7 @@ async function initMap() { // [START maps_advanced_markers_graphics_png] // A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement('img'); - beachFlagImg.src = new URL('./images/beachflag.png', import.meta.url).href; + beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href; const beachFlagMarkerView = new AdvancedMarkerElement({ map, @@ -54,11 +54,11 @@ async function initMap() { // [START maps_advanced_markers_graphics_svg_glyph] // A marker with a custom SVG glyph. - const glyphImg = document.createElement('img'); - glyphImg.src = new URL('./images/google_logo_g.svg', import.meta.url).href; - + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); + const glyphSvgPinElement = new PinElement({ - glyph: glyphImg, + //@ts-ignore + glyphSrc: glyphImgSrc, }); const glyphSvgMarkerView = new AdvancedMarkerElement({ @@ -80,7 +80,8 @@ async function initMap() { const pinElement = new PinElement({ background: place.iconBackgroundColor, - glyph: new URL(String(place.svgIconMaskURI)), + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ @@ -90,25 +91,6 @@ async function initMap() { title: place.displayName, }); // [END maps_advanced_markers_graphics_place_icon] - - // [START maps_advanced_markers_graphics_fontawesome] - // A marker using a Font Awesome icon for the glyph. - const icon = document.createElement('div'); - icon.innerHTML = ''; - const faPin = new PinElement({ - glyph: icon, - glyphColor: '#ff8300', - background: '#FFD514', - borderColor: '#ff8300', - }); - - const faMarker = new AdvancedMarkerElement({ - map, - position: { lat: 37.412, lng: -122.095829650878 }, - content: faPin.element, - title: 'A marker using a FontAwesome icon for the glyph.' - }); - // [END maps_advanced_markers_graphics_fontawesome] } initMap(); diff --git a/dist/samples/advanced-markers-graphics/jsfiddle/demo.html b/dist/samples/advanced-markers-graphics/jsfiddle/demo.html index 6ef2a74c..0546228d 100644 --- a/dist/samples/advanced-markers-graphics/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-graphics/jsfiddle/demo.html @@ -8,9 +8,6 @@ Advanced Markers Using Graphics - - - diff --git a/dist/samples/advanced-markers-graphics/jsfiddle/demo.js b/dist/samples/advanced-markers-graphics/jsfiddle/demo.js index 5eecfb4d..754f62e2 100644 --- a/dist/samples/advanced-markers-graphics/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-graphics/jsfiddle/demo.js @@ -32,7 +32,7 @@ async function initMap() { // A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement('img'); - beachFlagImg.src = new URL('./images/beachflag.png', import.meta.url).href; + beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href; const beachFlagMarkerView = new AdvancedMarkerElement({ map, position: { lat: 37.434, lng: -122.082 }, @@ -45,10 +45,10 @@ async function initMap() { // A marker with a custom SVG glyph. - const glyphImg = document.createElement('img'); - glyphImg.src = new URL('./images/google_logo_g.svg', import.meta.url).href; + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); const glyphSvgPinElement = new PinElement({ - glyph: glyphImg, + //@ts-ignore + glyphSrc: glyphImgSrc, }); const glyphSvgMarkerView = new AdvancedMarkerElement({ map, @@ -66,7 +66,8 @@ async function initMap() { await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); const pinElement = new PinElement({ background: place.iconBackgroundColor, - glyph: new URL(String(place.svgIconMaskURI)), + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), }); const placeIconMarkerView = new AdvancedMarkerElement({ map, @@ -75,23 +76,6 @@ async function initMap() { title: place.displayName, }); - - // A marker using a Font Awesome icon for the glyph. - const icon = document.createElement('div'); - icon.innerHTML = ''; - const faPin = new PinElement({ - glyph: icon, - glyphColor: '#ff8300', - background: '#FFD514', - borderColor: '#ff8300', - }); - const faMarker = new AdvancedMarkerElement({ - map, - position: { lat: 37.412, lng: -122.095829650878 }, - content: faPin.element, - title: 'A marker using a FontAwesome icon for the glyph.' - }); - } initMap(); export {};