Skip to content

Commit 87f407d

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder (#236)
Co-authored-by: googlemaps-bot <[email protected]>
1 parent bbf83e7 commit 87f407d

File tree

17 files changed

+867
-0
lines changed

17 files changed

+867
-0
lines changed

‎dist/samples/advanced-markers-animation/app/.eslintsrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"extends": [
3+
"plugin:@typescript-eslint/recommended"
4+
],
5+
"parser": "@typescript-eslint/parser",
6+
"rules": {
7+
"@typescript-eslint/ban-ts-comment": 0,
8+
"@typescript-eslint/no-this-alias": 1,
9+
"@typescript-eslint/no-empty-function": 1,
10+
"@typescript-eslint/explicit-module-boundary-types": 1,
11+
"@typescript-eslint/no-unused-vars": 1
12+
}
13+
}

‎dist/samples/advanced-markers-animation/app/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Google Maps JavaScript Sample
2+
3+
This sample is generated from @googlemaps/js-samples located at
4+
https://github.com/googlemaps-samples/js-api-samples.
5+
6+
## Setup
7+
8+
### Before starting run:
9+
10+
`npm i`
11+
12+
### Run an example on a local web server
13+
14+
First `cd` to the folder for the sample to run, then:
15+
16+
`npm start`
17+
18+
### Build an individual example
19+
20+
From `samples/`:
21+
22+
`npm run build --workspace=sample-name/`
23+
24+
### Build all of the examples.
25+
26+
From `samples/`:
27+
28+
`npm run build-all`
29+
30+
## Feedback
31+
32+
For feedback related to this sample, please open a new issue on
33+
[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues).

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_advanced_markers_animation] -->
8+
<html>
9+
<head>
10+
<title>Advanced Markers CSS Animation</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
</head>
15+
<body>
16+
<div id="mapContainer">
17+
<div id="map" style="height: 100%"></div>
18+
</div>
19+
20+
<!-- prettier-ignore -->
21+
<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))})
22+
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
23+
</body>
24+
</html>
25+
<!-- [END maps_advanced_markers_animation] -->

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
// [START maps_advanced_markers_animation]
8+
/**
9+
* Returns a random lat lng position within the map bounds.
10+
* @param {!google.maps.Map} map
11+
* @return {!google.maps.LatLngLiteral}
12+
*/
13+
function getRandomPosition(map) {
14+
const bounds = map.getBounds();
15+
const minLat = bounds.getSouthWest().lat();
16+
const minLng = bounds.getSouthWest().lng();
17+
const maxLat = bounds.getNorthEast().lat();
18+
const maxLng = bounds.getNorthEast().lng();
19+
20+
const latRange = maxLat - minLat;
21+
22+
// Note: longitude can span from a positive longitude in the west to a
23+
// negative one in the east. e.g. 150lng (150E) <-> -30lng (30W) is a large
24+
// span that covers the whole USA.
25+
let lngRange = maxLng - minLng;
26+
if (maxLng < minLng) {
27+
lngRange += 360;
28+
}
29+
30+
return {
31+
lat: minLat + Math.random() * latRange,
32+
lng: minLng + Math.random() * lngRange,
33+
};
34+
}
35+
36+
const total = 100;
37+
const intersectionObserver = new IntersectionObserver((entries) => {
38+
for (const entry of entries) {
39+
if (entry.isIntersecting) {
40+
entry.target.classList.add('drop');
41+
intersectionObserver.unobserve(entry.target);
42+
}
43+
}
44+
});
45+
46+
async function initMap(): Promise<void> {
47+
// Request needed libraries.
48+
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
49+
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
50+
51+
const position = {lat: 37.4242011827985, lng: -122.09242296450893};
52+
53+
const map = new Map(document.getElementById("map") as HTMLElement, {
54+
zoom: 14,
55+
center: position,
56+
mapId: '4504f8b37365c3d0',
57+
});
58+
59+
// Create 100 markers to animate.
60+
google.maps.event.addListenerOnce(map, 'idle', () => {
61+
for (let i = 0; i < 100; i++) {
62+
createMarker(map, AdvancedMarkerElement);
63+
}
64+
});
65+
66+
// Add a button to reset the example.
67+
const controlDiv = document.createElement("div");
68+
const controlUI = document.createElement("button");
69+
70+
controlUI.classList.add("ui-button");
71+
controlUI.innerText = "Reset the example";
72+
controlUI.addEventListener("click", () => {
73+
// Reset the example by reloading the map iframe.
74+
refreshMap();
75+
});
76+
controlDiv.appendChild(controlUI);
77+
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
78+
}
79+
80+
function createMarker(map, AdvancedMarkerElement) {
81+
const advancedMarker = new AdvancedMarkerElement({
82+
position: getRandomPosition(map),
83+
map: map,
84+
});
85+
const content = advancedMarker.content as HTMLElement;
86+
content.style.opacity = '0';
87+
content.addEventListener('animationend', (event) => {
88+
content.classList.remove('drop');
89+
content.style.opacity = '1';
90+
});
91+
const time = 2 + Math.random(); // 2s delay for easy to see the animation
92+
content.style.setProperty('--delay-time', time +'s');
93+
intersectionObserver.observe(content);
94+
}
95+
96+
function refreshMap() {
97+
// Refresh the map.
98+
const mapContainer = document.getElementById('mapContainer');
99+
const map = document.getElementById('map');
100+
map!.remove();
101+
const mapDiv = document.createElement('div');
102+
mapDiv.id = 'map';
103+
mapContainer!.appendChild(mapDiv);
104+
initMap();
105+
}
106+
107+
initMap();
108+
// [END maps_advanced_markers_animation]
109+
export { };

‎dist/samples/advanced-markers-animation/app/package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "@js-api-samples/advanced-markers-animation",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "tsc && bash ../jsfiddle.sh advanced-markers-animation && bash ../app.sh advanced-markers-animation && bash ../docs.sh advanced-markers-animation && npm run build:vite --workspace=. && bash ../dist.sh advanced-markers-animation",
6+
"test": "tsc && npm run build:vite --workspace=.",
7+
"start": "tsc && vite build --base './' && vite",
8+
"build:vite": "vite build --base './'",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
13+
}
14+
}

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_advanced_markers_animation] */
7+
/*
8+
* Always set the map height explicitly to define the size of the div element
9+
* that contains the map.
10+
*/
11+
#map {
12+
height: 100%;
13+
}
14+
15+
/*
16+
* Optional: Makes the sample page fill the window.
17+
*/
18+
html,
19+
body {
20+
height: 100%;
21+
margin: 0;
22+
padding: 0;
23+
}
24+
25+
/* set the default transition time */
26+
:root {
27+
--delay-time: .5s;
28+
}
29+
30+
#map {
31+
height: 100%;
32+
}
33+
34+
#mapContainer {
35+
height: 100%;
36+
}
37+
38+
html,
39+
body {
40+
height: 100%;
41+
margin: 0;
42+
padding: 0;
43+
}
44+
45+
@keyframes drop {
46+
0% {
47+
transform: translateY(-200px) scaleY(0.9);
48+
opacity: 0;
49+
}
50+
5% {
51+
opacity: 0.7;
52+
}
53+
50% {
54+
transform: translateY(0px) scaleY(1);
55+
opacity: 1;
56+
}
57+
65% {
58+
transform: translateY(-17px) scaleY(0.9);
59+
opacity: 1;
60+
}
61+
75% {
62+
transform: translateY(-22px) scaleY(0.9);
63+
opacity: 1;
64+
}
65+
100% {
66+
transform: translateY(0px) scaleY(1);
67+
opacity: 1;
68+
}
69+
}
70+
.drop {
71+
animation: drop 0.3s linear forwards var(--delay-time);
72+
}
73+
74+
.ui-button {
75+
background-color: #fff;
76+
border: 0;
77+
border-radius: 2px;
78+
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
79+
margin: 10px;
80+
padding: 0 0.5em;
81+
font: 400 18px Roboto, Arial, sans-serif;
82+
overflow: hidden;
83+
height: 40px;
84+
cursor: pointer;
85+
}
86+
87+
.ui-button:hover {
88+
background: rgb(235, 235, 235);
89+
}
90+
91+
/* [END maps_advanced_markers_animation] */

‎dist/samples/advanced-markers-animation/app/tsconfig.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"target": "esnext",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"lib": [
8+
"es2015",
9+
"esnext",
10+
"es6",
11+
"dom",
12+
"dom.iterable"
13+
],
14+
"moduleResolution": "Node",
15+
"jsx": "preserve"
16+
}
17+
}

‎dist/samples/advanced-markers-animation/dist/assets/index-0OEaV1k-.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/samples/advanced-markers-animation/dist/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_advanced_markers_animation] -->
8+
<html>
9+
<head>
10+
<title>Advanced Markers CSS Animation</title>
11+
12+
<script type="module" crossorigin src="./assets/index-DkkvUFt8.js"></script>
13+
<link rel="stylesheet" crossorigin href="./assets/index-0OEaV1k-.css">
14+
</head>
15+
<body>
16+
<div id="mapContainer">
17+
<div id="map" style="height: 100%"></div>
18+
</div>
19+
20+
<!-- prettier-ignore -->
21+
<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))})
22+
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
23+
</body>
24+
</html>
25+
<!-- [END maps_advanced_markers_animation] -->

‎dist/samples/advanced-markers-animation/docs/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<!--
3+
@license
4+
Copyright 2019 Google LLC. All Rights Reserved.
5+
SPDX-License-Identifier: Apache-2.0
6+
-->
7+
<!-- [START maps_advanced_markers_animation] -->
8+
<html>
9+
<head>
10+
<title>Advanced Markers CSS Animation</title>
11+
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
14+
</head>
15+
<body>
16+
<div id="mapContainer">
17+
<div id="map" style="height: 100%"></div>
18+
</div>
19+
20+
<!-- prettier-ignore -->
21+
<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))})
22+
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
23+
</body>
24+
</html>
25+
<!-- [END maps_advanced_markers_animation] -->

0 commit comments

Comments
 (0)