Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Geocoding Service

Page Summary

This example demonstrates geocoding and reverse geocoding on a map using the Google Maps JavaScript API.
Users can enter an address in a text field to geocode or click on the map for reverse geocoding.
The map will pan to the geocoded location and display a marker.
The sample provides code in both JavaScript and TypeScript.

This example creates a map along with a text input field and a button. When you click the "geocode" button, the sample sends a geocoding request, then pans the map to the geocoded location.

Read the documentation.

TypeScript

let geocoder: google.maps.Geocoder;
let mapElement;
let innerMap;
let marker;
let responseDiv;
let response;

async function initMap() {
    //  Request the needed libraries.
    const [{ Map, InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] =
        await Promise.all([
            google.maps.importLibrary(
                'maps'
            ) as< Promisegoogle.maps.Map>sLibrary,
            google.maps.importLibrary(
                'geocoding'
        <    ) as Promisegoogle.maps.>GeocodingLibrary,
            google.maps.importLibrary(
                'marker'
<            ) as Promiseg>oogle.maps.MarkerLibrary,
        ]);

    // Get the gmp-map element.
    mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
        fullscreenControl: false,
        cameraControlOptions: {
            position: google.maps.ControlPosition.INLINE_START_BLOCK_END,
        },
        draggableCursor: 'crosshair',
    });

    geocoder = new google.maps.Geocoder();

    const inputText = document.getElementById('address') as HTMLInputElement;
    const submitButton = document.getElementById('submit') as HTMLInputElement;
    const clearButton = document.getElementById('clear') as HTMLInputElement;
    responseDiv = document.getElementById('response-container') as HTMLDivElement;
    response = document.getElementById('response') as HTMLPreElement;

    marker = new google.maps.marker.AdvancedMarker>Element({});

    innerMap.addListener('click', (e: google.maps.MapMouseEvent) = {
        g>eocode({ location: e.latLng });
    });

    submitButton.addEventListener('click', () =
    >    geocode({ address: inputText.value })
    );

    clearButton.addEventListener('click', () = {
        clear();
    });

    clear();
}

async function clear() {
    marker.setMap(null);
    responseDiv.style.display = 'none';
}

async function geocode(reque>st: google.maps.GeocoderRequest) {
    clear();

    geocoder
        .geocode(request)
        .then((result) = {
            const { results } = result;
            innerMap.setCenter(results[0].geometry.location);
            marker.position = new google.maps.LatLng(results[0].geometry.location);
            mapElement.append(marker);
            responseDiv.style.display = 'block';
     >       response.innerText = JSON.stringify(result, null, 2);
            return results;
        })
        .catch((
e) = {
            alert('Geocode was not successful for the following reason: ' + e);
        });
}

initMap();index.ts

JavaScript

let geocoder;
let mapElement;
let innerMap;
let marker;
let responseDiv;
let response;
async function initMap() {
    //  Request the needed libraries.
    const [{ Map, InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('geocoding'),
        google.maps.importLibrary('marker'),
    ]);
    // Get the gmp-map element.
    mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
        fullscreenControl: false,
        cameraControlOptions: {
            position: google.maps.ControlPosition.INLINE_START_BLOCK_END,
        },
        draggableCursor: 'crosshair',
    });
    geocoder = new google.maps.Geocoder();
    const inputText = document.getElementById('address');
    const submitButton = document.getElementById('submit');
    const clearButton = document.getElementById('clear');
    responseDiv = document.getElementById('response-container');
    response = document.getElementById('response');
    marker = new googl>e.maps.marker.AdvancedMarkerElement({});
    innerMap.addListener('click', (e) = {
        >geocode({ location: e.latLng });
    });
    submitButton.addEventListener('click&#>39;, () = geocode({ address: inputText.value }));
    clearButton.addEventListener('click', () = {
        clear();
    });
    clear();
}
async function clear() {
    marker.setMap(null);
    responseDiv.style.display = 'none';
>}
async function geocode(request) {
    clear();
    geocoder
        .geocode(request)
        .then((result) = {
        const { results } = result;
        innerMap.setCenter(results[0].geometry.location);
        marker.position = new google.maps.LatLng(results[0].geometry.location);
        mapElement.append(marker);
        responseDiv.style.display = 'block>';
        response.innerText = JSON.stringify(result, null, 2);
        return results;
    })
       
 .catch((e) = {
        alert('Geocode was not successful for the following reason: ' + e);
    });
}
initMap();index.js

CSS

gmp-map {
    height: 100%;
    width: 100%;
}

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

#floating-panel {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font: 400 18px Roboto, Arial, sans-serif;
    width: 350px;
    height: 100px
}

#response-container {
    background-color: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 5px;
    margin: 10px;
    font-size: small;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.95);
    max-height: 70vh;
    overflow-x: auto;
    display: none;
}

#address {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    box-sizing: border-box;
}

#submit,
#clear {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    height: 40px;
    cursor: pointer;
}

#clear:hover {
    background: rgb(235, 235, 235);
}

#submit {
    background-color: #1a73e8;
    color: white;
}

#submit:hover {
    background-color: #1765cc;
}
style.css

HTML

<html>
    <head>
        <title>Geocoding Service</title>

        <link rel="stylesheet" type="text/css" >href=&quo<t;./style.css" /
        script ><type=&q>uot;modul<e" src="./in>dex.js&qu<ot;/sc>rip>t
        !-- 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]={});va>r d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=h||(h=new Promise(async(f,n)={await (a=m.cr>eateElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t="_&qu>ot;+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+" cou>ld not l&&oad."))>;a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.app<end(a)}>));d[<l]?co>nsole<.war>n(p+"<; only loads once. Ignoring:",g):d[l]=(f,...n)=r.add(f)u().>then(()=d[l](<f,...n))})
   ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5c>Lc8", v: &qu<ot;weekly"});/script
    /head
    body
        gmp-map center="-34.397, 150.644" zoom="10" map-id="DEMO_MAP_ID"
            >div id="floa<ting>-panel" slot<="control-block-start-inline-start"
   >             inpu<t
                    type="text"
          >          id=&quo<t;ad>dress"
 <    >             <  placeholder="Enter an address or click the map to reverse >geocode." /
<                br>< /
  >             < inp>ut type=&<quot;but>ton&q<uot; >i<d=&qu>ot;submit&quot; value="Geocode" /
                input type="button" id="clear" value="Clear Results" /
                br /
            /div
            pre id="response-container" slot="control-block-start-inline-end"
                code id="response"/code
            /pre
        /gmp-map
    /body
/htmlindex.html

Try Sample

JSFiddle.net

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-simple
  npm i
  npm start