Geocoding Component Restrictions

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> {
    const [{ Geocoder }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('geocoding'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const geocoder = new Geocoder();
    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    document.getElementById('submit')!.addEventListener('click', async () => {
        const { results } = await geocoder.geocode({
            address: '483 George St.',
            componentRestrictions: {
                country: 'AU',
                postalCode: '2000',
            },
        });

        innerMap.setCenter(results[0].geometry.location);
        new AdvancedMarkerElement({
            map: innerMap,
            position: results[0].geometry.location,
        });
    });
}

void initMap();

JavaScript

async function initMap() {
    const [{ Geocoder }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('geocoding'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);

    const geocoder = new Geocoder();
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    document.getElementById('submit').addEventListener('click', async () => {
        const { results } = await geocoder.geocode({
            address: '483 George St.',
            componentRestrictions: {
                country: 'AU',
                postalCode: '2000',
            },
        });

        innerMap.setCenter(results[0].geometry.location);
        new AdvancedMarkerElement({
            map: innerMap,
            position: results[0].geometry.location,
        });
    });
}

void initMap();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    line-height: 30px;
    padding-left: 10px;
}

HTML

<html>
    <head>
        <title>Geocoding Component Restriction</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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"
            });
        </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.git
  cd samples/geocoding-component-restriction
  npm i
  npm start