Skip to content

Commit 710f113

Browse files
ejhaseldenejhaselden
committed
addressed comments for style and a11y
1 parent d6a13df commit 710f113

File tree

3 files changed

+62
-65
lines changed

3 files changed

+62
-65
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@
1414
<!-- prettier-ignore -->
1515
<script>
1616
(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))})
17-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_mcp_codeassist_v0.1_github"});
17+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
1818
</script>
1919
</head>
2020
<body>
2121
<!--[START maps_ui_kit_place_search_nearby_map] -->
22+
2223
<div class="container">
24+
<!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
2325
<gmp-map
2426
center="-37.813,144.963"
2527
zoom="16"
@@ -68,11 +70,10 @@
6870
</label>
6971
</div>
7072
<div class="list-container">
71-
<gmp-place-search orientation="vertical" selectable>
73+
<gmp-place-search selectable>
7274
<gmp-place-all-content></gmp-place-all-content>
7375
<gmp-place-nearby-search-request
74-
location-restriction="[email protected], 144.963">
75-
</gmp-place-nearby-search-request>
76+
max-result-count="5"></gmp-place-nearby-search-request>
7677
</gmp-place-search>
7778
</div>
7879
</div>

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

Lines changed: 56 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,22 @@
77

88
/* [START maps_ui_kit_place_search_nearby_query_selectors] */
99
// Query selectors for various elements in the HTML file.
10-
const map = document.querySelector('gmp-map') as google.maps.MapElement
11-
const placeSearch = document.querySelector('gmp-place-search') as any
10+
const map = document.querySelector('gmp-map') as google.maps.MapElement;
11+
const placeSearch = document.querySelector('gmp-place-search') as any;
1212
const placeSearchQuery = document.querySelector(
1313
'gmp-place-nearby-search-request'
14-
) as any
15-
const placeDetails = document.querySelector('gmp-place-details-compact') as any
14+
) as any;
15+
const placeDetails = document.querySelector('gmp-place-details-compact') as any;
1616
const placeRequest = document.querySelector(
1717
'gmp-place-details-place-request'
18-
) as any
19-
const typeSelect = document.querySelector('.type-select') as HTMLSelectElement
18+
) as any;
19+
const typeSelect = document.querySelector('.type-select') as HTMLSelectElement;
2020
/* [END maps_ui_kit_place_search_nearby_query_selectors] */
2121

2222
// Global variables for the map, markers, and info window.
23-
const markers: Map<string, google.maps.marker.AdvancedMarkerElement> = new Map()
24-
let infoWindow: google.maps.InfoWindow
25-
let AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement
26-
let LatLngBounds: typeof google.maps.LatLngBounds
23+
const markers: Map<string, google.maps.marker.AdvancedMarkerElement> =
24+
new Map();
25+
let infoWindow: google.maps.InfoWindow;
2726

2827
// The init function is called when the page loads.
2928
async function init(): Promise<void> {
@@ -37,106 +36,103 @@ async function init(): Promise<void> {
3736
'marker'
3837
) as Promise<google.maps.MarkerLibrary>,
3938
google.maps.importLibrary('core') as Promise<google.maps.CoreLibrary>,
40-
])
39+
]);
4140

42-
AdvancedMarkerElement = markerLib.AdvancedMarkerElement
43-
LatLngBounds = coreLib.LatLngBounds
41+
const AdvancedMarkerElement = markerLib.AdvancedMarkerElement;
42+
43+
const LatLngBounds = coreLib.LatLngBounds;
4444

4545
// Create a new info window and set its content to the place details element.
4646
infoWindow = new InfoWindow({
4747
content: placeDetails,
4848
ariaLabel: 'Place Details',
49-
headerDisabled: true,
50-
pixelOffset: new google.maps.Size(0, -40),
51-
})
49+
});
5250

5351
// Set the map options.
5452
map.innerMap.setOptions({
5553
clickableIcons: false,
5654
mapTypeControl: false,
5755
streetViewControl: false,
58-
})
56+
});
5957

6058
// Add a click listener to the map to hide the info window when the map is clicked.
61-
map.innerMap.addListener('click', () => infoWindow.close())
59+
map.innerMap.addListener('click', () => infoWindow.close());
6260
/* [START maps_ui_kit_place_search_nearby_event] */
6361
// Add event listeners to the type select and place search elements.
64-
typeSelect.addEventListener('change', searchPlaces)
62+
typeSelect.addEventListener('change', () =>
63+
searchPlaces(AdvancedMarkerElement, LatLngBounds)
64+
);
6565

6666
placeSearch.addEventListener('gmp-select', (event: Event) => {
67-
const { place } = event as any
68-
if (markers.has(place.id)) {
69-
markers.get(place.id)!.click()
70-
}
67+
const { place } = event as any;
68+
markers.get(place.id)?.click();
7169
if (place.location) {
72-
map.innerMap.setCenter(place.location)
70+
map.innerMap.setCenter(place.location);
7371
}
74-
})
75-
placeSearch.addEventListener(
76-
'gmp-load',
77-
() => {
78-
searchPlaces()
79-
},
80-
{ once: true }
81-
)
72+
});
73+
placeSearch.addEventListener('gmp-load', () => {
74+
searchPlaces(AdvancedMarkerElement, LatLngBounds);
75+
addMarkers(AdvancedMarkerElement, LatLngBounds);
76+
});
8277
}
8378
/* [END maps_ui_kit_place_search_nearby_event] */
8479
// The searchPlaces function is called when the user changes the type select or when the page loads.
85-
function searchPlaces() {
80+
function searchPlaces(
81+
AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement,
82+
LatLngBounds: typeof google.maps.LatLngBounds
83+
) {
8684
// Close the info window and clear the markers.
87-
infoWindow.close()
85+
infoWindow.close();
8886
for (const marker of markers.values()) {
89-
marker.map = null
87+
marker.remove();
9088
}
91-
markers.clear()
89+
markers.clear();
9290

9391
// Set the place search query and add an event listener to the place search element.
9492
if (typeSelect.value) {
95-
const center = map.innerMap.getCenter()!
96-
placeSearchQuery.maxResultCount = 5
93+
const center = map.innerMap.getCenter()!;
94+
placeSearchQuery.maxResultCount = 5;
9795
placeSearchQuery.locationRestriction = {
9896
center: { lat: center.lat(), lng: center.lng() },
9997
radius: 50000, // 50km radius
100-
}
98+
};
10199
placeSearchQuery.locationBias = {
102100
center: { lat: center.lat(), lng: center.lng() },
103-
}
104-
placeSearchQuery.includedTypes = [typeSelect.value]
105-
placeSearch.addEventListener('gmp-load', addMarkers, { once: true })
101+
};
102+
placeSearchQuery.includedTypes = [typeSelect.value];
106103
}
107104
}
108105

109106
// The addMarkers function is called when the place search element loads.
110-
async function addMarkers() {
111-
const bounds = new LatLngBounds()
107+
async function addMarkers(
108+
AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement,
109+
LatLngBounds: typeof google.maps.LatLngBounds
110+
) {
111+
const bounds = new LatLngBounds();
112112

113113
if (placeSearch.places.length === 0) {
114-
return
114+
return;
115115
}
116116

117-
placeSearch.places.forEach((place) => {
117+
for (const place of placeSearch.places) {
118118
const marker = new AdvancedMarkerElement({
119119
map: map.innerMap,
120120
position: place.location,
121121
collisionBehavior:
122122
google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
123-
})
123+
});
124124

125-
markers.set(place.id, marker)
126-
bounds.extend(place.location)
125+
markers.set(place.id, marker);
126+
bounds.extend(place.location);
127127

128128
marker.addListener('click', () => {
129-
if (place.location) {
130-
map.innerMap.setCenter(place.location)
131-
}
132-
placeRequest.place = place
133-
infoWindow.setPosition(place.location)
134-
infoWindow.open(map.innerMap)
135-
})
136-
})
137-
138-
map.innerMap.fitBounds(bounds)
129+
placeRequest.place = place;
130+
infoWindow.open(map.innerMap, marker);
131+
});
132+
}
133+
134+
map.innerMap.fitBounds(bounds);
139135
}
140136

141-
init()
137+
init();
142138
/* [END maps_ui_kit_place_search_nearby] */

‎samples/ui-kit-place-search-nearby/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ body {
1212

1313
body {
1414
display: flex;
15-
flex-direction: column;
15+
flex-direction: column;a
1616
font-family: Arial, Helvetica, sans-serif;
1717
}
1818

0 commit comments

Comments
 (0)