Note: Server-side libraries
Overview
Geocoding
is the process of converting addresses (like
"1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates
(like latitude 37.423021 and longitude -122.083739), which you can use to
place markers or position the map.
Reverse geocoding
is the process of converting geographic
coordinates into a human-readable address
(see
Reverse geocoding (Address Lookup)
).
You can also use the geocoder to find the address for a
given
place ID
.
The Maps JavaScript API provides a
Geocoder class
for
geocoding and reverse geocoding dynamically from user input. If instead
you wish to geocode static, known addresses, see the
Geocoding web service
.
Getting started
Before using the Geocoding service in the Maps JavaScript API, first ensure
that the Geocoding API is enabled in the Google Cloud Console, in the same
project you set up for the Maps JavaScript API.
To view your list of enabled APIs:
- Go to the
Google Cloud Console
.
- Click the
Select a project
button, then select the same project you set up
for the Maps JavaScript API and click
Open
.
- From the list of APIs on the
Dashboard
, look for
Geocoding API
.
- If you see the API in the list, you’re all set. If the API is
not
listed,
enable it:
- At the top of the page, select
ENABLE API
to display the
Library
tab. Alternatively, from the left side menu,
select
Library
.
- Search for
Geocoding API
, then select it from the
results list.
- Select
ENABLE
. When the process finishes,
Geocoding API
appears in the list of APIs on the
Dashboard
.
Pricing and policies
Pricing
Effective July 16, 2018, a new pay-as-you-go pricing plan went into effect
for Maps, Routes, and Places. To learn more about the new pricing and usage
limits for your use of the JavaScript Geocoding service, see
Usage and Billing
for the Geocoding API.
Policies
Use of the Geocoding service must be in accordance with the
policies described
for the Geocoding API
.
Geocoding Requests
Accessing the Geocoding service is asynchronous, since the Google Maps API
needs to make a call to an external server. For that reason, you need to pass
a
callback
method to execute upon completion of the request. This
callback method processes the result(s). Note that the geocoder may return
more than one result.
You access the Google Maps API geocoding service within your code via the
google.maps.Geocoder
constructor object. The
Geocoder.geocode()
method initiates a request to the geocoding
service, passing it a
GeocoderRequest
object literal containing
the input terms and a callback method to execute upon receipt of the response.
The
GeocoderRequest
object literal contains the following fields:
{
address: string,
location: LatLng,
placeId: string,
bounds: LatLngBounds,
componentRestrictions: GeocoderComponentRestrictions,
region: string
}
Required parameters:
You must supply one, and only one, of
the following fields:
address
— The address which you want to geocode.
or
location
— The
LatLng
(or
LatLngLiteral
) for which you wish to obtain the closest,
human-readable address. The geocoder performs a
reverse geocode
.
See
Reverse Geocoding
for more information.
or
placeId
— The place ID of the place for which you wish
to obtain the closest, human-readable address. See more about
retrieving an address for a place ID
.
Optional parameters:
bounds
— The
LatLngBounds
within which to bias geocode results more prominently. The
bounds
parameter
will only influence, not fully restrict, results from the geocoder. See
more information about
viewport biasing
below.
componentRestrictions
— Used to restrict results to a
specific area. See more information about
component filtering
below.
region
— The region code, specified as a
specified as a two-character (non-numeric) Unicode region subtag. In most
cases, these tags map directly to familiar ccTLD ("top-level domain")
two-character values. The
region
parameter will only influence,
not fully restrict, results from the geocoder. See more information about
region code biasing
below.
Geocoding Responses
The Geocoding service requires a callback method to execute upon retrieval
of the geocoder's results. This callback should pass two parameters to hold
the
results
and a
status
code, in that order.
Geocoding Results
The
GeocoderResult
object represents a single
geocoding result. A geocode request may return multiple result objects:
results[]: {
types[]: string,
formatted_address: string,
address_components[]: {
short_name: string,
long_name: string,
postcode_localities[]: string,
types[]: string
},
partial_match: boolean,
place_id: string,
postcode_localities[]: string,
geometry: {
location: LatLng,
location_type: GeocoderLocationType
viewport: LatLngBounds,
bounds: LatLngBounds
}
}
These fields are explained below:
types[]
is an array indicating the
address type
of
the returned result. This array contains a set of zero or more tags
identifying the type of feature returned in the result. For example, a
geocode of "Chicago" returns "locality" which indicates that "Chicago" is a
city, and also returns "political" which indicates it is a political
entity. See more information about
address types and address component
types
below.
formatted_address
is a string containing the human-readable
address of this location.
Often this address is equivalent to the postal address. Note that some
countries, such as the United Kingdom, do not allow distribution of true
postal addresses due to licensing restrictions.
The formatted address is logically composed of one or more
address
components
. For example, the address "111 8th Avenue, New York, NY"
consists of the following components: "111" (the street number),
"8th Avenue" (the route), "New York" (the city) and "NY" (the US state).
Do not parse the formatted address programmatically. Instead you should use
the individual address components, which the API response includes in addition
to the formatted address field.
address_components[]
is an array containing the separate
components applicable to this address.
Each address component typically contains the following fields:
types[]
is an array indicating the
type
of the
address component. See the list of
supported types
.
long_name
is the full text description or name of the
address component as returned by the Geocoder.
short_name
is an abbreviated textual name for the address
component, if available. For example, an address component for the state
of Alaska may have a
long_name
of "Alaska" and a
short_name
of "AK" using the 2-letter postal abbreviation.
Note the following facts about the
address_components[]
array:
- The array of address components may contain more components than the
formatted_address
.
- The array does not necessarily include all the political entities that
contain an address, apart from those included in the
formatted_address
. To retrieve all the political entities
that contain a specific address, you should use reverse geocoding, passing
the latitude/longitude of the address as a parameter to the request.
- The format of the response is not guaranteed to remain the same between
requests. In particular, the number of
address_components
varies based on the address requested and can change over time for the
same address. A component can change position in the array.
The type of the component can change. A particular component may be
missing in a later response.
See more information about
address types and address component
types
below.
-
partial_match
indicates that the geocoder did not return
an exact match for the original request, though it was able to match part of
the requested address. You may wish to examine the original request for misspellings and/or
an incomplete address.
Partial matches most often occur for street addresses that do not exist
within the locality you pass in the request. Partial matches may also be
returned when a request matches two or more locations in the same locality.
For example, "Hillpar St, Bristol, UK" will return a partial match for both
Henry Street and Henrietta Street. Note that if a request includes a
misspelled address component, the geocoding service may suggest an alternative
address. Suggestions triggered in this way will also be marked as a partial
match.
place_id
is a unique identifier of a place, which can be used
with other Google APIs. For example, you can use the
place_id
with the
Google Places
API
library to get details of a local business, such as phone number,
opening hours, user reviews, and more. See the
place ID overview
.
postcode_localities[]
is an array denoting all the localities
contained in a postal code, and is only present when the result is a postal
code that contains multiple localities.
geometry
contains the following information:
location
contains the geocoded latitude,longitude value.
Note that we return this location as a
LatLng
object, not
as a formatted string.
location_type
stores additional data about the specified
location. The following values are currently supported:
ROOFTOP
indicates
that the returned result reflects a precise geocode.
RANGE_INTERPOLATED
indicates that the returned result reflects an approximation
(usually on a road) interpolated between two precise points (such
as intersections). Interpolated results are generally returned when
rooftop geocodes are unavailable for a street address.
GEOMETRIC_CENTER
indicates that the returned result is the geometric center of a
result such as a polyline (for example, a street) or polygon
(region).
APPROXIMATE
indicates that the returned result is approximate.
viewport
stores the recommended viewport for the
returned result.
bounds
(optionally returned) stores the
LatLngBounds
which can fully contain the returned result.
Note that these bounds may not match the recommended viewport. (For
example, San Francisco includes the
Farallon
Islands
, which are technically part of the city, but should not
be returned in the viewport.)
The addresses will be returned by the Geocoder using the browser's preferred
language setting, or the language specified when loading the API JavaScript
using the
language
parameter. (For more information, see
Localization.
)
Address Types and Address Component Types
The
types[]
array in the
GeocoderResult
indicates the
address type
. The
types[]
array may also be returned
within a
GeocoderAddressComponent
to indicate the type of the particular address component. Addresses returned
by the geocoder may have multiple types; the types may be considered tags.
For example, many cities are tagged with the
political
and
locality
type.
The following types are supported and returned by the geocoder in both the
address types and address component types:
street_address
indicates a precise street address.
route
indicates a named route (such as "US 101").
intersection
indicates a major intersection, usually of two
major roads.
political
indicates a political entity. Usually, this type
indicates a polygon of some civil administration.
country
indicates the national political entity, and is
typically the highest order type returned by the Geocoder.
administrative_area_level_1
indicates a first-order civil
entity below the country level. Within the United States, these
administrative levels are states. Not all nations exhibit these
administrative levels. In most cases, administrative_area_level_1
short names will closely match ISO 3166-2 subdivisions and other widely
circulated lists; however this is not guaranteed as our geocoding results
are based on a variety of signals and location data.
administrative_area_level_2
indicates a second-order civil
entity below the country level. Within the United States, these
administrative levels are counties. Not all nations exhibit these
administrative levels.
administrative_area_level_3
indicates a third-order civil
entity below the country level. This type indicates a minor civil division.
Not all nations exhibit these administrative levels.
administrative_area_level_4
indicates a fourth-order civil
entity below the country level. This type indicates a minor civil division.
Not all nations exhibit these administrative levels.
administrative_area_level_5
indicates a fifth-order civil
entity below the country level. This type indicates a minor civil division.
Not all nations exhibit these administrative levels.
administrative_area_level_6
indicates a sixth-order civil
entity below the country level. This type indicates a minor civil division.
Not all nations exhibit these administrative levels.
administrative_area_level_7
indicates a seventh-order civil
entity below the country level. This type indicates a minor civil division.
Not all nations exhibit these administrative levels.
colloquial_area
indicates a commonly-used alternative name
for the entity.
locality
indicates an incorporated city or town political
entity.
sublocality
indicates a first-order civil entity below a
locality. For some locations may receive one of the additional types:
sublocality_level_1
to
sublocality_level_5
.
Each sublocality level is a civil entity. Larger numbers indicate a smaller
geographic area.
neighborhood
indicates a named neighborhood
premise
indicates a named location, usually a building or
collection of buildings with a common name
subpremise
indicates a first-order entity below a named
location, usually a singular building within a collection of buildings with
a common name
plus_code
indicates an encoded location reference, derived
from latitude and longitude. Plus codes can be used as a replacement for
street addresses in places where they do not exist (where buildings are not numbered or
streets are not named). See
https://plus.codes
for details.
postal_code
indicates a postal code as used to address postal
mail within the country.
natural_feature
indicates a prominent natural feature.
airport
indicates an airport.
park
indicates a named park.
point_of_interest
indicates a named point of interest.
Typically, these "POI"s are prominent local entities that don't easily fit
in another category, such as "Empire State Building" or "Eiffel Tower".
An empty list of types indicates there are no known types for the particular
address component, for example, Lieu-dit in France.
In addition to the above, address components may include the types below.
Note:
This list is not exhaustive, and is
subject to change.
floor
indicates the floor of a building address.
establishment
typically indicates a place that has not yet
been categorized.
landmark
indicates a nearby place that is used as a reference,
to aid navigation.
point_of_interest
indicates a named point of interest.
parking
indicates a parking lot or parking structure.
post_box
indicates a specific postal box.
postal_town
indicates a grouping of geographic areas, such as
locality
and
sublocality
, used for mailing addresses
in some countries.
room
indicates the room of a building address.
street_number
indicates the precise street number.
bus_station
,
train_station
and
transit_station
indicate the location of a bus, train or public
transit stop.
Status Codes
The
status
code may return one of the following values:
"OK"
indicates that no errors occurred; the address was successfully parsed and at
least one geocode was returned.
"ZERO_RESULTS"
indicates that the geocode was successful but returned no results.
This may occur if the geocoder was passed a non-existent
address
.
"OVER_QUERY_LIMIT"
indicates that you are over your quota.
"REQUEST_DENIED"
indicates that your request was denied. The web page is not
allowed to use the geocoder.
"INVALID_REQUEST"
generally indicates that the query (
address
,
components
or
latlng
) is missing.
"UNKNOWN_ERROR"
indicates that the request could not be
processed due to a server error. The request may succeed if you
try again.
"ERROR"
indicates that the request timed out or there was a
problem contacting the Google servers. The request may succeed if you
try again.
In this example, we geocode an address and place a marker at the returned
latitude and longitude values. Note that the handler is passed as an
anonymous function literal.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
View example.
Viewport Biasing
You can instruct the Geocoding Service to prefer results within a given
viewport (expressed as a bounding box). You do so by setting the
bounds
parameter within the
GeocoderRequest
object
literal to define the bounds of this viewport. Note that biasing only
prefers
results within the bounds; if more relevant results exist
outside of these bounds, they may be included.
For example, a geocode for "Winnetka" generally returns this suburb of Chicago:
{
"types":["locality","political"],
"formatted_address":"Winnetka, IL, USA",
"address_components":[{
"long_name":"Winnetka",
"short_name":"Winnetka",
"types":["locality","political"]
},{
"long_name":"Illinois",
"short_name":"IL",
"types":["administrative_area_level_1","political"]
},{
"long_name":"United States",
"short_name":"US",
"types":["country","political"]
}],
"geometry":{
"location":[ -87.7417070, 42.1083080],
"location_type":"APPROXIMATE"
},
"place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}
However, specifying a
bounds
parameter defining a bounding box
for the San Fernando Valley of Los Angeles results in this geocode returning
the neighborhood named "Winnetka" in that location:
{
"types":["sublocality","political"],
"formatted_address":"Winnetka, California, USA",
"address_components":[{
"long_name":"Winnetka",
"short_name":"Winnetka",
"types":["sublocality","political"]
},{
"long_name":"Los Angeles",
"short_name":"Los Angeles",
"types":["administrative_area_level_3","political"]
},{
"long_name":"Los Angeles",
"short_name":"Los Angeles",
"types":["administrative_area_level_2","political"]
},{
"long_name":"California",
"short_name":"CA",
"types":["administrative_area_level_1","political"]
},{
"long_name":"United States",
"short_name":"US",
"types":["country","political"]
}],
"geometry":{
"location": [34.213171,-118.571022],
"location_type":"APPROXIMATE"
},
"place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}
Region Code Biasing
You can set the Geocoding Service to return results biased to a particular
region explicitly using the
region
parameter. This parameter
takes a region code, specified as a two-character (non-numeric) Unicode
region subtag. These tags map directly to familiar ccTLD ("top-level domain")
two-character values such as "uk" in "co.uk" for example. In some cases, the
region
tag also supports ISO-3166-1 codes, which sometimes
differ from ccTLD values ("GB" for "Great Britain" for example).
When using the
region
parameter:
- Specify only one country or region. Multiple values are ignored, and
could result in a failed request.
- Use only two-character region subtags (Unicode CLDR format). All other
inputs will result in errors.
- Only the countries and regions listed in
Google
Maps Platform Coverage Details
are supported.
Geocoding requests can be sent for every domain in which the main
Google Maps application offers geocoding. Note that biasing
only
prefers
results for a specific domain; if more relevant results
exist outside of this domain, they may be included.
For example, a geocode for "Toledo" returns this result, as the default
domain for the Geocoding Service is set to the United States:
{
"types":["locality","political"],
"formatted_address":"Toledo, OH, USA",
"address_components":[{
"long_name":"Toledo",
"short_name":"Toledo",
"types":["locality","political"]
},{
"long_name":"Ohio",
"short_name":"OH",
"types":["administrative_area_level_1","political"]
},{
"long_name":"United States",
"short_name":"US",
"types":["country","political"]
}],
"place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}
A geocode for "Toledo" with the
region
field set to
'es'
(Spain) will return the Spanish city:
{
"types":["locality","political"],
"formatted_address":"Toledo, Espana",
"address_components":[{
"long_name":"Toledo",
"short_name":"Toledo",
"types":["locality","political"]
},{
"long_name":"Toledo",
"short_name":"TO",
"types":["administrative_area_level_2","political"]
},{
"long_name":"Castilla-La Mancha",
"short_name":"CM",
"types":["administrative_area_level_1","political"]
},{
"long_name":"Espana",
"short_name":"ES",
"types":["country","political"]
}],
"place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}
Component Filtering
You can set the Geocoding Service to return address results restricted
to a specific area, by using a components filter. Specify the filter in the
componentRestrictions
parameter. Filter values support the
same methods of spelling correction and partial matching as other geocoding
requests.
The geocoder returns only the results that match
all
the component
filters. That is, it evaluates the filter specifications as an AND, not an
OR.
A components filter consists of one or more of the following items:
route
matches long or short name of a route.
locality
matches against locality and sublocality types.
administrativeArea
matches all the
levels of administrative area.
postalCode
matches postal codes and postal code prefixes.
country
matches a country name or a two letter
ISO 3166-1
country code.
Note:
The API follows the ISO standard for
defining countries, and the filtering works best when using the
corresponding ISO code of the country.
The following example demonstrates using the
componentRestrictions
parameter to filter by
country
and
postalCode
:
function codeAddress() {
geocoder.geocode({
componentRestrictions: {
country: 'AU',
postalCode: '2000'
}
}, function(results, status) {
if (status == 'OK') {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
window.alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Reverse Geocoding (Address Lookup)
The term
geocoding
generally refers to translating a human-readable
address into a location on a map. The process of doing the converse,
translating a location on the map into a human-readable address, is known as
reverse geocoding
.
Instead of supplying a textual
address
, supply a comma-separated
latitude/longitude pair in the
location
parameter.
The following example geocodes a latitude/longitude value and centers the
map at that location, bringing up an info window with the formatted address:
TypeScript
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 8,
center: { lat: 40.731, lng: -73.997 },
}
);
const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();
(document.getElementById("submit") as HTMLElement).addEventListener(
"click",
() => {
geocodeLatLng(geocoder, map, infowindow);
}
);
}
function geocodeLatLng(
geocoder: google.maps.Geocoder,
map: google.maps.Map,
infowindow: google.maps.InfoWindow
) {
const input = (document.getElementById("latlng") as HTMLInputElement).value;
const latlngStr = input.split(",", 2);
const latlng = {
lat: parseFloat(latlngStr[0]),
lng: parseFloat(latlngStr[1]),
};
geocoder
.geocode({ location: latlng })
.then((response) => {
if (response.results[0]) {
map.setZoom(11);
const marker = new google.maps.Marker({
position: latlng,
map: map,
});
infowindow.setContent(response.results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert("No results found");
}
})
.catch((e) => window.alert("Geocoder failed due to: " + e));
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: { lat: 40.731, lng: -73.997 },
});
const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();
document.getElementById("submit").addEventListener("click", () => {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
const input = document.getElementById("latlng").value;
const latlngStr = input.split(",", 2);
const latlng = {
lat: parseFloat(latlngStr[0]),
lng: parseFloat(latlngStr[1]),
};
geocoder
.geocode({ location: latlng })
.then((response) => {
if (response.results[0]) {
map.setZoom(11);
const marker = new google.maps.Marker({
position: latlng,
map: map,
});
infowindow.setContent(response.results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert("No results found");
}
})
.catch((e) => window.alert("Geocoder failed due to: " + e));
}
window.initMap = initMap;
View example
Try Sample
Note that in the previous example we showed the first result by
selecting
results[0]
. The reverse geocoder often returns more
than one result. Geocoded addresses are not just postal addresses, but any
way to geographically name a location. For example, when geocoding a point in
the city of Chicago, the geocoded point may be labeled as a street address,
as the city (Chicago), as its state (Illinois) or as a country (The United
States). All are addresses to the geocoder. The reverse geocoder returns all
of these results.
The reverse geocoder matches political entities (countries, provinces,
cities and neighborhoods), street addresses, and postal codes.
Here's an example of the list of addresses that the above query may return:
results[0].formatted_address: "277 Bedford Ave, Brooklyn, NY 11211, USA"
results[1].formatted_address: "Grand St/Bedford Av, Brooklyn, NY 11211, USA"
results[2].formatted_address: "Williamsburg, Brooklyn, NY, USA"
results[3].formatted_address: "Brooklyn, NY, USA"
results[4].formatted_address: "New York, NY, USA"
results[5].formatted_address: "Brooklyn, NY 11211, USA"
results[6].formatted_address: "Kings County, NY, USA"
results[7].formatted_address: "New York-Northern New Jersey-Long Island, NY-NJ-PA, USA"
results[8].formatted_address: "New York Metropolitan Area, USA"
results[9].formatted_address: "New York, USA"
Addresses are returned in the order of best to least matches. Generally,
the more exact address is the most prominent result, as it is in this case.
Note that we return different types of addresses, from the most specific
street address to less specific political entities such as neighborhoods,
cities, counties, states, etc. If you wish to match a more general address,
you may wish to inspect the
results[].types
field.
Note:
Reverse geocoding is not an exact
science. The geocoder will attempt to find the closest addressable location
within a certain tolerance.
Retrieving an Address for a Place ID
Supply a
placeId
to find the address for a given place ID. The
place ID is a unique identifier that can be used with other Google APIs. For
example, you can supply the
placeId
returned by the
Roads API
to get the
address for a snapped point. For more information about place IDs, see the
place ID overview
.
When you supply a
placeId
, the request cannot contain any of
the following fields:
address
latLng
location
componentRestrictions
The following example accepts a place ID, finds the corresponding address,
and centers the map at that location. It also brings up an info window showing
the formatted address of the relevant place:
TypeScript
// Initialize the map.
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 8,
center: { lat: 40.72, lng: -73.96 },
}
);
const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();
(document.getElementById("submit") as HTMLElement).addEventListener(
"click",
() => {
geocodePlaceId(geocoder, map, infowindow);
}
);
}
// This function is called when the user clicks the UI button requesting
// a geocode of a place ID.
function geocodePlaceId(
geocoder: google.maps.Geocoder,
map: google.maps.Map,
infowindow: google.maps.InfoWindow
) {
const placeId = (document.getElementById("place-id") as HTMLInputElement)
.value;
geocoder
.geocode({ placeId: placeId })
.then(({ results }) => {
if (results[0]) {
map.setZoom(11);
map.setCenter(results[0].geometry.location);
const marker = new google.maps.Marker({
map,
position: results[0].geometry.location,
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert("No results found");
}
})
.catch((e) => window.alert("Geocoder failed due to: " + e));
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
// Initialize the map.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: { lat: 40.72, lng: -73.96 },
});
const geocoder = new google.maps.Geocoder();
const infowindow = new google.maps.InfoWindow();
document.getElementById("submit").addEventListener("click", () => {
geocodePlaceId(geocoder, map, infowindow);
});
}
// This function is called when the user clicks the UI button requesting
// a geocode of a place ID.
function geocodePlaceId(geocoder, map, infowindow) {
const placeId = document.getElementById("place-id").value;
geocoder
.geocode({ placeId: placeId })
.then(({ results }) => {
if (results[0]) {
map.setZoom(11);
map.setCenter(results[0].geometry.location);
const marker = new google.maps.Marker({
map,
position: results[0].geometry.location,
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert("No results found");
}
})
.catch((e) => window.alert("Geocoder failed due to: " + e));
}
window.initMap = initMap;
View example
Try Sample