Skip to content

Commit d8d14fc

Browse files
willum070willum070
authored
feat: Updates some adv marker samples to weekly and gmp-map. (#830)
* feat: Updates some adv marker samples to weekly and gmp-map. * Change to no longer set map options Removed mapTypeControl option from innerMap settings. * Change to not remove maptype control Removed mapTypeControl option from innerMap settings. * Refactor draggable marker initialization in map Removed innerMap reference and updated draggableMarker initialization. * Refactor marker initialization in initMap function Updated the marker initialization to append directly to the map element instead of using innerMap. * Remove mapTypeControl from innerMap options Removed mapTypeControl option from innerMap settings. * Remove innerMap references and append markers directly * Remove innerMap reference and append markers directly * Refactor marker initialization in initMap function * Refactor marker creation and visibility logic * Increase map zoom level from 14 to 18 * Change appendChild to append for markers * Refactor marker creation and usage in index.ts * Fix marker content assignment in index.ts
1 parent 5719368 commit d8d14fc

File tree

18 files changed

+146
-159
lines changed

18 files changed

+146
-159
lines changed

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div id="map"></div>
17-
1814
<!-- prettier-ignore -->
1915
<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))})
2016
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map center="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
2120
</body>
2221
</html>
2322
<!-- [END maps_advanced_markers_basic_style] -->

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

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,75 +6,70 @@
66

77
// [START maps_advanced_markers_basic_style]
88
const parser = new DOMParser();
9+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
910

1011
async function initMap() {
1112
// Request needed libraries.
1213
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
1314
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
1415

15-
const map = new Map(document.getElementById('map') as HTMLElement, {
16-
center: { lat: 37.419, lng: -122.02 },
17-
zoom: 14,
18-
mapId: '4504f8b37365c3d0',
19-
});
20-
21-
// Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
16+
// Each PinElement is paired with a marker to demonstrate setting each parameter.
2217

2318
// [START maps_advanced_markers_basic_style_title]
2419
// Default marker with title text (no PinElement).
25-
const markerViewWithText = new AdvancedMarkerElement({
26-
map,
20+
const markerWithText = new AdvancedMarkerElement({
2721
position: { lat: 37.419, lng: -122.03 },
2822
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
2923
});
24+
mapElement.append(markerWithText);
3025
// [END maps_advanced_markers_basic_style_title]
3126

3227
// [START maps_advanced_markers_basic_style_scale]
3328
// Adjust the scale.
3429
const pinScaled = new PinElement({
3530
scale: 1.5,
3631
});
37-
const markerViewScaled = new AdvancedMarkerElement({
38-
map,
32+
const markerScaled = new AdvancedMarkerElement({
3933
position: { lat: 37.419, lng: -122.02 },
40-
content: pinScaled.element,
4134
});
35+
markerScaled.append(pinScaled);
36+
mapElement.append(markerScaled);
4237
// [END maps_advanced_markers_basic_style_scale]
4338

4439
// [START maps_advanced_markers_basic_style_background]
4540
// Change the background color.
4641
const pinBackground = new PinElement({
4742
background: '#FBBC04',
4843
});
49-
const markerViewBackground = new AdvancedMarkerElement({
50-
map,
44+
const markerBackground = new AdvancedMarkerElement({
5145
position: { lat: 37.419, lng: -122.01 },
52-
content: pinBackground.element,
5346
});
47+
markerBackground.append(pinBackground);
48+
mapElement.append(markerBackground);
5449
// [END maps_advanced_markers_basic_style_background]
5550

5651
// [START maps_advanced_markers_basic_style_border]
5752
// Change the border color.
5853
const pinBorder = new PinElement({
5954
borderColor: '#137333',
6055
});
61-
const markerViewBorder = new AdvancedMarkerElement({
62-
map,
56+
const markerBorder = new AdvancedMarkerElement({
6357
position: { lat: 37.415, lng: -122.035 },
64-
content: pinBorder.element,
6558
});
59+
markerBorder.append(pinBorder);
60+
mapElement.append(markerBorder);
6661
// [END maps_advanced_markers_basic_style_border]
6762

6863
// [START maps_advanced_markers_basic_style_glyph]
6964
// Change the glyph color.
7065
const pinGlyph = new PinElement({
7166
glyphColor: 'white',
7267
});
73-
const markerViewGlyph = new AdvancedMarkerElement({
74-
map,
68+
const markerGlyph = new AdvancedMarkerElement({
7569
position: { lat: 37.415, lng: -122.025 },
76-
content: pinGlyph.element,
7770
});
71+
markerGlyph.append(pinGlyph);
72+
mapElement.append(markerGlyph);
7873
// [END maps_advanced_markers_basic_style_glyph]
7974

8075
// [START maps_advanced_markers_basic_style_text_glyph]
@@ -83,11 +78,11 @@ async function initMap() {
8378
glyphText: 'T',
8479
glyphColor: 'white',
8580
});
86-
const markerViewGlyphText = new AdvancedMarkerElement({
87-
map,
81+
const markerGlyphText = new AdvancedMarkerElement({
8882
position: { lat: 37.415, lng: -122.015 },
89-
content: pinTextGlyph.element,
9083
});
84+
markerGlyphText.append(pinTextGlyph);
85+
mapElement.append(markerGlyphText);
9186
// [END maps_advanced_markers_basic_style_text_glyph]
9287

9388
// [START maps_advanced_markers_basic_style_hide_glyph]
@@ -96,14 +91,14 @@ async function initMap() {
9691
//@ts-ignore
9792
glyphText: '',
9893
});
99-
const markerViewNoGlyph = new AdvancedMarkerElement({
100-
map,
94+
const markerNoGlyph = new AdvancedMarkerElement({
10195
position: { lat: 37.415, lng: -122.005 },
102-
content: pinNoGlyph.element,
10396
});
97+
markerNoGlyph.append(pinNoGlyph);
98+
mapElement.append(markerNoGlyph);
10499
// [END maps_advanced_markers_basic_style_hide_glyph]
105100

106101
}
107102

108103
initMap();
109-
// [END maps_advanced_markers_basic_style]
104+
// [END maps_advanced_markers_basic_style]

‎samples/advanced-markers-basic-style/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
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

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,13 @@
2121

2222
<link rel="stylesheet" type="text/css" href="./style.css" />
2323
<script type="module" src="./index.js"></script>
24+
<!-- prettier-ignore -->
25+
<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))})
26+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
2427
</head>
2528
<body>
2629
<div id="container">
27-
<div id="map"></div>
30+
<gmp-map center="47.609414458375674,-122.33897030353548" zoom="17" map-id="6ff586e93e18149f"></gmp-map>
2831
<div id="sidebar">
2932
<div class="mdc-select mdc-select--outlined">
3033
<div
@@ -69,12 +72,9 @@
6972
</ul>
7073
</div>
7174
</div>
75+
</div>
7276
</div>
7377
</div>
74-
75-
<!-- prettier-ignore -->
76-
<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))})
77-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
7878
</body>
7979
</html>
8080
<!-- [END maps_advanced_markers_collision] -->

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,27 @@
66

77
// eslint-disable no-undef
88
// [START maps_advanced_markers_collision]
9-
let map: google.maps.Map;
9+
const mapElement = document.querySelector("gmp-map") as google.maps.MapElement;
1010

1111
// Initialize and add the map
1212
async function initMap(): Promise<void> {
1313
// Request needed libraries.
14-
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
15-
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
16-
14+
const { Map } = (await google.maps.importLibrary(
15+
"maps"
16+
)) as google.maps.MapsLibrary;
17+
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
18+
"marker"
19+
)) as google.maps.MarkerLibrary;
20+
1721
let markers: google.maps.marker.AdvancedMarkerElement[] = [];
1822

1923
let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
2024

21-
map = new Map(
22-
document.getElementById("map") as HTMLElement,
23-
{
24-
mapId: "6ff586e93e18149f",
25-
center: { lat: 47.609414458375674, lng: -122.33897030353548 },
26-
zoom: 17,
27-
} as google.maps.MapOptions
28-
);
29-
3025
// @ts-ignore
3126
const select = new mdc.select.MDCSelect(
3227
document.querySelector(".mdc-select") as HTMLElement
3328
);
3429

35-
3630
select.listen("MDCSelect:change", () => {
3731
collisionBehavior = select.value;
3832
markers.forEach((marker) => {
@@ -63,13 +57,13 @@ async function initMap(): Promise<void> {
6357
// [START maps_advanced_markers_collision_create_marker]
6458
const advancedMarker = new AdvancedMarkerElement({
6559
position: new google.maps.LatLng({ lat, lng }),
66-
map,
6760
collisionBehavior: collisionBehavior,
6861
});
62+
mapElement.appendChild(advancedMarker);
6963
// [END maps_advanced_markers_collision_create_marker]
7064
markers.push(advancedMarker);
7165
});
7266
}
7367

7468
initMap();
75-
// [END maps_advanced_markers_collision]
69+
// [END maps_advanced_markers_collision]

‎samples/advanced-markers-collision/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ body {
4040
flex-basis: 15rem;
4141
flex-grow: 1;
4242
padding: 1rem;
43-
max-width: 30rem;
43+
max-width: 33rem;
4444
height: 100%;
4545
box-sizing: border-box;
4646
overflow: auto;
4747
}
4848

49-
#map {
49+
gmp-map {
5050
flex-basis: 0;
5151
flex-grow: 4;
5252
height: 100%;

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,12 @@
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div id="map"></div>
17-
1814
<!-- prettier-ignore -->
1915
<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))})
2016
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map center="37.39094933041195,-122.02503913145092" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
2120
</body>
2221
</html>
2322
<!-- [END maps_advanced_markers_draggable] -->

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,31 @@
55
*/
66

77
// [START maps_advanced_markers_draggable]
8+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
9+
810
async function initMap() {
911
// Request needed libraries.
1012
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
1113
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
12-
13-
const map = new Map(document.getElementById('map') as HTMLElement, {
14-
center: {lat: 37.39094933041195, lng: -122.02503913145092},
15-
zoom: 14,
16-
mapId: '4504f8b37365c3d0',
17-
});
1814

1915
const infoWindow = new InfoWindow();
2016

2117
// [START maps_advanced_markers_draggable_marker]
2218
const draggableMarker = new AdvancedMarkerElement({
23-
map,
2419
position: {lat: 37.39094933041195, lng: -122.02503913145092},
2520
gmpDraggable: true,
2621
title: "This marker is draggable.",
2722
});
23+
mapElement.append(draggableMarker);
2824
// [END maps_advanced_markers_draggable_marker]
25+
2926
draggableMarker.addListener('dragend', (event) => {
3027
const position = draggableMarker.position as google.maps.LatLng;
3128
infoWindow.close();
3229
infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
3330
infoWindow.open(draggableMarker.map, draggableMarker);
3431
});
35-
3632
}
3733

3834
initMap();
39-
// [END maps_advanced_markers_draggable]
35+
// [END maps_advanced_markers_draggable]

‎samples/advanced-markers-draggable/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
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

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<!--
33
@license
44
Copyright 2019 Google LLC. All Rights Reserved.
@@ -11,13 +11,16 @@
1111

1212
<link rel="stylesheet" type="text/css" href="./style.css" />
1313
<script type="module" src="./index.js"></script>
14-
</head>
15-
<body>
16-
<div id="map"></div>
17-
1814
<!-- prettier-ignore -->
1915
<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))})
2016
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
17+
</head>
18+
<body>
19+
<gmp-map
20+
center="37.42,-122.1"
21+
zoom="14"
22+
map-id="4504f8b37365c3d0"
23+
></gmp-map>
2124
</body>
2225
</html>
2326
<!-- [END maps_advanced_markers_html_simple] -->

0 commit comments

Comments
 (0)