Skip to content

Commit 017068f

Browse files
willum070willum070
authored
fix: Updates search demos to the current pattern. (#447)
* fix: Updates search demos to the current pattern. * fix: Update index.ts Adds the original event handler code back. * Update index.ts Some minor tweaks: * Removes query selector for `marker`, as it is not needed. * Removes log line from PDE gmp-load event listener. * Update index.ts Moved marker declaration to initMap since it doesn't need to be global. * Update index.ts Adds region tag to marker event handler.
1 parent 3316a10 commit 017068f

File tree

2 files changed

+35
-24
lines changed

2 files changed

+35
-24
lines changed

‎samples/ui-kit-place-search-nearby/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@
3232
</div>
3333
</gmp-map>
3434

35-
<gmp-place-details size="large"></gmp-place-details>
35+
<gmp-place-details size="large" style="display: none;">
36+
<gmp-place-details-place-request></gmp-place-details-place-request>
37+
<gmp-place-all-content></gmp-place-all-content>
38+
</gmp-place-details>
3639

3740
<!--[END maps_ui_kit_place_search_nearby_map] -->
3841
<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))})

‎samples/ui-kit-place-search-nearby/index.ts‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,33 @@
44
* SPDX-License-Identifier: Apache-2.0
55
*/
66
/* [START maps_ui_kit_place_search_nearby] */
7+
78
/* [START maps_ui_kit_place_search_nearby_query_selectors] */
89
const map = document.querySelector("gmp-map") as any;
910
const placeList = document.querySelector("gmp-place-list") as any;
1011
const typeSelect = document.querySelector(".type-select") as any;
1112
const placeDetails = document.querySelector("gmp-place-details") as any;
12-
let marker = document.querySelector('gmp-advanced-marker') as any;
13+
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request') as any;
1314
/* [END maps_ui_kit_place_search_nearby_query_selectors] */
1415
let markers = {};
1516
let infoWindow;
16-
let mapCenter;
1717

1818
async function initMap(): Promise<void> {
19-
await google.maps.importLibrary("places");
20-
const { InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
21-
const { spherical } = await google.maps.importLibrary("geometry") as google.maps.GeometryLibrary;
19+
await google.maps.importLibrary('places');
20+
const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
21+
const { InfoWindow } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
22+
const { spherical } = await google.maps.importLibrary('geometry') as google.maps.GeometryLibrary;
2223

23-
infoWindow = new google.maps.InfoWindow;
24+
infoWindow = new InfoWindow;
25+
let marker;
2426

2527
function getContainingCircle(bounds) {
2628
const diameter = spherical.computeDistanceBetween(
2729
bounds.getNorthEast(),
2830
bounds.getSouthWest()
2931
);
3032
const calculatedRadius = diameter / 2;
31-
const cappedRadius = Math.min(calculatedRadius, 50000); // Cap the radius to avoid an error.
33+
const cappedRadius = Math.min(calculatedRadius, 50000); // Radius cannot be more than 50000.
3234
return { center: bounds.getCenter(), radius: cappedRadius };
3335
}
3436

@@ -40,23 +42,28 @@ async function initMap(): Promise<void> {
4042
});
4143

4244
/* [START maps_ui_kit_place_search_nearby_event] */
43-
typeSelect.addEventListener("change", (event) => {
45+
placeDetails.addEventListener('gmp-load', (event) => {
46+
// Center the info window on the map.
47+
map.innerMap.fitBounds(placeDetails.place.viewport, { top: 500, left: 400 });
48+
});
49+
50+
typeSelect.addEventListener('change', (event) => {
4451
// First remove all existing markers.
4552
for(marker in markers){
4653
markers[marker].map = null;
4754
}
4855
markers = {};
4956

5057
if (typeSelect.value) {
51-
placeList.style.display = "block";
58+
placeList.style.display = 'block';
5259
placeList.configureFromSearchNearbyRequest({
5360
locationRestriction: getContainingCircle(
5461
map.innerMap.getBounds()
5562
),
5663
includedPrimaryTypes: [typeSelect.value],
5764
}).then(addMarkers);
5865
// Handle user selection in Place Details.
59-
placeList.addEventListener("gmp-placeselect", ({ place }) => {
66+
placeList.addEventListener('gmp-placeselect', ({ place }) => {
6067
markers[place.id].click();
6168
});
6269
}
@@ -65,8 +72,8 @@ async function initMap(): Promise<void> {
6572
}
6673

6774
async function addMarkers(){
68-
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
69-
const { LatLngBounds } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
75+
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;
76+
const { LatLngBounds } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
7077

7178
const bounds = new LatLngBounds();
7279

@@ -80,32 +87,33 @@ async function addMarkers(){
8087
markers[place.id] = marker;
8188
bounds.extend(place.location);
8289

83-
marker.addListener('gmp-click',(event) => {
90+
/* [START maps_ui_kit_place_search_nearby_click_event] */
91+
marker.addListener('gmp-click', (event) => {
8492
if(infoWindow.isOpen){
8593
infoWindow.close();
8694
}
87-
placeDetails.configureFromPlace(place);
88-
placeDetails.style.width = "350px";
95+
96+
placeDetailsRequest.place = place.id;
97+
placeDetails.style.display = 'block';
98+
placeDetails.style.width = '350px';
8999
infoWindow.setOptions({
90-
content: placeDetails
100+
content: placeDetails,
91101
});
92102
infoWindow.open({
93103
anchor: marker,
94104
map: map.innerMap
95105
});
96-
placeDetails.addEventListener('gmp-load',() => {
97-
map.innerMap.fitBounds(place.viewport, { top: 500, left: 400 });
98-
});
99-
100106
});
107+
/* [END maps_ui_kit_place_search_nearby_click_event] */
108+
101109
map.innerMap.setCenter(bounds.getCenter());
102110
map.innerMap.fitBounds(bounds);
103111
});
104112
}
105113
}
106114

107115
async function findCurrentLocation(){
108-
const { LatLng } = await google.maps.importLibrary("core") as google.maps.CoreLibrary;
116+
const { LatLng } = await google.maps.importLibrary('core') as google.maps.CoreLibrary;
109117
if (navigator.geolocation) {
110118
navigator.geolocation.getCurrentPosition(
111119
(position) => {
@@ -119,11 +127,11 @@ async function findCurrentLocation(){
119127
},
120128
);
121129
} else {
122-
console.log("Your browser doesn't support geolocation");
130+
console.log('Your browser doesn\'t support geolocation');
123131
map.innerMap.setZoom(14);
124132
}
125133

126134
}
127135

128136
initMap();
129-
/* [END maps_ui_kit_place_search_nearby] */
137+
/* [END maps_ui_kit_place_search_nearby] */

0 commit comments

Comments
 (0)