77// [START maps_place_autocomplete_map]
88const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ;
99const placeAutocomplete = document . querySelector (
10- 'gmp-place-autocomplete'
10+ 'gmp-place-autocomplete'
1111) as google . maps . places . PlaceAutocompleteElement ;
1212let innerMap ;
1313let marker : google . maps . marker . AdvancedMarkerElement ;
1414let infoWindow : google . maps . InfoWindow ;
1515let center = { lat : 40.749933 , lng : - 73.98633 } ; // New York City
1616async function initMap ( ) : Promise < void > {
17- // Request needed libraries.
18- const [ ] = await Promise . all ( [
19- google . maps . importLibrary ( 'marker' ) ,
20- google . maps . importLibrary ( 'places' ) ,
21- ] ) ;
17+ // Request needed libraries.
18+ const [ ] = await Promise . all ( [
19+ google . maps . importLibrary ( 'marker' ) ,
20+ google . maps . importLibrary ( 'places' ) ,
21+ ] ) ;
2222
23- // [START maps_place_autocomplete_map_add]
24- // Get the inner map.
25- innerMap = mapElement . innerMap ;
26- innerMap . setOptions ( {
27- mapTypeControl : false ,
28- } ) ;
23+ // [START maps_place_autocomplete_map_add]
24+ // Get the inner map.
25+ innerMap = mapElement . innerMap ;
26+ innerMap . setOptions ( {
27+ mapTypeControl : false ,
28+ } ) ;
2929
30- // Use the bounds_changed event to restrict results to the current map bounds.
31- google . maps . event . addListener ( innerMap , 'bounds_changed' , async ( ) => {
32- placeAutocomplete . locationRestriction = innerMap . getBounds ( ) ;
33- } ) ;
34- // [END maps_place_autocomplete_map_add]
30+ // Use the bounds_changed event to restrict results to the current map bounds.
31+ google . maps . event . addListener ( innerMap , 'bounds_changed' , async ( ) => {
32+ placeAutocomplete . locationRestriction = innerMap . getBounds ( ) ;
33+ } ) ;
34+ // [END maps_place_autocomplete_map_add]
3535
36- // Create the marker and infowindow.
37- marker = new google . maps . marker . AdvancedMarkerElement ( {
38- map : innerMap ,
39- } ) ;
36+ // Create the marker and infowindow.
37+ marker = new google . maps . marker . AdvancedMarkerElement ( {
38+ map : innerMap ,
39+ } ) ;
4040
41- infoWindow = new google . maps . InfoWindow ( { } ) ;
41+ infoWindow = new google . maps . InfoWindow ( { } ) ;
4242
43- // [START maps_place_autocomplete_map_listener]
44- // Add the gmp-placeselect listener, and display the results on the map.
45- //@ts -ignore
46- placeAutocomplete . addEventListener ( 'gmp-select' , async ( { placePrediction } ) => {
43+ // [START maps_place_autocomplete_map_listener]
44+ // Add the gmp-placeselect listener, and display the results on the map.
45+ //prettier-ignore
46+ //@ts -ignore
47+ placeAutocomplete . addEventListener ( 'gmp-select' , async ( { placePrediction } ) => {
4748 const place = placePrediction . toPlace ( ) ;
4849 await place . fetchFields ( {
4950 fields : [ 'displayName' , 'formattedAddress' , 'location' ] ,
@@ -70,18 +71,18 @@ async function initMap(): Promise<void> {
7071 marker . position = place . location ;
7172 }
7273 ) ;
73- // [END maps_place_autocomplete_map_listener]
74+ // [END maps_place_autocomplete_map_listener]
7475}
7576
7677// Helper function to create an info window.
7778function updateInfoWindow ( content , center ) {
78- infoWindow . setContent ( content ) ;
79- infoWindow . setPosition ( center ) ;
80- infoWindow . open ( {
81- map : innerMap ,
82- anchor : marker ,
83- shouldFocus : false ,
84- } ) ;
79+ infoWindow . setContent ( content ) ;
80+ infoWindow . setPosition ( center ) ;
81+ infoWindow . open ( {
82+ map : innerMap ,
83+ anchor : marker ,
84+ shouldFocus : false ,
85+ } ) ;
8586}
8687
8788initMap ( ) ;
0 commit comments