Geocoding Component Restrictions

  • 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();
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