diff --git a/dist/samples/advanced-markers-graphics/app/index.html b/dist/samples/advanced-markers-graphics/app/index.html index 13be221d..7467b14a 100644 --- a/dist/samples/advanced-markers-graphics/app/index.html +++ b/dist/samples/advanced-markers-graphics/app/index.html @@ -1,7 +1,7 @@ @@ -10,13 +10,13 @@ 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 07d7ec5a..0bd5a9a3 100644 --- a/dist/samples/advanced-markers-graphics/app/index.ts +++ b/dist/samples/advanced-markers-graphics/app/index.ts @@ -1,96 +1,109 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_graphics] 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 { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + // 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 { Place } = (await google.maps.importLibrary( + 'places' + )) as google.maps.PlacesLibrary; - const map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.42475, lng: -122.0845 }, - zoom: 13, - mapId: '4504f8b37365c3d0', - }); + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; - // [START maps_advanced_markers_graphics_inline] - const parser = new DOMParser(); + // [START maps_advanced_markers_graphics_inline] + const parser = new DOMParser(); - // A marker with a custom inline SVG. - const pinSvgString = ''; - - const pinSvg = - parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement; - const pinSvgMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.42475, lng: -122.094 }, - content: pinSvg, - title: 'A marker using a custom SVG image.', - //@ts-ignore - anchorLeft: "-50%", - anchorTop: "-50%", - }); - // [END maps_advanced_markers_graphics_inline] + // A marker with a custom inline SVG. + const pinSvgString = + ''; - // [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('./public/beachflag.png', import.meta.url).href; + const pinSvg = parser.parseFromString( + pinSvgString, + 'image/svg+xml' + ).documentElement; + const pinSvgMarker = new AdvancedMarkerElement({ + position: { lat: 37.42475, lng: -122.094 }, + title: 'A marker using a custom SVG image.', + //@ts-ignore + anchorLeft: '-50%', + anchorTop: '-50%', + }); + pinSvgMarker.append(pinSvg); + mapElement.append(pinSvgMarker); + // [END maps_advanced_markers_graphics_inline] - const beachFlagMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.434, lng: -122.082 }, - content: beachFlagImg, - title: 'A marker using a custom PNG Image', - //@ts-ignore - anchorLeft: "0px", - anchorTop: "100%", - }); - // [END maps_advanced_markers_graphics_png] + // [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('./public/beachflag.png', import.meta.url).href; - // [START maps_advanced_markers_graphics_svg_glyph] - // A marker with a custom SVG glyph. - const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); - - const glyphSvgPinElement = new PinElement({ - //@ts-ignore - glyphSrc: glyphImgSrc, - }); + const beachFlagMarker = new AdvancedMarkerElement({ + position: { lat: 37.434, lng: -122.082 }, + content: beachFlagImg, + title: 'A marker using a custom PNG Image', + //@ts-ignore + anchorLeft: '0px', + anchorTop: '100%', + }); + mapElement.append(beachFlagMarker); + // [END maps_advanced_markers_graphics_png] - const glyphSvgMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.07 }, - content: glyphSvgPinElement.element, - title: "A marker using a custom SVG for the glyph.", - }); - // [END maps_advanced_markers_graphics_svg_glyph] + // [START maps_advanced_markers_graphics_svg_glyph] + // A marker with a custom SVG glyph. + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); - // [START maps_advanced_markers_graphics_place_icon] - // A marker customized using a place icon and color, name, and geometry. - const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - }); + const glyphSvgPinElement = new PinElement({ + //@ts-ignore + glyphSrc: glyphImgSrc, + }); - // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); + const glyphSvgMarker = new AdvancedMarkerElement({ + position: { lat: 37.425, lng: -122.07 }, + title: 'A marker using a custom SVG for the glyph.', + }); + glyphSvgMarker.append(glyphSvgPinElement); + mapElement.append(glyphSvgMarker); + // [END maps_advanced_markers_graphics_svg_glyph] - const pinElement = new PinElement({ - background: place.iconBackgroundColor, - //@ts-ignore - glyphSrc: new URL(String(place.svgIconMaskURI)), - }); + // [START maps_advanced_markers_graphics_place_icon] + // A marker customized using a place icon and color, name, and geometry. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + }); - const placeIconMarkerView = new AdvancedMarkerElement({ - map, - position: place.location, - content: pinElement.element, - title: place.displayName, - }); - // [END maps_advanced_markers_graphics_place_icon] + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ + fields: [ + 'location', + 'displayName', + 'svgIconMaskURI', + 'iconBackgroundColor', + ], + }); + + const pinElement = new PinElement({ + background: place.iconBackgroundColor, + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), + }); + + const placeIconMarker = new AdvancedMarkerElement({ + position: place.location, + title: place.displayName, + }); + placeIconMarker.append(pinElement); + mapElement.append(placeIconMarker); + // [END maps_advanced_markers_graphics_place_icon] } initMap(); diff --git a/dist/samples/advanced-markers-graphics/app/style.css b/dist/samples/advanced-markers-graphics/app/style.css index 57b8f21d..4f8e11cf 100644 --- a/dist/samples/advanced-markers-graphics/app/style.css +++ b/dist/samples/advanced-markers-graphics/app/style.css @@ -1,6 +1,6 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_advanced_markers_graphics] */ @@ -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-graphics/dist/assets/index-D1HGXiPN.js b/dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.js deleted file mode 100644 index a7d95177..00000000 --- a/dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.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 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/assets/index-DW_Ml_OD.css b/dist/samples/advanced-markers-graphics/dist/assets/index-DW_Ml_OD.css deleted file mode 100644 index 672cb7cc..00000000 --- a/dist/samples/advanced-markers-graphics/dist/assets/index-DW_Ml_OD.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} diff --git a/dist/samples/advanced-markers-graphics/dist/assets/index-DglL16tP.js b/dist/samples/advanced-markers-graphics/dist/assets/index-DglL16tP.js new file mode 100644 index 00000000..e72dd5d8 --- /dev/null +++ b/dist/samples/advanced-markers-graphics/dist/assets/index-DglL16tP.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 a of t.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&i(a)}).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 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */async function w(){const{Map:d}=await google.maps.importLibrary("maps"),{AdvancedMarkerElement:o,PinElement:n}=await google.maps.importLibrary("marker"),{Place:i}=await google.maps.importLibrary("places"),e=document.querySelector("gmp-map"),h=new DOMParser().parseFromString('',"image/svg+xml").documentElement,s=new o({position:{lat:37.42475,lng:-122.094},title:"A marker using a custom SVG image.",anchorLeft:"-50%",anchorTop:"-50%"});s.append(h),e.append(s);const p=document.createElement("img");p.src=new URL(""+new URL("../beachflag.png",import.meta.url).href,import.meta.url).href;const g=new o({position:{lat:37.434,lng:-122.082},content:p,title:"A marker using a custom PNG Image",anchorLeft:"0px",anchorTop:"100%"});e.append(g);const u=new URL(""+new URL("../google_logo_g.svg",import.meta.url).href,import.meta.url),m=new n({glyphSrc:u}),l=new o({position:{lat:37.425,lng:-122.07},title:"A marker using a custom SVG for the glyph."});l.append(m),e.append(l);const r=new i({id:"ChIJN5Nz71W3j4ARhx5bwpTQEGg"});await r.fetchFields({fields:["location","displayName","svgIconMaskURI","iconBackgroundColor"]});const k=new n({background:r.iconBackgroundColor,glyphSrc:new URL(String(r.svgIconMaskURI))}),c=new o({position:r.location,title:r.displayName});c.append(k),e.append(c)}w(); diff --git a/dist/samples/advanced-markers-graphics/dist/assets/index-i_98oPIq.css b/dist/samples/advanced-markers-graphics/dist/assets/index-i_98oPIq.css new file mode 100644 index 00000000..c48393ed --- /dev/null +++ b/dist/samples/advanced-markers-graphics/dist/assets/index-i_98oPIq.css @@ -0,0 +1,5 @@ +/** + * @license + * Copyright 2025 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */gmp-map{height:100%}html,body{height:100%;margin:0;padding:0} diff --git a/dist/samples/advanced-markers-graphics/dist/index.html b/dist/samples/advanced-markers-graphics/dist/index.html index 57aed402..f4feb3ff 100644 --- a/dist/samples/advanced-markers-graphics/dist/index.html +++ b/dist/samples/advanced-markers-graphics/dist/index.html @@ -1,22 +1,22 @@ Advanced Markers Using Graphics - - - - -
- + + + + + + diff --git a/dist/samples/advanced-markers-graphics/docs/index.html b/dist/samples/advanced-markers-graphics/docs/index.html index 13be221d..7467b14a 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.html +++ b/dist/samples/advanced-markers-graphics/docs/index.html @@ -1,7 +1,7 @@ @@ -10,13 +10,13 @@ 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 f83eb04f..2fade107 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.js +++ b/dist/samples/advanced-markers-graphics/docs/index.js @@ -1,47 +1,43 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_graphics] async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); - const { Place } = await google.maps.importLibrary("places"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.42475, lng: -122.0845 }, - zoom: 13, - mapId: '4504f8b37365c3d0', - }); + const { Map } = (await google.maps.importLibrary('maps')); + const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker')); + const { Place } = (await google.maps.importLibrary('places')); + const mapElement = document.querySelector('gmp-map'); // [START maps_advanced_markers_graphics_inline] const parser = new DOMParser(); // A marker with a custom inline SVG. const pinSvgString = ''; const pinSvg = parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement; - const pinSvgMarkerView = new AdvancedMarkerElement({ - map, + const pinSvgMarker = new AdvancedMarkerElement({ position: { lat: 37.42475, lng: -122.094 }, - content: pinSvg, title: 'A marker using a custom SVG image.', //@ts-ignore - anchorLeft: "-50%", - anchorTop: "-50%", + anchorLeft: '-50%', + anchorTop: '-50%', }); + pinSvgMarker.append(pinSvg); + mapElement.append(pinSvgMarker); // [END maps_advanced_markers_graphics_inline] // [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('./public/beachflag.png', import.meta.url).href; - const beachFlagMarkerView = new AdvancedMarkerElement({ - map, + const beachFlagMarker = new AdvancedMarkerElement({ position: { lat: 37.434, lng: -122.082 }, content: beachFlagImg, title: 'A marker using a custom PNG Image', //@ts-ignore - anchorLeft: "0px", - anchorTop: "100%", + anchorLeft: '0px', + anchorTop: '100%', }); + mapElement.append(beachFlagMarker); // [END maps_advanced_markers_graphics_png] // [START maps_advanced_markers_graphics_svg_glyph] // A marker with a custom SVG glyph. @@ -50,12 +46,12 @@ async function initMap() { //@ts-ignore glyphSrc: glyphImgSrc, }); - const glyphSvgMarkerView = new AdvancedMarkerElement({ - map, + const glyphSvgMarker = new AdvancedMarkerElement({ position: { lat: 37.425, lng: -122.07 }, - content: glyphSvgPinElement.element, - title: "A marker using a custom SVG for the glyph.", + title: 'A marker using a custom SVG for the glyph.', }); + glyphSvgMarker.append(glyphSvgPinElement); + mapElement.append(glyphSvgMarker); // [END maps_advanced_markers_graphics_svg_glyph] // [START maps_advanced_markers_graphics_place_icon] // A marker customized using a place icon and color, name, and geometry. @@ -63,18 +59,25 @@ async function initMap() { id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); + await place.fetchFields({ + fields: [ + 'location', + 'displayName', + 'svgIconMaskURI', + 'iconBackgroundColor', + ], + }); const pinElement = new PinElement({ background: place.iconBackgroundColor, //@ts-ignore glyphSrc: new URL(String(place.svgIconMaskURI)), }); - const placeIconMarkerView = new AdvancedMarkerElement({ - map, + const placeIconMarker = new AdvancedMarkerElement({ position: place.location, - content: pinElement.element, title: place.displayName, }); + placeIconMarker.append(pinElement); + mapElement.append(placeIconMarker); // [END maps_advanced_markers_graphics_place_icon] } initMap(); diff --git a/dist/samples/advanced-markers-graphics/docs/index.ts b/dist/samples/advanced-markers-graphics/docs/index.ts index 07d7ec5a..0bd5a9a3 100644 --- a/dist/samples/advanced-markers-graphics/docs/index.ts +++ b/dist/samples/advanced-markers-graphics/docs/index.ts @@ -1,96 +1,109 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ // [START maps_advanced_markers_graphics] 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 { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; + // 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 { Place } = (await google.maps.importLibrary( + 'places' + )) as google.maps.PlacesLibrary; - const map = new Map(document.getElementById('map') as HTMLElement, { - center: { lat: 37.42475, lng: -122.0845 }, - zoom: 13, - mapId: '4504f8b37365c3d0', - }); + const mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; - // [START maps_advanced_markers_graphics_inline] - const parser = new DOMParser(); + // [START maps_advanced_markers_graphics_inline] + const parser = new DOMParser(); - // A marker with a custom inline SVG. - const pinSvgString = ''; - - const pinSvg = - parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement; - const pinSvgMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.42475, lng: -122.094 }, - content: pinSvg, - title: 'A marker using a custom SVG image.', - //@ts-ignore - anchorLeft: "-50%", - anchorTop: "-50%", - }); - // [END maps_advanced_markers_graphics_inline] + // A marker with a custom inline SVG. + const pinSvgString = + ''; - // [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('./public/beachflag.png', import.meta.url).href; + const pinSvg = parser.parseFromString( + pinSvgString, + 'image/svg+xml' + ).documentElement; + const pinSvgMarker = new AdvancedMarkerElement({ + position: { lat: 37.42475, lng: -122.094 }, + title: 'A marker using a custom SVG image.', + //@ts-ignore + anchorLeft: '-50%', + anchorTop: '-50%', + }); + pinSvgMarker.append(pinSvg); + mapElement.append(pinSvgMarker); + // [END maps_advanced_markers_graphics_inline] - const beachFlagMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.434, lng: -122.082 }, - content: beachFlagImg, - title: 'A marker using a custom PNG Image', - //@ts-ignore - anchorLeft: "0px", - anchorTop: "100%", - }); - // [END maps_advanced_markers_graphics_png] + // [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('./public/beachflag.png', import.meta.url).href; - // [START maps_advanced_markers_graphics_svg_glyph] - // A marker with a custom SVG glyph. - const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); - - const glyphSvgPinElement = new PinElement({ - //@ts-ignore - glyphSrc: glyphImgSrc, - }); + const beachFlagMarker = new AdvancedMarkerElement({ + position: { lat: 37.434, lng: -122.082 }, + content: beachFlagImg, + title: 'A marker using a custom PNG Image', + //@ts-ignore + anchorLeft: '0px', + anchorTop: '100%', + }); + mapElement.append(beachFlagMarker); + // [END maps_advanced_markers_graphics_png] - const glyphSvgMarkerView = new AdvancedMarkerElement({ - map, - position: { lat: 37.425, lng: -122.07 }, - content: glyphSvgPinElement.element, - title: "A marker using a custom SVG for the glyph.", - }); - // [END maps_advanced_markers_graphics_svg_glyph] + // [START maps_advanced_markers_graphics_svg_glyph] + // A marker with a custom SVG glyph. + const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url); - // [START maps_advanced_markers_graphics_place_icon] - // A marker customized using a place icon and color, name, and geometry. - const place = new Place({ - id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', - }); + const glyphSvgPinElement = new PinElement({ + //@ts-ignore + glyphSrc: glyphImgSrc, + }); - // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); + const glyphSvgMarker = new AdvancedMarkerElement({ + position: { lat: 37.425, lng: -122.07 }, + title: 'A marker using a custom SVG for the glyph.', + }); + glyphSvgMarker.append(glyphSvgPinElement); + mapElement.append(glyphSvgMarker); + // [END maps_advanced_markers_graphics_svg_glyph] - const pinElement = new PinElement({ - background: place.iconBackgroundColor, - //@ts-ignore - glyphSrc: new URL(String(place.svgIconMaskURI)), - }); + // [START maps_advanced_markers_graphics_place_icon] + // A marker customized using a place icon and color, name, and geometry. + const place = new Place({ + id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', + }); - const placeIconMarkerView = new AdvancedMarkerElement({ - map, - position: place.location, - content: pinElement.element, - title: place.displayName, - }); - // [END maps_advanced_markers_graphics_place_icon] + // Call fetchFields, passing the desired data fields. + await place.fetchFields({ + fields: [ + 'location', + 'displayName', + 'svgIconMaskURI', + 'iconBackgroundColor', + ], + }); + + const pinElement = new PinElement({ + background: place.iconBackgroundColor, + //@ts-ignore + glyphSrc: new URL(String(place.svgIconMaskURI)), + }); + + const placeIconMarker = new AdvancedMarkerElement({ + position: place.location, + title: place.displayName, + }); + placeIconMarker.append(pinElement); + mapElement.append(placeIconMarker); + // [END maps_advanced_markers_graphics_place_icon] } initMap(); diff --git a/dist/samples/advanced-markers-graphics/docs/style.css b/dist/samples/advanced-markers-graphics/docs/style.css index 57b8f21d..4f8e11cf 100644 --- a/dist/samples/advanced-markers-graphics/docs/style.css +++ b/dist/samples/advanced-markers-graphics/docs/style.css @@ -1,6 +1,6 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* [START maps_advanced_markers_graphics] */ @@ -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-graphics/jsfiddle/demo.css b/dist/samples/advanced-markers-graphics/jsfiddle/demo.css index fa4d8cd3..29cd2be7 100644 --- a/dist/samples/advanced-markers-graphics/jsfiddle/demo.css +++ b/dist/samples/advanced-markers-graphics/jsfiddle/demo.css @@ -1,6 +1,6 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ @@ -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-graphics/jsfiddle/demo.html b/dist/samples/advanced-markers-graphics/jsfiddle/demo.html index 0546228d..cccc9462 100644 --- a/dist/samples/advanced-markers-graphics/jsfiddle/demo.html +++ b/dist/samples/advanced-markers-graphics/jsfiddle/demo.html @@ -1,7 +1,7 @@ @@ -10,13 +10,13 @@ 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 754f62e2..8d46754b 100644 --- a/dist/samples/advanced-markers-graphics/jsfiddle/demo.js +++ b/dist/samples/advanced-markers-graphics/jsfiddle/demo.js @@ -1,47 +1,43 @@ /** * @license - * Copyright 2019 Google LLC. All Rights Reserved. + * Copyright 2025 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ async function initMap() { // Request needed libraries. - const { Map } = await google.maps.importLibrary("maps"); - const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker"); - const { Place } = await google.maps.importLibrary("places"); - const map = new Map(document.getElementById('map'), { - center: { lat: 37.42475, lng: -122.0845 }, - zoom: 13, - mapId: '4504f8b37365c3d0', - }); + const { Map } = (await google.maps.importLibrary('maps')); + const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary('marker')); + const { Place } = (await google.maps.importLibrary('places')); + const mapElement = document.querySelector('gmp-map'); const parser = new DOMParser(); // A marker with a custom inline SVG. const pinSvgString = ''; const pinSvg = parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement; - const pinSvgMarkerView = new AdvancedMarkerElement({ - map, + const pinSvgMarker = new AdvancedMarkerElement({ position: { lat: 37.42475, lng: -122.094 }, - content: pinSvg, title: 'A marker using a custom SVG image.', //@ts-ignore - anchorLeft: "-50%", - anchorTop: "-50%", + anchorLeft: '-50%', + anchorTop: '-50%', }); + pinSvgMarker.append(pinSvg); + mapElement.append(pinSvgMarker); // A marker with a with a URL pointing to a PNG. const beachFlagImg = document.createElement('img'); beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href; - const beachFlagMarkerView = new AdvancedMarkerElement({ - map, + const beachFlagMarker = new AdvancedMarkerElement({ position: { lat: 37.434, lng: -122.082 }, content: beachFlagImg, title: 'A marker using a custom PNG Image', //@ts-ignore - anchorLeft: "0px", - anchorTop: "100%", + anchorLeft: '0px', + anchorTop: '100%', }); + mapElement.append(beachFlagMarker); // A marker with a custom SVG glyph. @@ -50,12 +46,12 @@ async function initMap() { //@ts-ignore glyphSrc: glyphImgSrc, }); - const glyphSvgMarkerView = new AdvancedMarkerElement({ - map, + const glyphSvgMarker = new AdvancedMarkerElement({ position: { lat: 37.425, lng: -122.07 }, - content: glyphSvgPinElement.element, - title: "A marker using a custom SVG for the glyph.", + title: 'A marker using a custom SVG for the glyph.', }); + glyphSvgMarker.append(glyphSvgPinElement); + mapElement.append(glyphSvgMarker); // A marker customized using a place icon and color, name, and geometry. @@ -63,18 +59,25 @@ async function initMap() { id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', }); // Call fetchFields, passing the desired data fields. - await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] }); + await place.fetchFields({ + fields: [ + 'location', + 'displayName', + 'svgIconMaskURI', + 'iconBackgroundColor', + ], + }); const pinElement = new PinElement({ background: place.iconBackgroundColor, //@ts-ignore glyphSrc: new URL(String(place.svgIconMaskURI)), }); - const placeIconMarkerView = new AdvancedMarkerElement({ - map, + const placeIconMarker = new AdvancedMarkerElement({ position: place.location, - content: pinElement.element, title: place.displayName, }); + placeIconMarker.append(pinElement); + mapElement.append(placeIconMarker); } initMap();