Page Summary
-
This webpage provides a demonstration of reverse geocoding, converting geographical coordinates (latitude and longitude) into a human-readable address.
-
The provided code samples showcase the implementation of reverse geocoding using the Google Maps JavaScript API, with options in both JavaScript and TypeScript.
-
Users can input coordinates, which are then processed to display a marker on a map and an info window containing the corresponding address.
-
The sample code can be run locally by cloning the repository, installing dependencies, and starting the application using Node.js and Git.
This example demonstrates reverse geocoding of coordinates to addresses.
Read the documentation .
TypeScript
let marker ; async function initMap () { // Request the needed libraries. const [{ Map , InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] = await Promise . all ([ google . maps . importLibrary ( 'maps' ) as Promise<google . maps . MapsLibrary > , google . maps . importLibrary ( 'geocoding' ) as Promise<google . maps . GeocodingLibrary > , google . maps . importLibrary ( 'marker' ) as Promise<google . maps . MarkerLibrary > , ]); // Get the gmp-map element. const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; // Get the inner map. const innerMap = mapElement . innerMap ; // Get the latlng input box. const latLngQuery = document . getElementById ( 'latlng' ) as HTMLInputElement ; // Get the submit button. const submitButton = document . getElementById ( 'submit' ) as HTMLElement ; // Set the cursor to crosshair. innerMap . setOptions ({ draggableCursor : 'crosshair' , zoom : 13 , }); // Create a marker for re-use. marker = new AdvancedMarkerElement ({ map : innerMap , }); const geocoder = new Geocoder (); const infowindow = new InfoWindow (); // Add a click event listener to the submit button. submitButton . addEventListener ( 'click' , () = > { geocodeLatLng ( geocoder , innerMap , infowindow ); }); // Add a click event listener to the map. innerMap . addListener ( 'click' , ( event ) = > { latLngQuery . value = ` ${ event . latLng . lat () } , ${ event . latLng . lng () } ` ; geocodeLatLng ( geocoder , innerMap , infowindow ); }); // Make an initial request upon loading. geocodeLatLng ( geocoder , innerMap , infowindow ); } async 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 ]) { marker . position = latlng ; map . setCenter ( latlng ); 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 )); } initMap ();
JavaScript
let marker ; 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. const mapElement = document . querySelector ( 'gmp-map' ); // Get the inner map. const innerMap = mapElement . innerMap ; // Get the latlng input box. const latLngQuery = document . getElementById ( 'latlng' ); // Get the submit button. const submitButton = document . getElementById ( 'submit' ); // Set the cursor to crosshair. innerMap . setOptions ({ draggableCursor : 'crosshair' , zoom : 13 , }); // Create a marker for re-use. marker = new AdvancedMarkerElement ({ map : innerMap , }); const geocoder = new Geocoder (); const infowindow = new InfoWindow (); // Add a click event listener to the submit button. submitButton . addEventListener ( 'click' , () = > { geocodeLatLng ( geocoder , innerMap , infowindow ); }); // Add a click event listener to the map. innerMap . addListener ( 'click' , ( event ) = > { latLngQuery . value = ` ${ event . latLng . lat () } , ${ event . latLng . lng () } ` ; geocodeLatLng ( geocoder , innerMap , infowindow ); }); // Make an initial request upon loading. geocodeLatLng ( geocoder , innerMap , infowindow ); } async 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 ]) { marker . position = latlng ; map . setCenter ( latlng ); 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 )); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; font-family : Roboto , sans-serif ; } # floating-panel { background-color : #fff ; border-radius : 5 px ; box-shadow : rgba ( 0 , 0 , 0 , 0.35 ) 0 px 5 px 15 px ; margin : 10 px ; padding : 15 px ; font-family : Roboto , sans-serif ; font-size : 1 rem ; } # latlng { width : 100 % ; font-family : Roboto , sans-serif ; font-size : 1 rem ; margin-bottom : 4 px ; } # submit { font-size : 1 rem ; }
HTML
<html> <head> <title>Reverse Geocoding</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> <gmp-map center="0.714224, -73.961452" zoom="8" map-id="DEMO_MAP_ID"> <div id="floating-panel" slot="control-block-start-inline-center"> <p> Click the map to reverse geocode, or paste in your own coordinates. </p> <input id="latlng" type="text" value="40.714224, -73.961452" /><br /> <input id="submit" type="button" value="Reverse Geocode" /> </div> </gmp-map> </body> </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.gitcd samples / geocoding - reversenpm inpm start
