Skip to content

Commit f5d61e1

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#904)
1 parent c2488e4 commit f5d61e1

File tree

15 files changed

+272
-240
lines changed

15 files changed

+272
-240
lines changed

‎dist/samples/advanced-markers-graphics/app/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!doctype html>
22
<!--
33
@license
4-
Copyright 2019 Google LLC. All Rights Reserved.
4+
Copyright 2025 Google LLC. All Rights Reserved.
55
SPDX-License-Identifier: Apache-2.0
66
-->
77
<!-- [START maps_advanced_markers_graphics] -->
@@ -10,13 +10,13 @@
1010
<title>Advanced Markers Using Graphics</title>
1111
<link rel="stylesheet" type="text/css" href="./style.css" />
1212
<script type="module" src="./index.js"></script>
13-
</head>
14-
<body>
15-
<div id="map"></div>
16-
1713
<!-- prettier-ignore -->
1814
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
1915
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
16+
</head>
17+
<body>
18+
<gmp-map center="37.42475,-122.0845" zoom="13" map-id="4504f8b37365c3d0"></gmp-map>
19+
2020
</body>
2121
</html>
2222
<!-- [END maps_advanced_markers_graphics] -->

‎dist/samples/advanced-markers-graphics/app/index.ts‎

Lines changed: 88 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,109 @@
11
/**
22
* @license
3-
* Copyright 2019 Google LLC. All Rights Reserved.
3+
* Copyright 2025 Google LLC. All Rights Reserved.
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66

77
// [START maps_advanced_markers_graphics]
88
async function initMap() {
9-
// Request needed libraries.
10-
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
11-
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
12-
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
9+
// Request needed libraries.
10+
const { Map } = (await google.maps.importLibrary(
11+
'maps'
12+
)) as google.maps.MapsLibrary;
13+
const { AdvancedMarkerElement, PinElement } =
14+
(await google.maps.importLibrary('marker')) as google.maps.MarkerLibrary;
15+
const { Place } = (await google.maps.importLibrary(
16+
'places'
17+
)) as google.maps.PlacesLibrary;
1318

14-
const map = new Map(document.getElementById('map') as HTMLElement, {
15-
center: { lat: 37.42475, lng: -122.0845 },
16-
zoom: 13,
17-
mapId: '4504f8b37365c3d0',
18-
});
19+
const mapElement = document.querySelector(
20+
'gmp-map'
21+
) as google.maps.MapElement;
1922

20-
// [START maps_advanced_markers_graphics_inline]
21-
const parser = new DOMParser();
23+
// [START maps_advanced_markers_graphics_inline]
24+
const parser = new DOMParser();
2225

23-
// A marker with a custom inline SVG.
24-
const pinSvgString = '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';
25-
26-
const pinSvg =
27-
parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;
28-
const pinSvgMarkerView = new AdvancedMarkerElement({
29-
map,
30-
position: { lat: 37.42475, lng: -122.094 },
31-
content: pinSvg,
32-
title: 'A marker using a custom SVG image.',
33-
//@ts-ignore
34-
anchorLeft: "-50%",
35-
anchorTop: "-50%",
36-
});
37-
// [END maps_advanced_markers_graphics_inline]
26+
// A marker with a custom inline SVG.
27+
const pinSvgString =
28+
'<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect width="56" height="56" rx="28" fill="#7837FF"></rect><path d="M46.0675 22.1319L44.0601 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.9402 33.2201L9.93262 33.8723" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 47.0046V44.8933" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M27.9999 9V11.1113" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 43.3597L37.9186 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 12.6442L18.0816 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.93262 22.1319L11.9402 22.7843" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M46.0676 33.8724L44.0601 33.2201" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M39.1583 12.6442L37.9186 14.3506" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.8419 43.3597L18.0816 41.6532" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M28 39L26.8725 37.9904C24.9292 36.226 23.325 34.7026 22.06 33.4202C20.795 32.1378 19.7867 30.9918 19.035 29.9823C18.2833 28.9727 17.7562 28.0587 17.4537 27.2401C17.1512 26.4216 17 25.5939 17 24.7572C17 23.1201 17.5546 21.7513 18.6638 20.6508C19.7729 19.5502 21.1433 19 22.775 19C23.82 19 24.7871 19.2456 25.6762 19.7367C26.5654 20.2278 27.34 20.9372 28 21.8649C28.77 20.8827 29.5858 20.1596 30.4475 19.6958C31.3092 19.2319 32.235 19 33.225 19C34.8567 19 36.2271 19.5502 37.3362 20.6508C38.4454 21.7513 39 23.1201 39 24.7572C39 25.5939 38.8488 26.4216 38.5463 27.2401C38.2438 28.0587 37.7167 28.9727 36.965 29.9823C36.2133 30.9918 35.205 32.1378 33.94 33.4202C32.675 34.7026 31.0708 36.226 29.1275 37.9904L28 39Z" fill="#FF7878"></path></svg>';
3829

39-
// [START maps_advanced_markers_graphics_png]
40-
// A marker with a with a URL pointing to a PNG.
41-
const beachFlagImg = document.createElement('img');
42-
beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;
30+
const pinSvg = parser.parseFromString(
31+
pinSvgString,
32+
'image/svg+xml'
33+
).documentElement;
34+
const pinSvgMarker = new AdvancedMarkerElement({
35+
position: { lat: 37.42475, lng: -122.094 },
36+
title: 'A marker using a custom SVG image.',
37+
//@ts-ignore
38+
anchorLeft: '-50%',
39+
anchorTop: '-50%',
40+
});
41+
pinSvgMarker.append(pinSvg);
42+
mapElement.append(pinSvgMarker);
43+
// [END maps_advanced_markers_graphics_inline]
4344

44-
const beachFlagMarkerView = new AdvancedMarkerElement({
45-
map,
46-
position: { lat: 37.434, lng: -122.082 },
47-
content: beachFlagImg,
48-
title: 'A marker using a custom PNG Image',
49-
//@ts-ignore
50-
anchorLeft: "0px",
51-
anchorTop: "100%",
52-
});
53-
// [END maps_advanced_markers_graphics_png]
45+
// [START maps_advanced_markers_graphics_png]
46+
// A marker with a with a URL pointing to a PNG.
47+
const beachFlagImg = document.createElement('img');
48+
beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;
5449

55-
// [START maps_advanced_markers_graphics_svg_glyph]
56-
// A marker with a custom SVG glyph.
57-
const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);
58-
59-
const glyphSvgPinElement = new PinElement({
60-
//@ts-ignore
61-
glyphSrc: glyphImgSrc,
62-
});
50+
const beachFlagMarker = new AdvancedMarkerElement({
51+
position: { lat: 37.434, lng: -122.082 },
52+
content: beachFlagImg,
53+
title: 'A marker using a custom PNG Image',
54+
//@ts-ignore
55+
anchorLeft: '0px',
56+
anchorTop: '100%',
57+
});
58+
mapElement.append(beachFlagMarker);
59+
// [END maps_advanced_markers_graphics_png]
6360

64-
const glyphSvgMarkerView = new AdvancedMarkerElement({
65-
map,
66-
position: { lat: 37.425, lng: -122.07 },
67-
content: glyphSvgPinElement.element,
68-
title: "A marker using a custom SVG for the glyph.",
69-
});
70-
// [END maps_advanced_markers_graphics_svg_glyph]
61+
// [START maps_advanced_markers_graphics_svg_glyph]
62+
// A marker with a custom SVG glyph.
63+
const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);
7164

72-
// [START maps_advanced_markers_graphics_place_icon]
73-
// A marker customized using a place icon and color, name, and geometry.
74-
const place = new Place({
75-
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
76-
});
65+
const glyphSvgPinElement = new PinElement({
66+
//@ts-ignore
67+
glyphSrc: glyphImgSrc,
68+
});
7769

78-
// Call fetchFields, passing the desired data fields.
79-
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });
70+
const glyphSvgMarker = new AdvancedMarkerElement({
71+
position: { lat: 37.425, lng: -122.07 },
72+
title: 'A marker using a custom SVG for the glyph.',
73+
});
74+
glyphSvgMarker.append(glyphSvgPinElement);
75+
mapElement.append(glyphSvgMarker);
76+
// [END maps_advanced_markers_graphics_svg_glyph]
8077

81-
const pinElement = new PinElement({
82-
background: place.iconBackgroundColor,
83-
//@ts-ignore
84-
glyphSrc: new URL(String(place.svgIconMaskURI)),
85-
});
78+
// [START maps_advanced_markers_graphics_place_icon]
79+
// A marker customized using a place icon and color, name, and geometry.
80+
const place = new Place({
81+
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
82+
});
8683

87-
const placeIconMarkerView = new AdvancedMarkerElement({
88-
map,
89-
position: place.location,
90-
content: pinElement.element,
91-
title: place.displayName,
92-
});
93-
// [END maps_advanced_markers_graphics_place_icon]
84+
// Call fetchFields, passing the desired data fields.
85+
await place.fetchFields({
86+
fields: [
87+
'location',
88+
'displayName',
89+
'svgIconMaskURI',
90+
'iconBackgroundColor',
91+
],
92+
});
93+
94+
const pinElement = new PinElement({
95+
background: place.iconBackgroundColor,
96+
//@ts-ignore
97+
glyphSrc: new URL(String(place.svgIconMaskURI)),
98+
});
99+
100+
const placeIconMarker = new AdvancedMarkerElement({
101+
position: place.location,
102+
title: place.displayName,
103+
});
104+
placeIconMarker.append(pinElement);
105+
mapElement.append(placeIconMarker);
106+
// [END maps_advanced_markers_graphics_place_icon]
94107
}
95108

96109
initMap();

‎dist/samples/advanced-markers-graphics/app/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* @license
3-
* Copyright 2019 Google LLC. All Rights Reserved.
3+
* Copyright 2025 Google LLC. All Rights Reserved.
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66
/* [START maps_advanced_markers_graphics] */
77
/*
88
* Always set the map height explicitly to define the size of the div element
99
* that contains the map.
1010
*/
11-
#map {
11+
gmp-map {
1212
height: 100%;
1313
}
1414

‎dist/samples/advanced-markers-graphics/dist/assets/index-D1HGXiPN.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎dist/samples/advanced-markers-graphics/dist/assets/index-DW_Ml_OD.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)