Skip to content

Commit bdd0d9d

Browse files
googlemaps-botgooglemaps-bot
authored
Update dist folder [skip ci] (#611)
1 parent c50566c commit bdd0d9d

File tree

9 files changed

+596
-7
lines changed

9 files changed

+596
-7
lines changed

‎dist/samples/ui-kit-place-search-text-compact/app/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<head>
1010
<title>Places UI Kit: Place (text) search with Place Details Compact</title>
1111
<meta charset="utf-8">
12-
<link rel="stylesheet" type="text/css" href="style.css">
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
1314
</head>
1415
<body>
1516
<div id="map-container"></div>
@@ -38,7 +39,6 @@
3839
v: "alpha"
3940
});
4041
</script>
41-
<script type="text/JavaScript" src="app.js"></script>
4242
</body>
4343
</html>
4444
<!--[END maps_ui_kit_place_search_text_compact] -->

‎dist/samples/ui-kit-place-search-text-compact/app/index.ts‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
/* [START maps_ui_kit_place_search_text_compact] */
7+
const mapContainer = document.getElementById("map-container") as any;
8+
const placeSearch = document.querySelector("gmp-place-search") as any;
9+
const placeSearchQuery = document.querySelector("gmp-place-text-search-request") as any;
10+
const queryInput = document.querySelector(".query-input") as any;
11+
const searchButton = document.querySelector(".search-button") as any;
12+
const detailsContainer = document.getElementById("details-container") as any;
13+
const placeDetails = document.querySelector("gmp-place-details-compact") as any;
14+
const placeRequest = document.querySelector("gmp-place-details-place-request") as any;
15+
const warningMsg = document.querySelector(".warning") as any;
16+
let markers = {};
17+
let previousSearchQuery = '';
18+
let gMap;
19+
let placeDetailsPopup;
20+
21+
let AdvancedMarkerElement;
22+
let LatLngBounds;
23+
let LatLng;
24+
25+
async function init() {
26+
//@ts-ignore
27+
const {Map} = await google.maps.importLibrary("maps");
28+
await google.maps.importLibrary("places");
29+
//@ts-ignore
30+
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
31+
//@ts-ignore
32+
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));
33+
34+
let mapOptions = {
35+
center: {lat: 37.422, lng: -122.085},
36+
zoom: 2,
37+
mapTypeControl: false,
38+
clickableIcons: false,
39+
mapId: '2439f449ff38ce55'
40+
};
41+
42+
gMap = new Map(mapContainer, mapOptions);
43+
44+
placeDetailsPopup = new AdvancedMarkerElement({
45+
map: null,
46+
content: placeDetails,
47+
zIndex: 100
48+
});
49+
50+
findCurrentLocation();
51+
52+
gMap.addListener('click', (e) => {
53+
hidePlaceDetailsPopup();
54+
});
55+
56+
searchButton.addEventListener("click", searchPlaces);
57+
queryInput.addEventListener("keydown", (event) => {
58+
if (event.key == 'Enter') {
59+
event.preventDefault();
60+
searchPlaces();
61+
}
62+
});
63+
64+
placeSearch.addEventListener("gmp-select", ({ place }) => {
65+
if (markers[place.id]) {
66+
markers[place.id].click();
67+
}
68+
});
69+
}
70+
71+
function searchPlaces(){
72+
if (queryInput.value.trim() === previousSearchQuery) {
73+
return;
74+
}
75+
previousSearchQuery = queryInput.value.trim();
76+
warningMsg.style.display = 'none';
77+
placeDetailsPopup.map = null;
78+
79+
for(const markerId in markers){
80+
if (Object.prototype.hasOwnProperty.call(markers, markerId)) {
81+
markers[markerId].map = null;
82+
}
83+
}
84+
markers = {};
85+
if (queryInput.value) {
86+
mapContainer.style.height = '75vh';
87+
placeSearch.style.display = 'block';
88+
placeSearchQuery.textQuery = queryInput.value;
89+
placeSearchQuery.locationBias = gMap.getBounds();
90+
placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
91+
}
92+
}
93+
94+
async function addMarkers(){
95+
const bounds = new LatLngBounds();
96+
97+
if(placeSearch.places.length > 0){
98+
placeSearch.places.forEach((place) => {
99+
let marker = new AdvancedMarkerElement({
100+
map: gMap,
101+
position: place.location
102+
});
103+
104+
marker.metadata = {id: place.id};
105+
markers[place.id] = marker;
106+
bounds.extend(place.location);
107+
108+
marker.addListener('click',(event) => {
109+
placeRequest.place = place;
110+
placeDetails.style.display = 'block';
111+
112+
placeDetailsPopup.position = place.location;
113+
placeDetailsPopup.map = gMap;
114+
115+
gMap.fitBounds(place.viewport, {top: 200, left: 100});
116+
117+
});
118+
gMap.setCenter(bounds.getCenter());
119+
gMap.fitBounds(bounds);
120+
});
121+
} else {
122+
warningMsg.style.display = "block";
123+
}
124+
}
125+
126+
async function findCurrentLocation(){
127+
//@ts-ignore
128+
const { LatLng } = await google.maps.importLibrary("core");
129+
if (navigator.geolocation) {
130+
navigator.geolocation.getCurrentPosition(
131+
(position) => {
132+
const pos = new LatLng(position.coords.latitude,position.coords.longitude);
133+
gMap.panTo(pos);
134+
gMap.setZoom(16);
135+
},
136+
() => {
137+
console.log('The Geolocation service failed.');
138+
gMap.setZoom(16);
139+
//@ts-ignore
140+
},
141+
);
142+
} else {
143+
console.log("Your browser doesn't support geolocation");
144+
gMap.setZoom(16);
145+
}
146+
147+
}
148+
149+
function hidePlaceDetailsPopup() {
150+
if (placeDetailsPopup.map) {
151+
placeDetailsPopup.map = null;
152+
placeDetails.style.display = 'none';
153+
}
154+
}
155+
156+
init();
157+
/* [END maps_ui_kit_place_search_text_compact] */

‎dist/samples/ui-kit-place-search-text-compact/dist/assets/index-DEw-iLjO.js‎

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/ui-kit-place-search-text-compact/dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<head>
1010
<title>Places UI Kit: Place (text) search with Place Details Compact</title>
1111
<meta charset="utf-8">
12+
<script type="module" crossorigin src="./assets/index-DEw-iLjO.js"></script>
1213
<link rel="stylesheet" crossorigin href="./assets/index-xPIYwYQR.css">
1314
</head>
1415
<body>
@@ -38,7 +39,6 @@
3839
v: "alpha"
3940
});
4041
</script>
41-
<script type="text/JavaScript" src="app.js"></script>
4242
</body>
4343
</html>
4444
<!--[END maps_ui_kit_place_search_text_compact] -->

‎dist/samples/ui-kit-place-search-text-compact/docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
<head>
1010
<title>Places UI Kit: Place (text) search with Place Details Compact</title>
1111
<meta charset="utf-8">
12-
<link rel="stylesheet" type="text/css" href="style.css">
12+
<link rel="stylesheet" type="text/css" href="./style.css" />
13+
<script type="module" src="./index.js"></script>
1314
</head>
1415
<body>
1516
<div id="map-container"></div>
@@ -38,7 +39,6 @@
3839
v: "alpha"
3940
});
4041
</script>
41-
<script type="text/JavaScript" src="app.js"></script>
4242
</body>
4343
</html>
4444
<!--[END maps_ui_kit_place_search_text_compact] -->

‎dist/samples/ui-kit-place-search-text-compact/docs/index.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
"use strict";
2+
/*
3+
* @license
4+
* Copyright 2025 Google LLC. All Rights Reserved.
5+
* SPDX-License-Identifier: Apache-2.0
6+
*/
7+
/* [START maps_ui_kit_place_search_text_compact] */
8+
const mapContainer = document.getElementById("map-container");
9+
const placeSearch = document.querySelector("gmp-place-search");
10+
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
11+
const queryInput = document.querySelector(".query-input");
12+
const searchButton = document.querySelector(".search-button");
13+
const detailsContainer = document.getElementById("details-container");
14+
const placeDetails = document.querySelector("gmp-place-details-compact");
15+
const placeRequest = document.querySelector("gmp-place-details-place-request");
16+
const warningMsg = document.querySelector(".warning");
17+
let markers = {};
18+
let previousSearchQuery = '';
19+
let gMap;
20+
let placeDetailsPopup;
21+
let AdvancedMarkerElement;
22+
let LatLngBounds;
23+
let LatLng;
24+
async function init() {
25+
//@ts-ignore
26+
const { Map } = await google.maps.importLibrary("maps");
27+
await google.maps.importLibrary("places");
28+
//@ts-ignore
29+
({ AdvancedMarkerElement } = await google.maps.importLibrary("marker"));
30+
//@ts-ignore
31+
({ LatLngBounds, LatLng } = await google.maps.importLibrary("core"));
32+
let mapOptions = {
33+
center: { lat: 37.422, lng: -122.085 },
34+
zoom: 2,
35+
mapTypeControl: false,
36+
clickableIcons: false,
37+
mapId: '2439f449ff38ce55'
38+
};
39+
gMap = new Map(mapContainer, mapOptions);
40+
placeDetailsPopup = new AdvancedMarkerElement({
41+
map: null,
42+
content: placeDetails,
43+
zIndex: 100
44+
});
45+
findCurrentLocation();
46+
gMap.addListener('click', (e) => {
47+
hidePlaceDetailsPopup();
48+
});
49+
searchButton.addEventListener("click", searchPlaces);
50+
queryInput.addEventListener("keydown", (event) => {
51+
if (event.key == 'Enter') {
52+
event.preventDefault();
53+
searchPlaces();
54+
}
55+
});
56+
placeSearch.addEventListener("gmp-select", ({ place }) => {
57+
if (markers[place.id]) {
58+
markers[place.id].click();
59+
}
60+
});
61+
}
62+
function searchPlaces() {
63+
if (queryInput.value.trim() === previousSearchQuery) {
64+
return;
65+
}
66+
previousSearchQuery = queryInput.value.trim();
67+
warningMsg.style.display = 'none';
68+
placeDetailsPopup.map = null;
69+
for (const markerId in markers) {
70+
if (Object.prototype.hasOwnProperty.call(markers, markerId)) {
71+
markers[markerId].map = null;
72+
}
73+
}
74+
markers = {};
75+
if (queryInput.value) {
76+
mapContainer.style.height = '75vh';
77+
placeSearch.style.display = 'block';
78+
placeSearchQuery.textQuery = queryInput.value;
79+
placeSearchQuery.locationBias = gMap.getBounds();
80+
placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
81+
}
82+
}
83+
async function addMarkers() {
84+
const bounds = new LatLngBounds();
85+
if (placeSearch.places.length > 0) {
86+
placeSearch.places.forEach((place) => {
87+
let marker = new AdvancedMarkerElement({
88+
map: gMap,
89+
position: place.location
90+
});
91+
marker.metadata = { id: place.id };
92+
markers[place.id] = marker;
93+
bounds.extend(place.location);
94+
marker.addListener('click', (event) => {
95+
placeRequest.place = place;
96+
placeDetails.style.display = 'block';
97+
placeDetailsPopup.position = place.location;
98+
placeDetailsPopup.map = gMap;
99+
gMap.fitBounds(place.viewport, { top: 200, left: 100 });
100+
});
101+
gMap.setCenter(bounds.getCenter());
102+
gMap.fitBounds(bounds);
103+
});
104+
}
105+
else {
106+
warningMsg.style.display = "block";
107+
}
108+
}
109+
async function findCurrentLocation() {
110+
//@ts-ignore
111+
const { LatLng } = await google.maps.importLibrary("core");
112+
if (navigator.geolocation) {
113+
navigator.geolocation.getCurrentPosition((position) => {
114+
const pos = new LatLng(position.coords.latitude, position.coords.longitude);
115+
gMap.panTo(pos);
116+
gMap.setZoom(16);
117+
}, () => {
118+
console.log('The Geolocation service failed.');
119+
gMap.setZoom(16);
120+
//@ts-ignore
121+
});
122+
}
123+
else {
124+
console.log("Your browser doesn't support geolocation");
125+
gMap.setZoom(16);
126+
}
127+
}
128+
function hidePlaceDetailsPopup() {
129+
if (placeDetailsPopup.map) {
130+
placeDetailsPopup.map = null;
131+
placeDetails.style.display = 'none';
132+
}
133+
}
134+
init();
135+
/* [END maps_ui_kit_place_search_text_compact] */

0 commit comments

Comments
 (0)