Place Autocomplete Widget

 let 
  
 map 
  
 = 
  
 null 
 ; 
 async 
  
 function 
  
 init 
 () 
  
 { 
  
 const 
  
 { 
  
 Map3DElement 
  
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 ); 
  
 map 
  
 = 
  
 new 
  
 Map3DElement 
 ({ 
  
 center 
 : 
  
 { 
  
 lat 
 : 
  
 0 
 , 
  
 lng 
 : 
  
 0 
 , 
  
 altitude 
 : 
  
 16000000 
  
 }, 
  
 tilt 
 : 
  
 0 
 , 
  
 range 
 : 
  
 0 
 , 
  
 heading 
 : 
  
 0 
 , 
  
 roll 
 : 
  
 0 
 , 
  
 mode 
 : 
  
 'HYBRID' 
  
 }); 
  
 document 
 . 
 body 
 . 
 append 
 ( 
 map 
 ); 
  
 initAutocomplete 
 (); 
 } 
 async 
  
 function 
  
 initAutocomplete 
 () 
  
 { 
  
 const 
  
 { 
  
 PlaceAutocompleteElement 
  
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "places" 
 ); 
  
 const 
  
 placeAutocomplete 
  
 = 
  
 new 
  
 google 
 . 
 maps 
 . 
 places 
 . 
 PlaceAutocompleteElement 
 (); 
  
 placeAutocomplete 
 . 
 id 
  
 = 
  
 'place-autocomplete-input' 
 ; 
  
 const 
  
 card 
  
 = 
  
 document 
 . 
 getElementById 
 ( 
 'pac-container' 
 ); 
  
 card 
 . 
 appendChild 
 ( 
 placeAutocomplete 
 ); 
  
 placeAutocomplete 
 . 
 addEventListener 
 ( 
 'gmp-select' 
 , 
  
 async 
  
 ({ 
  
 placePrediction 
  
 }) 
  
 = 
>  
 { 
  
 const 
  
 place 
  
 = 
  
 placePrediction 
 . 
 toPlace 
 (); 
  
 await 
  
 place 
 . 
 fetchFields 
 ({ 
  
 fields 
 : 
  
 [ 
 'displayName' 
 , 
  
 'location' 
 , 
  
 'id' 
 ] 
  
 }); 
  
 // If the place has a geometry, then present it on a map. 
  
 if 
  
 ( 
 ! 
 place 
 . 
 location 
 ) 
  
 { 
  
 window 
 . 
 alert 
 ( 
 "No viewport for input: " 
  
 + 
  
 place 
 . 
 displayName 
 ); 
  
 return 
 ; 
  
 } 
  
 flyToPlace 
 ( 
 place 
 ); 
  
 }); 
 } 
 const 
  
 flyToPlace 
  
 = 
  
 async 
  
 ( 
 place 
 ) 
  
 = 
>  
 { 
  
 const 
  
 { 
  
 AltitudeMode 
 , 
  
 Polyline3DElement 
 , 
  
 Polygon3DElement 
 , 
  
 Marker3DElement 
  
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "maps3d" 
 ); 
  
 const 
  
 location 
  
 = 
  
 place 
 . 
 location 
 ; 
  
 // We need to find the elevation for the point so we place the marker at 50m above the elevation. 
  
 const 
  
 elevation 
  
 = 
  
 await 
  
 getElevationforPoint 
 ( 
 location 
 ); 
  
 const 
  
 marker 
  
 = 
  
 new 
  
 Marker3DElement 
 ({ 
  
 position 
 : 
  
 { 
  
 lat 
 : 
  
 location 
 . 
 lat 
 (), 
  
 lng 
 : 
  
 location 
 . 
 lng 
 (), 
  
 altitude 
 : 
  
 elevation 
  
 + 
  
 50 
  
 }, 
  
 altitudeMode 
 : 
  
 AltitudeMode 
 . 
 ABSOLUTE 
 , 
  
 extruded 
 : 
  
 true 
 , 
  
 label 
 : 
  
 place 
 . 
 displayName 
 , 
  
 }); 
  
 // Add the marker. 
  
 map 
 . 
 append 
 ( 
 marker 
 ); 
  
 // Fly to the marker. 
  
 map 
 . 
 flyCameraTo 
 ({ 
  
 endCamera 
 : 
  
 { 
  
 center 
 : 
  
 { 
  
 lat 
 : 
  
 location 
 . 
 lat 
 (), 
  
 lng 
 : 
  
 location 
 . 
 lng 
 (), 
  
 altitude 
 : 
  
 elevation 
  
 + 
  
 50 
  
 }, 
  
 tilt 
 : 
  
 65 
 , 
  
 heading 
 : 
  
 0 
 , 
  
 range 
 : 
  
 1000 
  
 }, 
  
 durationMillis 
 : 
  
 10000 
 , 
  
 }); 
 }; 
 async 
  
 function 
  
 getElevationforPoint 
 ( 
 location 
 ) 
  
 { 
  
 const 
  
 { 
  
 ElevationService 
  
 } 
  
 = 
  
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 "elevation" 
 ); 
  
 // Get place elevation using the ElevationService. 
  
 const 
  
 elevatorService 
  
 = 
  
 new 
  
 google 
 . 
 maps 
 . 
 ElevationService 
 (); 
  
 const 
  
 elevationResponse 
  
 = 
  
 await 
  
 elevatorService 
 . 
 getElevationForLocations 
 ({ 
  
 locations 
 : 
  
 [ 
 location 
 ], 
  
 }); 
  
 if 
  
 ( 
 ! 
 ( 
 elevationResponse 
 . 
 results 
 && 
 elevationResponse 
 . 
 results 
 . 
 length 
 )) 
  
 { 
  
 window 
 . 
 alert 
 ( 
 `Insufficient elevation data for place: 
 ${ 
 place 
 . 
 name 
 } 
 ` 
 ); 
  
 return 
 ; 
  
 } 
  
 const 
  
 elevation 
  
 = 
  
 elevationResponse 
 . 
 results 
 [ 
 0 
 ]. 
 elevation 
  
 || 
  
 10 
 ; 
  
 return 
  
 elevation 
 ; 
 } 
 init 
 (); 
 
  index 
 . 
 js 
 
 

 /* * Always set the map height explicitly to define the size of the div element 
 * that contains the map. 
 */ 
 html 
 , 
 map 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
 . 
 pac-controls 
  
 { 
  
 display 
 : 
  
 inline-block 
 ; 
  
 padding 
 : 
  
 0 
 px 
  
 11 
 px 
 ; 
 } 
 . 
 pac-controls 
  
 label 
  
 { 
  
 font-family 
 : 
  
 Roboto 
 ; 
  
 font-size 
 : 
  
 13 
 px 
 ; 
  
 font-weight 
 : 
  
 300 
 ; 
 } 
 . 
 pac-card 
  
 { 
  
 background-color 
 : 
  
 #fff 
 ; 
  
 border 
 : 
  
 0 
 ; 
  
 border-radius 
 : 
  
 4 
 px 
 ; 
  
 box-shadow 
 : 
  
 0 
  
 1 
 px 
  
 4 
 px 
  
 -1 
 px 
  
 rgba 
 ( 
 0 
 , 
  
 0 
 , 
  
 0 
 , 
  
 0.3 
 ); 
  
 margin 
 : 
  
 10 
 px 
 ; 
  
 padding 
 : 
  
 0 
  
 0.5 
 em 
 ; 
  
 font 
 : 
  
 400 
  
 18 
 px 
  
 Roboto 
 , 
  
 Arial 
 , 
  
 sans-serif 
 ; 
  
 /* overflow: hidden; */ 
  
 font-family 
 : 
  
 Roboto 
 ; 
  
 padding 
 : 
  
 0 
 ; 
  
 position 
 : 
  
 absolute 
 ; 
  
 left 
 : 
  
 10 
 px 
 ; 
  
 top 
 : 
  
 10 
 px 
 ; 
  
 z-index 
 : 
  
 99 
 ; 
 } 
 # 
 pac-container 
  
 { 
  
 padding-top 
 : 
  
 12 
 px 
 ; 
  
 padding-bottom 
 : 
  
 12 
 px 
 ; 
  
 margin-right 
 : 
  
 12 
 px 
 ; 
  
 border-radius 
 : 
  
 2 
 px 
 ; 
  
 width 
 : 
  
 412 
 px 
 ; 
 } 
 # 
 pac-input 
  
 { 
  
 background-color 
 : 
  
 #fff 
 ; 
  
 font-family 
 : 
  
 Roboto 
 ; 
  
 font-size 
 : 
  
 15 
 px 
 ; 
  
 font-weight 
 : 
  
 300 
 ; 
  
 margin-left 
 : 
  
 12 
 px 
 ; 
  
 padding 
 : 
  
 0 
  
 11 
 px 
  
 0 
  
 13 
 px 
 ; 
  
 text-overflow 
 : 
  
 ellipsis 
 ; 
  
 width 
 : 
  
 400 
 px 
 ; 
 } 
 # 
 pac-input 
 : 
 focus 
  
 { 
  
 border-color 
 : 
  
 #4d90fe 
 ; 
 } 
 # 
 title 
  
 { 
  
 color 
 : 
  
 #fff 
 ; 
  
 background-color 
 : 
  
 #4d90fe 
 ; 
  
 font-size 
 : 
  
 14 
 px 
 ; 
  
 font-weight 
 : 
  
 500 
 ; 
  
 padding 
 : 
  
 6 
 px 
  
 12 
 px 
 ; 
 } 
 # 
 place-autocomplete-card 
  
 { 
  
 background-color 
 : 
  
 #fff 
 ; 
  
 border-radius 
 : 
  
 5 
 px 
 ; 
  
 box-shadow 
 : 
  
 rgba 
 ( 
 0 
 , 
  
 0 
 , 
  
 0 
 , 
  
 0.35 
 ) 
  
 0 
 px 
  
 5 
 px 
  
 15 
 px 
 ; 
  
 margin 
 : 
  
 10 
 px 
 ; 
  
 padding 
 : 
  
 5 
 px 
 ; 
  
 font-family 
 : 
  
 Roboto 
 , 
  
 sans-serif 
 ; 
  
 font-size 
 : 
  
 large 
 ; 
  
 font-weight 
 : 
  
 bold 
 ; 
 } 
 gmp-place-autocomplete 
  
 { 
  
 padding-left 
 : 
  
 10 
 px 
 ; 
  
 width 
 : 
  
 405 
 px 
 ; 
  
 z-index 
 : 
  
 100 
 ; 
 } 
 
  style 
 . 
 css 
 
 

<html>
  <head>
    <title>Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <div class="pac-card" id="pac-card">
        <div id="title">Navigate to a place</div>
        <div id="pac-container">
        </div>
    </div>

    <!-- 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))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
  </body>
</html> 
 index.html