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> {
  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();
index.ts

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();
index.js

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;
}

style.css

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>
index.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