Google Geocoding
JavaScript
API
Asynchronous Programming
Geocoder.geocode

How to wait for google geocoder.geocode?

System Design practice on Codemia

Work through 120+ system design problems with detailed solutions, from rate limiters to multi-region storage.

Practice system design

Introduction

You do not “wait” for google.maps.Geocoder.geocode in the synchronous sense, because it is asynchronous. The correct pattern is to continue your logic inside the callback or wrap the callback in a Promise so you can use async and await.

Use the Callback Directly

The Maps JavaScript geocoder returns results through a callback that receives results and status.

html
1<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
2<script>
3  const geocoder = new google.maps.Geocoder();
4
5  function geocodeAddress(address) {
6    geocoder.geocode({ address }, (results, status) => {
7      if (status === "OK" && results.length > 0) {
8        const location = results[0].geometry.location;
9        console.log(location.lat(), location.lng());
10      } else {
11        console.error("Geocode failed:", status);
12      }
13    });
14  }
15
16  geocodeAddress("1600 Amphitheatre Parkway, Mountain View, CA");
17</script>

This is the core answer. Anything that depends on the geocoding result must happen after the callback runs.

Why Synchronous Waiting Does Not Work

A common mistake is trying to return a geocoded value immediately after calling geocode.

javascript
1function bad(address) {
2  let result;
3  geocoder.geocode({ address }, (results, status) => {
4    result = results;
5  });
6  return result;
7}

This returns before the network request finishes, so result is still empty or undefined. That is not a Google Maps quirk. It is normal asynchronous JavaScript behavior.

Wrap It in a Promise for async and await

If you want a more linear coding style, wrap the callback in a Promise.

javascript
1function geocodeAsync(geocoder, request) {
2  return new Promise((resolve, reject) => {
3    geocoder.geocode(request, (results, status) => {
4      if (status === "OK") {
5        resolve(results);
6      } else {
7        reject(new Error(`Geocoder status: ${status}`));
8      }
9    });
10  });
11}
12
13async function run() {
14  const geocoder = new google.maps.Geocoder();
15
16  try {
17    const results = await geocodeAsync(geocoder, {
18      address: "1 Infinite Loop, Cupertino, CA"
19    });
20
21    const point = results[0].geometry.location;
22    console.log(point.lat(), point.lng());
23  } catch (error) {
24    console.error(error.message);
25  }
26}
27
28run();

This does not make the call synchronous. It just gives you a cleaner way to express asynchronous control flow.

Handle Errors and Empty Results Properly

Do not assume results[0] always exists. Always inspect status and whether the results array contains at least one match.

This matters because a geocoding request can fail for several reasons, including:

  • invalid request data
  • no results for the address
  • quota or rate limits
  • temporary service issues

Your control flow should treat those as expected outcomes, not as impossible edge cases.

Batch Requests Need Throttling

If you geocode many addresses, do not fire all requests at once. Queue them or process them sequentially with small delays.

javascript
1async function geocodeSequential(addresses) {
2  const geocoder = new google.maps.Geocoder();
3  const output = [];
4
5  for (const address of addresses) {
6    const results = await geocodeAsync(geocoder, { address });
7    output.push({
8      address,
9      location: results[0].geometry.location.toJSON()
10    });
11
12    await new Promise(resolve => setTimeout(resolve, 150));
13  }
14
15  return output;
16}

This reduces the chance of running into request-limit problems and keeps behavior more predictable.

Keep Follow-Up Logic Near the Result

A useful design rule is simple: the code that depends on the geocoded coordinates should live right after the callback or right after the await.

That keeps the data flow obvious. Problems appear when the result is stored in some outer variable and other code assumes it is ready before the async operation completes.

Common Pitfalls

A common mistake is trying to return geocoding results synchronously from a function that started an async request.

Another mistake is ignoring the status value and immediately reading results[0].

Developers also often forget rate limits when geocoding many addresses, which leads to avoidable failures.

Finally, do not confuse await with blocking the browser thread. It is just structured asynchronous flow, not a true synchronous wait.

Summary

  • 'geocoder.geocode is asynchronous, so dependent logic must run in the callback or after an awaited Promise.'
  • You cannot return the geocoding result synchronously from the calling function.
  • Wrapping the callback in a Promise is the cleanest way to use async and await.
  • Always check status and result availability before using coordinates.
  • Throttle or queue bulk requests instead of firing them all at once.

Related reading
Course
Beginner
27 lessons
10 hours
System Design Fundamentals

Build a strong foundation in designing scalable, reliable distributed systems.

View the course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

System Design practice on Codemia

Work through 120+ system design problems with detailed solutions, from rate limiters to multi-region storage.

Practice system design

All Rights Reserved.