This demonstrates sending a geocoding request for "Toledo" and receiving a
result in the US. The result returned depends on the region of the map. See also
the
[demo for the ES region](https://developers.google.com/maps/documentation/javascript/examples/geocoding-region-es.md.txt).
Read the
[documentation](https://developers.google.com/maps/documentation/javascript/geocoding.md.txt#GeocodingRegionCodes).
### TypeScript
```typescript
async function init(): Promise {
const [{ Geocoder }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary('geocoding'),
google.maps.importLibrary('marker'),
google.maps.importLibrary('maps'),
]);
const mapElement = document.querySelector('gmp-map')!;
const innerMap = mapElement.innerMap;
const geocoder = new Geocoder();
geocoder
.geocode({ address: 'Toledo' })
.then((response) => {
const position = response.results[0].geometry.location;
innerMap.setCenter(position);
new AdvancedMarkerElement({
map: innerMap,
position,
});
})
.catch((e: unknown) => {
window.alert(
'Geocode was not successful for the following reason: ' + e
);
});
}
void init();
```
### JavaScript
```javascript
async function init() {
const [{ Geocoder }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary('geocoding'),
google.maps.importLibrary('marker'),
google.maps.importLibrary('maps'),
]);
const mapElement = document.querySelector('gmp-map');
const innerMap = mapElement.innerMap;
const geocoder = new Geocoder();
geocoder
.geocode({ address: 'Toledo' })
.then((response) => {
const position = response.results[0].geometry.location;
innerMap.setCenter(position);
new AdvancedMarkerElement({
map: innerMap,
position,
});
})
.catch((e) => {
window.alert(
'Geocode was not successful for the following reason: ' + e
);
});
}
void init();
```
### CSS
```css
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
```
### HTML
```html
Geocoding Region - US
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/geocoding-region-us/jsfiddle)
### Clone Sample
Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
to install Node.js and NPM. You will also need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt).
The following commands clone the repository, install dependencies, and copy the environment file.
```javascript
git clone https://github.com/googlemaps-samples/js-api-samples.git
cd js-api-samples
npm i
cp .env.template .env
```
Once you copy the environment file, make sure to open the `.env` file and replace `` with your actual API key before starting the sample.
```javascript
cd samples/geocoding-region-us
npm start
```