Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/samples/advanced-markers-animation/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

<!-- prettier-ignore -->
<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))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!-- [END maps_advanced_markers_animation] -->
11 changes: 7 additions & 4 deletions dist/samples/advanced-markers-animation/app/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
async function initMap(): Promise<void> {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

const position = {lat: 37.4242011827985, lng: -122.09242296450893};

Expand All @@ -59,7 +59,7 @@
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, 'idle', () => {
for (let i = 0; i < 100; i++) {
createMarker(map, AdvancedMarkerElement);
createMarker(map, AdvancedMarkerElement, PinElement);
}
});

Expand All @@ -77,12 +77,15 @@
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}

function createMarker(map, AdvancedMarkerElement) {
function createMarker(map, AdvancedMarkerElement, PinElement) {
const pinElement = new PinElement();
const content = pinElement.element;
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
content: content,
});
const content = advancedMarker.content as HTMLElement;

content.style.opacity = '0';
content.addEventListener('animationend', (event) => {
content.classList.remove('drop');
Expand Down
4 changes: 2 additions & 2 deletions dist/samples/advanced-markers-animation/dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<head>
<title>Advanced Markers CSS Animation</title>

<script type="module" crossorigin src="./assets/index-DkkvUFt8.js"></script>
<script type="module" crossorigin src="./assets/index-DnHAx5KX.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-0OEaV1k-.css">
</head>
<body>
Expand All @@ -19,7 +19,7 @@

<!-- prettier-ignore -->
<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))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!-- [END maps_advanced_markers_animation] -->
2 changes: 1 addition & 1 deletion dist/samples/advanced-markers-animation/docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

<!-- prettier-ignore -->
<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))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>
<!-- [END maps_advanced_markers_animation] -->
10 changes: 6 additions & 4 deletions dist/samples/advanced-markers-animation/docs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const intersectionObserver = new IntersectionObserver((entries) => {
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
const map = new Map(document.getElementById("map"), {
zoom: 14,
Expand All @@ -50,7 +50,7 @@ async function initMap() {
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, 'idle', () => {
for (let i = 0; i < 100; i++) {
createMarker(map, AdvancedMarkerElement);
createMarker(map, AdvancedMarkerElement, PinElement);
}
});
// Add a button to reset the example.
Expand All @@ -65,12 +65,14 @@ async function initMap() {
controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
function createMarker(map, AdvancedMarkerElement) {
function createMarker(map, AdvancedMarkerElement, PinElement) {
const pinElement = new PinElement();
const content = pinElement.element;
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
content: content,
});
const content = advancedMarker.content;
content.style.opacity = '0';
content.addEventListener('animationend', (event) => {
content.classList.remove('drop');
Expand Down
11 changes: 7 additions & 4 deletions dist/samples/advanced-markers-animation/docs/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
async function initMap(): Promise<void> {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

const position = {lat: 37.4242011827985, lng: -122.09242296450893};

Expand All @@ -59,7 +59,7 @@
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, 'idle', () => {
for (let i = 0; i < 100; i++) {
createMarker(map, AdvancedMarkerElement);
createMarker(map, AdvancedMarkerElement, PinElement);
}
});

Expand All @@ -77,12 +77,15 @@
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}

function createMarker(map, AdvancedMarkerElement) {
function createMarker(map, AdvancedMarkerElement, PinElement) {
const pinElement = new PinElement();
const content = pinElement.element;
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
content: content,
});
const content = advancedMarker.content as HTMLElement;

content.style.opacity = '0';
content.addEventListener('animationend', (event) => {
content.classList.remove('drop');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

<!-- prettier-ignore -->
<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))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
</body>
</html>

10 changes: 6 additions & 4 deletions dist/samples/advanced-markers-animation/jsfiddle/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const intersectionObserver = new IntersectionObserver((entries) => {
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const position = { lat: 37.4242011827985, lng: -122.09242296450893 };
const map = new Map(document.getElementById("map"), {
zoom: 14,
Expand All @@ -50,7 +50,7 @@ async function initMap() {
// Create 100 markers to animate.
google.maps.event.addListenerOnce(map, 'idle', () => {
for (let i = 0; i < 100; i++) {
createMarker(map, AdvancedMarkerElement);
createMarker(map, AdvancedMarkerElement, PinElement);
}
});
// Add a button to reset the example.
Expand All @@ -65,12 +65,14 @@ async function initMap() {
controlDiv.appendChild(controlUI);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
}
function createMarker(map, AdvancedMarkerElement) {
function createMarker(map, AdvancedMarkerElement, PinElement) {
const pinElement = new PinElement();
const content = pinElement.element;
const advancedMarker = new AdvancedMarkerElement({
position: getRandomPosition(map),
map: map,
content: content,
});
const content = advancedMarker.content;
content.style.opacity = '0';
content.addEventListener('animationend', (event) => {
content.classList.remove('drop');
Expand Down