Skip to content

Commit c87096d

Browse files
willum070willum070
committed
feat: Updates some adv marker samples to weekly and gmp-map.
1 parent d1c2733 commit c87096d

File tree

18 files changed

+147
-131
lines changed

18 files changed

+147
-131
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: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,25 @@
66

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

1012
async function initMap() {
1113
// Request needed libraries.
1214
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
1315
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
1416

15-
const map = new Map(document.getElementById('map') as HTMLElement, {
16-
center: { lat: 37.419, lng: -122.02 },
17-
zoom: 14,
18-
mapId: '4504f8b37365c3d0',
17+
innerMap = mapElement.innerMap;
18+
innerMap.setOptions({
19+
mapTypeControl: false,
1920
});
2021

2122
// Each PinElement is paired with a MarkerView to demonstrate setting each parameter.
2223

2324
// [START maps_advanced_markers_basic_style_title]
2425
// Default marker with title text (no PinElement).
2526
const markerViewWithText = new AdvancedMarkerElement({
26-
map,
27+
map: innerMap,
2728
position: { lat: 37.419, lng: -122.03 },
2829
title: 'Title text for the marker at lat: 37.419, lng: -122.03',
2930
});
@@ -35,7 +36,7 @@ async function initMap() {
3536
scale: 1.5,
3637
});
3738
const markerViewScaled = new AdvancedMarkerElement({
38-
map,
39+
map: innerMap,
3940
position: { lat: 37.419, lng: -122.02 },
4041
content: pinScaled.element,
4142
});
@@ -47,7 +48,7 @@ async function initMap() {
4748
background: '#FBBC04',
4849
});
4950
const markerViewBackground = new AdvancedMarkerElement({
50-
map,
51+
map: innerMap,
5152
position: { lat: 37.419, lng: -122.01 },
5253
content: pinBackground.element,
5354
});
@@ -59,7 +60,7 @@ async function initMap() {
5960
borderColor: '#137333',
6061
});
6162
const markerViewBorder = new AdvancedMarkerElement({
62-
map,
63+
map: innerMap,
6364
position: { lat: 37.415, lng: -122.035 },
6465
content: pinBorder.element,
6566
});
@@ -71,7 +72,7 @@ async function initMap() {
7172
glyphColor: 'white',
7273
});
7374
const markerViewGlyph = new AdvancedMarkerElement({
74-
map,
75+
map: innerMap,
7576
position: { lat: 37.415, lng: -122.025 },
7677
content: pinGlyph.element,
7778
});
@@ -83,7 +84,7 @@ async function initMap() {
8384
glyphColor: 'white',
8485
});
8586
const markerViewGlyphText = new AdvancedMarkerElement({
86-
map,
87+
map: innerMap,
8788
position: { lat: 37.415, lng: -122.015 },
8889
content: pinTextGlyph.element,
8990
});
@@ -95,7 +96,7 @@ async function initMap() {
9596
glyph: '',
9697
});
9798
const markerViewNoGlyph = new AdvancedMarkerElement({
98-
map,
99+
map: innerMap,
99100
position: { lat: 37.415, lng: -122.005 },
100101
content: pinNoGlyph.element,
101102
});

‎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: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,33 @@
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;
10+
let innerMap;
1011

1112
// Initialize and add the map
1213
async function initMap(): Promise<void> {
1314
// 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-
15+
const { Map } = (await google.maps.importLibrary(
16+
"maps"
17+
)) as google.maps.MapsLibrary;
18+
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
19+
"marker"
20+
)) as google.maps.MarkerLibrary;
21+
1722
let markers: google.maps.marker.AdvancedMarkerElement[] = [];
1823

1924
let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;
2025

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-
);
26+
innerMap = mapElement.innerMap;
27+
innerMap.setOptions({
28+
mapTypeControl: false,
29+
});
2930

3031
// @ts-ignore
3132
const select = new mdc.select.MDCSelect(
3233
document.querySelector(".mdc-select") as HTMLElement
3334
);
3435

35-
3636
select.listen("MDCSelect:change", () => {
3737
collisionBehavior = select.value;
3838
markers.forEach((marker) => {
@@ -63,7 +63,7 @@ async function initMap(): Promise<void> {
6363
// [START maps_advanced_markers_collision_create_marker]
6464
const advancedMarker = new AdvancedMarkerElement({
6565
position: new google.maps.LatLng({ lat, lng }),
66-
map,
66+
map: innerMap,
6767
collisionBehavior: collisionBehavior,
6868
});
6969
// [END maps_advanced_markers_collision_create_marker]
@@ -72,4 +72,4 @@ async function initMap(): Promise<void> {
7272
}
7373

7474
initMap();
75-
// [END maps_advanced_markers_collision]
75+
// [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: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,24 @@
55
*/
66

77
// [START maps_advanced_markers_draggable]
8+
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
9+
let innerMap;
10+
811
async function initMap() {
912
// Request needed libraries.
1013
const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
1114
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
1215

13-
const map = new Map(document.getElementById('map') as HTMLElement, {
14-
center: {lat: 37.39094933041195, lng: -122.02503913145092},
15-
zoom: 14,
16-
mapId: '4504f8b37365c3d0',
16+
innerMap = mapElement.innerMap;
17+
innerMap.setOptions({
18+
mapTypeControl: false,
1719
});
1820

1921
const infoWindow = new InfoWindow();
2022

2123
// [START maps_advanced_markers_draggable_marker]
2224
const draggableMarker = new AdvancedMarkerElement({
23-
map,
25+
map: innerMap,
2426
position: {lat: 37.39094933041195, lng: -122.02503913145092},
2527
gmpDraggable: true,
2628
title: "This marker is 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)