Skip to content

chore: automated output update (dist) #685

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willum070 merged 1 commit into from
Aug 5, 2025
Merged

chore: automated output update (dist) #685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 9 additions & 11 deletions dist/samples/place-autocomplete-basic-map/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
<!-- [START maps_place_autocomplete_basic_map] -->
<html>
<head>
<title>Place Autocomplete map</title>
<title>Basic Place Autocomplete map</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map-container">
<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details-compact>
<gmp-map zoom="14" map-id="DEMO_MAP_ID">
<gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
</div>
<div id="map-container"></div>
<gmp-basic-place-autocomplete
slot="control-inline-start-block-start"
></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-standard-content></gmp-place-standard-content>
</gmp-place-details-compact>

<!-- 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))})
Expand Down
125 changes: 84 additions & 41 deletions dist/samples/place-autocomplete-basic-map/app/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,107 @@
/*
/*
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_place_autocomplete_basic_map]

const placeAutocompleteElement = document.querySelector(
'gmp-basic-place-autocomplete',
) as any;
const placeDetailsElement = document.querySelector(
'gmp-place-details-compact',
) as any;
const placeDetailsParent = placeDetailsElement.parentElement as HTMLElement;
const mapDiv = document.getElementById('map-container') as HTMLElement;
const center: google.maps.LatLngLiteral = { lat: 40.749933, lng: -73.98633 }; // New York City

// [START maps_place_autocomplete_basic_map]
const mapContainer = document.getElementById("map-container") as any;
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete') as any;
const detailsElement = document.querySelector('gmp-place-details-compact') as any;
const mapElement = document.querySelector('gmp-map') as any;
const advancedMarkerElement = document.querySelector('gmp-advanced-marker') as any;

let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
// Asynchronously load required libraries from the Google Maps JS API.
await google.maps.importLibrary('places');
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as typeof google.maps.marker;
const { Map, InfoWindow } = await google.maps.importLibrary('maps') as any;

// Set the initial location bias for the autocomplete element.
placeAutocompleteElement.locationBias = center;

async function initMap(): Promise<void>{
//@ts-ignore
const {BasicPlaceAutocompleteElement, PlaceDetailsElement} = await google.maps.importLibrary('places');
//@ts-ignore
const {AdvancedMarkerElement} = await google.maps.importLibrary('marker');
//@ts-ignore
const {LatLngBounds} = await google.maps.importLibrary('core');

// Set the initial map location and autocomplete location bias
mapElement.center = center
autocompleteElement.locationBias = center;
// Create the map object with specified options.
const map: google.maps.Map = new Map(mapDiv, {
zoom: 12,
center: center,
mapId: 'DEMO_MAP_ID',
clickableIcons: false,
mapTypeControl: false,
streetViewControl: false,
});

// Get the underlying google.maps.Map object to add listeners
const map = mapElement.innerMap;
// Create an advanced marker to show the location of a selected place.
const advancedMarkerElement: google.maps.marker.AdvancedMarkerElement = new AdvancedMarkerElement({
map: map,
});

// Add the listener tochange locationBias to locationRestriction when the map moves
map.addListener('bounds_changed', () => {
autocompleteElement.locationBias = null;
autocompleteElement.locationRestriction = map.getBounds();
console.log("bias changed to restriction")
// Create an InfoWindow to hold the place details component.
const infoWindow: google.maps.InfoWindow = new InfoWindow({
minWidth: 360,
disableAutoPan: true,
closeButton: false,
headerDisabled: true,
pixelOffset: new google.maps.Size(0, -10),
});


// [START maps_place_autocomplete_basic_map_listener]
// Add the listener to update the Place Request element when the user selects a prediction
autocompleteElement.addEventListener('gmp-select', async (event) => {
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event: any) => {

// Reset marker and InfoWindow, and prepare the details element.
placeDetailsParent.appendChild(placeDetailsElement);
advancedMarkerElement.position = null;
infoWindow.close();

// Request details for the selected place.
const placeDetailsRequest = placeDetailsElement.querySelector(
'gmp-place-details-place-request',
) as any;
placeDetailsRequest.place = event.place.id;
});
// [END maps_place_autocomplete_basic_map_listener]

// Add the listener to update the marker when the Details element loads
detailsElement.addEventListener('gmp-load', async () => {
const location = detailsElement.place.location;
detailsElement.style.display = "block"
// Event listener for when the place details have finished loading.
placeDetailsElement.addEventListener('gmp-load', () => {
const location = placeDetailsElement.place.location as google.maps.LatLng;

// Position the marker and open the InfoWindow at the place's location.
advancedMarkerElement.position = location;
advancedMarkerElement.content = detailsElement;
if (detailsElement.place.viewport) {
map.fitBounds(detailsElement.place.viewport);
} else {
map.setCenter(location);
map.setZoom(17);
}
infoWindow.setContent(placeDetailsElement);
infoWindow.open({
map,
anchor: advancedMarkerElement,
});
map.setCenter(location);
placeDetailsElement.focus();
});

// Event listener to close the InfoWindow when the map is clicked.
map.addListener('click', (): void => {
infoWindow.close();
advancedMarkerElement.position = null;
});

// Event listener for when the map finishes moving (panning or zooming).
map.addListener('idle', (): void => {
const newCenter = map.getCenter() as google.maps.LatLng;

// Update the autocomplete's location bias to a 10km radius around the new map center.
placeAutocompleteElement.locationBias = new google.maps.Circle({
center: {
lat: newCenter.lat(),
lng: newCenter.lng(),
},
radius: 10000, // 10km in meters
});
});
}

initMap();
// [END maps_place_autocomplete_basic_map]

32 changes: 6 additions & 26 deletions dist/samples/place-autocomplete-basic-map/app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
/* [START maps_place_autocomplete_basic_map] */
/* [START maps_place_autocomplete_basic_map] */
html,
body {
height: 100%;
Expand All @@ -12,49 +12,29 @@ body {
}

#map-container {
display: flex;
flex-direction: row;
height: 100%;
}

#gmp-map {
height: 100%;
}

gmp-basic-place-autocomplete {
position: absolute;
height: 50px;
width: 500px;
top: 10px;
left: 10px;
z-index: 1;
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0. 2);
color-scheme: light;
border-radius: 10px;
}

gmp-place-details-compact {
width: 360px;
min-width: 300px;
max-height: 300px;
border: none;
padding: 0;
margin: 0;
position: absolute;
transform: translate(calc(-180px), calc(-215px));
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2);
background-color: #ffffff;
color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

/* [END maps_place_autocomplete_basic_map] */
5 changes: 0 additions & 5 deletions dist/samples/place-autocomplete-basic-map/dist/assets/index-BmNok-li.css
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions dist/samples/place-autocomplete-basic-map/dist/assets/index-D-6Qtdh_.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/**
* @license
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/html,body{height:100%;margin:0;padding:0}#map-container{height:100%}gmp-basic-place-autocomplete{position:absolute;height:50px;width:500px;top:10px;left:10px;z-index:1;box-shadow:2px 2px 5px rgba(0,0,0,0 2);color-scheme:light;border-radius:10px}gmp-place-details-compact{width:360px;min-width:300px;max-height:300px;border:none;background-color:#fff;color-scheme:light}
5 changes: 5 additions & 0 deletions dist/samples/place-autocomplete-basic-map/dist/assets/index-D16h0RvV.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 0 additions & 5 deletions dist/samples/place-autocomplete-basic-map/dist/assets/index-D9sGUCsY.js
View file
Open in desktop

This file was deleted.

24 changes: 11 additions & 13 deletions dist/samples/place-autocomplete-basic-map/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
<!-- [START maps_place_autocomplete_basic_map] -->
<html>
<head>
<title>Place Autocomplete map</title>
<title>Basic Place Autocomplete map</title>

<script type="module" crossorigin src="./assets/index-D9sGUCsY.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-BmNok-li.css">
<script type="module" crossorigin src="./assets/index-D16h0RvV.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-D-6Qtdh_.css">
</head>
<body>
<div id="map-container">
<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details-compact>
<gmp-map zoom="14" map-id="DEMO_MAP_ID">
<gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
</div>
<div id="map-container"></div>
<gmp-basic-place-autocomplete
slot="control-inline-start-block-start"
></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-standard-content></gmp-place-standard-content>
</gmp-place-details-compact>

<!-- 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))})
Expand Down
20 changes: 9 additions & 11 deletions dist/samples/place-autocomplete-basic-map/docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@
<!-- [START maps_place_autocomplete_basic_map] -->
<html>
<head>
<title>Place Autocomplete map</title>
<title>Basic Place Autocomplete map</title>

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map-container">
<gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-all-content></gmp-place-all-content>
</gmp-place-details-compact>
<gmp-map zoom="14" map-id="DEMO_MAP_ID">
<gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
</div>
<div id="map-container"></div>
<gmp-basic-place-autocomplete
slot="control-inline-start-block-start"
></gmp-basic-place-autocomplete>
<gmp-place-details-compact orientation="horizontal">
<gmp-place-details-place-request></gmp-place-details-place-request>
<gmp-place-standard-content></gmp-place-standard-content>
</gmp-place-details-compact>

<!-- 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))})
Expand Down
Loading