Page Summary
-
This example demonstrates how to use the Google Maps Geocoding service to find an address ("483 George St.") while restricting the results to a specific postal code ("2000") and country ("AU").
-
The provided code snippets show implementations in both TypeScript and JavaScript, along with HTML and CSS for displaying the results on a map.
-
Component restrictions are used to narrow down the search area and ensure the returned location is within the desired area of Sydney, Australia.
-
Users can interact with the map by clicking a "Geocode" button, which triggers the geocoding request and places a marker on the map at the identified location.
-
This sample can be run locally using Git and Node.js, or tested directly through provided links to JSFiddle and Google Cloud Shell.
This example creates a request to the geocoding service that restricts the results to a particular postal area within Sydney, Australia.
Read the documentation .
TypeScript
async function initMap () : Promise<void> { await Promise . all ([ google . maps . importLibrary ( "maps" ), google . maps . importLibrary ( "marker" ), google . maps . importLibrary ( "geocoding" ), ]); const geocoder = new google . maps . Geocoder (); const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; const innerMap = mapElement . innerMap ; ( document . getElementById ( "submit" ) as HTMLElement ). addEventListener ( "click" , () = > { geocodeAddress ( geocoder , innerMap ); } ); } function geocodeAddress ( geocoder : google.maps.Geocoder , map : google.maps.Map ) { geocoder . geocode ({ address : "483 George St." , componentRestrictions : { country : "AU" , postalCode : "2000" , }, }) . then (({ results }) = > { map . setCenter ( results [ 0 ]. geometry . location ); new google . maps . marker . AdvancedMarkerElement ({ map , position : results [ 0 ]. geometry . location , }); }) . catch (( e ) = > window . alert ( "Geocode was not successful for the following reason: " + e ) ); } initMap ();
JavaScript
async function initMap () { await Promise . all ([ google . maps . importLibrary ( "maps" ), google . maps . importLibrary ( "marker" ), google . maps . importLibrary ( "geocoding" ), ]); const geocoder = new google . maps . Geocoder (); const mapElement = document . querySelector ( 'gmp-map' ); const innerMap = mapElement . innerMap ; document . getElementById ( "submit" ). addEventListener ( "click" , () = > { geocodeAddress ( geocoder , innerMap ); }); } function geocodeAddress ( geocoder , map ) { geocoder . geocode ({ address : "483 George St." , componentRestrictions : { country : "AU" , postalCode : "2000" , }, }) . then (({ results }) = > { map . setCenter ( results [ 0 ]. geometry . location ); new google . maps . marker . AdvancedMarkerElement ({ map , position : results [ 0 ]. geometry . location , }); }) . catch (( e ) = > window . alert ( "Geocode was not successful for the following reason: " + e )); } initMap ();
CSS
/* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; } # floating-panel { position : absolute ; top : 10 px ; left : 25 % ; z-index : 5 ; background-color : #fff ; padding : 5 px ; border : 1 px solid #999 ; text-align : center ; font-family : "Roboto" , "sans-serif" ; line-height : 30 px ; padding-left : 10 px ; }
HTML
<html> <head> <title>Geocoding Component Restriction</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: "weekly" });</script> </head> <body> <div id="floating-panel"> <code>componentRestrictions: {country: "AU", postalCode: "2000"}</code><br /> <button id="submit">Geocode</button> </div> <gmp-map center="-33.865,151.209" zoom="8" map-id="DEMO_MAP_ID"></gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / geocoding - component - restrictionnpm inpm start
