diff --git a/samples/geocoding-simple/README.md b/samples/geocoding-simple/README.md new file mode 100644 index 00000000..ca9af18c --- /dev/null +++ b/samples/geocoding-simple/README.md @@ -0,0 +1,41 @@ +# Google Maps JavaScript Sample + +## geocoding-simple + +This sample shows how to perform simple geocoding. + +## Setup + +### Before starting run: + +`npm i` + +### Run an example on a local web server + +`cd samples/geocoding-simple` +`npm start` + +### Build an individual example + +`cd samples/geocoding-simple` +`npm run build` + +From 'samples': + +`npm run build --workspace=geocoding-simple/` + +### Build all of the examples. + +From 'samples': + +`npm run build-all` + +### Run lint to check for problems + +`cd samples/geocoding-simple` +`npx eslint index.ts` + +## Feedback + +For feedback related to this sample, please open a new issue on +[GitHub](https://github.com/googlemaps-samples/js-api-samples/issues). diff --git a/samples/geocoding-simple/index.html b/samples/geocoding-simple/index.html new file mode 100644 index 00000000..3fa5d578 --- /dev/null +++ b/samples/geocoding-simple/index.html @@ -0,0 +1,36 @@ + + + + + + Geocoding Service + + + + + + + + +
+ +
+ + +
+
+
+                
+            
+
+ + + diff --git a/samples/geocoding-simple/index.ts b/samples/geocoding-simple/index.ts new file mode 100644 index 00000000..4031c4af --- /dev/null +++ b/samples/geocoding-simple/index.ts @@ -0,0 +1,101 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ + +// [START maps_geocoding_simple] +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 Promise, + google.maps.importLibrary( + 'geocoding' + ) as Promise, + google.maps.importLibrary( + 'marker' + ) as Promise, + ]); + + // Get the gmp-map element. + mapElement = document.querySelector( + 'gmp-map' + ) as google.maps.MapElement; + + // Get the inner map. + innerMap = mapElement.innerMap; + + // Set the cursor to crosshair. + 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.AdvancedMarkerElement({ + map: innerMap, + }); + + innerMap.addListener('click', (e: google.maps.MapMouseEvent) => { + geocode({ 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(request: 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(); +// [END maps_geocoding_simple] diff --git a/samples/geocoding-simple/package.json b/samples/geocoding-simple/package.json new file mode 100644 index 00000000..59975ef6 --- /dev/null +++ b/samples/geocoding-simple/package.json @@ -0,0 +1,14 @@ +{ + "name": "@js-api-samples/geocoding-simple", + "version": "1.0.0", + "scripts": { + "build": "tsc && bash ../jsfiddle.sh geocoding-simple && bash ../app.sh geocoding-simple && bash ../docs.sh geocoding-simple && npm run build:vite --workspace=. && bash ../dist.sh geocoding-simple", + "test": "tsc && npm run build:vite --workspace=.", + "start": "tsc && vite build --base './' && vite", + "build:vite": "vite build --base './'", + "preview": "vite preview" + }, + "dependencies": { + + } +} diff --git a/samples/geocoding-simple/style.css b/samples/geocoding-simple/style.css new file mode 100644 index 00000000..bf567ccd --- /dev/null +++ b/samples/geocoding-simple/style.css @@ -0,0 +1,78 @@ +/** + * @license + * Copyright 2026 Google LLC. All Rights Reserved. + * SPDX-License-Identifier: Apache-2.0 + */ +/* [START maps_geocoding_simple] */ +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; +} + +/* [END maps_geocoding_simple] */ diff --git a/samples/geocoding-simple/tsconfig.json b/samples/geocoding-simple/tsconfig.json new file mode 100644 index 00000000..366aabb0 --- /dev/null +++ b/samples/geocoding-simple/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "module": "esnext", + "target": "esnext", + "strict": true, + "noImplicitAny": false, + "lib": [ + "es2015", + "esnext", + "es6", + "dom", + "dom.iterable" + ], + "moduleResolution": "Node", + "jsx": "preserve" + } +}