Skip to content

Commit 4c4c6ab

Browse files
willum070willum070
authored
feat: Updates samples to use new glyphSrc and glyphText properties. (#851)
* feat: Updates samples to use new glyphSrc and glyphText properties. * Remove external styles and scripts from index.html Removed Font Awesome script and Material Symbols stylesheet links.
1 parent 8378469 commit 4c4c6ab

File tree

5 files changed

+11
-30
lines changed

5 files changed

+11
-30
lines changed

‎samples/advanced-markers-basic-style/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@ async function initMap() {
7979

8080
// [START maps_advanced_markers_basic_style_text_glyph]
8181
const pinTextGlyph = new PinElement({
82-
glyph: 'T',
82+
//@ts-ignore
83+
glyphText: 'T',
8384
glyphColor: 'white',
8485
});
8586
const markerViewGlyphText = new AdvancedMarkerElement({
@@ -92,7 +93,8 @@ async function initMap() {
9293
// [START maps_advanced_markers_basic_style_hide_glyph]
9394
// Hide the glyph.
9495
const pinNoGlyph = new PinElement({
95-
glyph: '',
96+
//@ts-ignore
97+
glyphText: '',
9698
});
9799
const markerViewNoGlyph = new AdvancedMarkerElement({
98100
map,

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@
88
<html>
99
<head>
1010
<title>Advanced Markers Using Graphics</title>
11-
12-
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
13-
1411
<link rel="stylesheet" type="text/css" href="./style.css" />
1512
<script type="module" src="./index.js"></script>
1613
</head>

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

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ async function initMap() {
3939
// [START maps_advanced_markers_graphics_png]
4040
// A marker with a with a URL pointing to a PNG.
4141
const beachFlagImg = document.createElement('img');
42-
beachFlagImg.src = new URL('./images/beachflag.png', import.meta.url).href;
42+
beachFlagImg.src = new URL('./public/beachflag.png', import.meta.url).href;
4343

4444
const beachFlagMarkerView = new AdvancedMarkerElement({
4545
map,
@@ -54,11 +54,11 @@ async function initMap() {
5454

5555
// [START maps_advanced_markers_graphics_svg_glyph]
5656
// A marker with a custom SVG glyph.
57-
const glyphImg = document.createElement('img');
58-
glyphImg.src = new URL('./images/google_logo_g.svg', import.meta.url).href;
59-
57+
const glyphImgSrc = new URL('./public/google_logo_g.svg', import.meta.url);
58+
6059
const glyphSvgPinElement = new PinElement({
61-
glyph: glyphImg,
60+
//@ts-ignore
61+
glyphSrc: glyphImgSrc,
6262
});
6363

6464
const glyphSvgMarkerView = new AdvancedMarkerElement({
@@ -80,7 +80,8 @@ async function initMap() {
8080

8181
const pinElement = new PinElement({
8282
background: place.iconBackgroundColor,
83-
glyph: new URL(String(place.svgIconMaskURI)),
83+
//@ts-ignore
84+
glyphSrc: new URL(String(place.svgIconMaskURI)),
8485
});
8586

8687
const placeIconMarkerView = new AdvancedMarkerElement({
@@ -90,25 +91,6 @@ async function initMap() {
9091
title: place.displayName,
9192
});
9293
// [END maps_advanced_markers_graphics_place_icon]
93-
94-
// [START maps_advanced_markers_graphics_fontawesome]
95-
// A marker using a Font Awesome icon for the glyph.
96-
const icon = document.createElement('div');
97-
icon.innerHTML = '<i class="fa fa-pizza-slice fa-lg"></i>';
98-
const faPin = new PinElement({
99-
glyph: icon,
100-
glyphColor: '#ff8300',
101-
background: '#FFD514',
102-
borderColor: '#ff8300',
103-
});
104-
105-
const faMarker = new AdvancedMarkerElement({
106-
map,
107-
position: { lat: 37.412, lng: -122.095829650878 },
108-
content: faPin.element,
109-
title: 'A marker using a FontAwesome icon for the glyph.'
110-
});
111-
// [END maps_advanced_markers_graphics_fontawesome]
11294
}
11395

11496
initMap();

samples/advanced-markers-graphics/images/beachflag.png renamed to samples/advanced-markers-graphics/public/beachflag.png

File renamed without changes.

samples/advanced-markers-graphics/images/google_logo_g.svg renamed to samples/advanced-markers-graphics/public/google_logo_g.svg

File renamed without changes.

0 commit comments

Comments
 (0)