Search for boundaries by name or Place ID

 let 
  
 innerMap 
 ; 
 let 
  
 featureLayer 
 ; 
 let 
  
 center 
 ; 
 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 // Load the needed libraries. 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'maps' 
 )) 
  
 as 
  
 google 
 . 
 maps 
 . 
 MapsLibrary 
 ; 
  
 center 
  
 = 
  
 { 
  
 lat 
 : 
  
 41.059 
 , 
  
 lng 
 : 
  
 - 
 124.151 
  
 }; 
  
 // Trinidad, CA 
  
 // Get the gmp-map element. 
  
 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
  
 'gmp-map' 
  
 ) 
  
 as 
  
 google 
 . 
 maps 
 . 
 MapElement 
 ; 
  
 // Get the inner map. 
  
 innerMap 
  
 = 
  
 mapElement 
 . 
 innerMap 
 ; 
  
 // Get the LOCALITY feature layer. 
  
 featureLayer 
  
 = 
  
 innerMap 
 . 
 getFeatureLayer 
 ( 
 google 
 . 
 maps 
 . 
 FeatureType 
 . 
 LOCALITY 
 ); 
  
 findBoundary 
 (); 
 } 
 async 
  
 function 
  
 findBoundary 
 () 
  
 { 
  
 const 
  
 request 
  
 = 
  
 { 
  
 textQuery 
 : 
  
 'Trinidad, CA' 
 , 
  
 fields 
 : 
  
 [ 
 'id' 
 , 
  
 'location' 
 ], 
  
 includedType 
 : 
  
 'locality' 
 , 
  
 locationBias 
 : 
  
 center 
 , 
  
 }; 
  
 const 
  
 { 
  
 Place 
  
 } 
  
 = 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
  
 'places' 
  
 )) 
  
 as 
  
 google 
 . 
 maps 
 . 
 PlacesLibrary 
 ; 
  
 const 
  
 { 
  
 places 
  
 } 
  
 = 
  
 await 
  
 Place 
 . 
 searchByText 
 ( 
 request 
 ); 
  
 if 
  
 ( 
 places 
 . 
 length 
 ) 
  
 { 
  
 const 
  
 place 
  
 = 
  
 places 
 [ 
 0 
 ]; 
  
 styleBoundary 
 ( 
 place 
 . 
 id 
 ); 
  
 innerMap 
 . 
 setCenter 
 ( 
 place 
 . 
 location 
 ); 
  
 } 
  
 else 
  
 { 
  
 console 
 . 
 log 
 ( 
 'No results' 
 ); 
  
 } 
 } 
 function 
  
 styleBoundary 
 ( 
 placeid 
 ) 
  
 { 
  
 // Define a style of transparent purple with opaque stroke. 
  
 const 
  
 styleFill 
  
 = 
  
 { 
  
 strokeColor 
 : 
  
 '#810FCB' 
 , 
  
 strokeOpacity 
 : 
  
 1.0 
 , 
  
 strokeWeight 
 : 
  
 3.0 
 , 
  
 fillColor 
 : 
  
 '#810FCB' 
 , 
  
 fillOpacity 
 : 
  
 0.5 
 , 
  
 }; 
  
 // Define the feature style function. 
  
 featureLayer 
 . 
 style 
  
 = 
  
 ( 
 params 
 ) 
  
 = 
>  
 { 
  
 if 
  
 ( 
 params 
 . 
 feature 
 . 
 placeId 
  
 == 
  
 placeid 
 ) 
  
 { 
  
 return 
  
 styleFill 
 ; 
  
 } 
  
 }; 
 } 
 initMap 
 (); 
 
  index 
 . 
 ts 
 
 

 let 
  
 innerMap 
 ; 
 let 
  
 featureLayer 
 ; 
 let 
  
 center 
 ; 
 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 // Load the needed libraries. 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'maps' 
 )); 
  
 center 
  
 = 
  
 { 
  
 lat 
 : 
  
 41.059 
 , 
  
 lng 
 : 
  
 - 
 124.151 
  
 }; 
  
 // Trinidad, CA 
  
 // Get the gmp-map element. 
  
 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-map' 
 ); 
  
 // Get the inner map. 
  
 innerMap 
  
 = 
  
 mapElement 
 . 
 innerMap 
 ; 
  
 // Get the LOCALITY feature layer. 
  
 featureLayer 
  
 = 
  
 innerMap 
 . 
 getFeatureLayer 
 ( 
 google 
 . 
 maps 
 . 
 FeatureType 
 . 
 LOCALITY 
 ); 
  
 findBoundary 
 (); 
 } 
 async 
  
 function 
  
 findBoundary 
 () 
  
 { 
  
 const 
  
 request 
  
 = 
  
 { 
  
 textQuery 
 : 
  
 'Trinidad, CA' 
 , 
  
 fields 
 : 
  
 [ 
 'id' 
 , 
  
 'location' 
 ], 
  
 includedType 
 : 
  
 'locality' 
 , 
  
 locationBias 
 : 
  
 center 
 , 
  
 }; 
  
 const 
  
 { 
  
 Place 
  
 } 
  
 = 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'places' 
 )); 
  
 const 
  
 { 
  
 places 
  
 } 
  
 = 
  
 await 
  
 Place 
 . 
 searchByText 
 ( 
 request 
 ); 
  
 if 
  
 ( 
 places 
 . 
 length 
 ) 
  
 { 
  
 const 
  
 place 
  
 = 
  
 places 
 [ 
 0 
 ]; 
  
 styleBoundary 
 ( 
 place 
 . 
 id 
 ); 
  
 innerMap 
 . 
 setCenter 
 ( 
 place 
 . 
 location 
 ); 
  
 } 
  
 else 
  
 { 
  
 console 
 . 
 log 
 ( 
 'No results' 
 ); 
  
 } 
 } 
 function 
  
 styleBoundary 
 ( 
 placeid 
 ) 
  
 { 
  
 // Define a style of transparent purple with opaque stroke. 
  
 const 
  
 styleFill 
  
 = 
  
 { 
  
 strokeColor 
 : 
  
 '#810FCB' 
 , 
  
 strokeOpacity 
 : 
  
 1.0 
 , 
  
 strokeWeight 
 : 
  
 3.0 
 , 
  
 fillColor 
 : 
  
 '#810FCB' 
 , 
  
 fillOpacity 
 : 
  
 0.5 
 , 
  
 }; 
  
 // Define the feature style function. 
  
 featureLayer 
 . 
 style 
  
 = 
  
 ( 
 params 
 ) 
  
 = 
>  
 { 
  
 if 
  
 ( 
 params 
 . 
 feature 
 . 
 placeId 
  
 == 
  
 placeid 
 ) 
  
 { 
  
 return 
  
 styleFill 
 ; 
  
 } 
  
 }; 
 } 
 initMap 
 (); 
 
  index 
 . 
 js 
 
 

 /* 
 * Always set the map height explicitly to define the size of the div element 
 * that contains the map. 
 */ 
 gmp-map 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 /* 
 * Optional: Makes the sample page fill the window. 
 */ 
 html 
 , 
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
 
  style 
 . 
 css 
 
 

<html>
    <head>
        <title>Boundaries Text Search</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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>
    </head>
    <body>
        <gmp-map
            center="41.059,-124.151"
            zoom="15"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html> 
 index.html