Google Maps Distance Matrix API origins参数地理定位传值异常排查

Hey there! Let's figure out why your origins parameter is coming through as nan, nan when using the Google Maps Distance Matrix API. Based on the response you shared (originAddresses: ["nan, nan"]), here are the most common issues and fixes to resolve this:

1. Check Your Geolocation Value Handling #

First, make sure your HTML5 geolocation code is properly capturing and using the latitude/longitude values. It’s easy to accidentally pass uninitialized or error-state variables to the API, which leads to nan values.

Here’s a robust example of how to handle geolocation correctly:

navigator.geolocation.getCurrentPosition(
  (position) => {
    // Capture valid coordinates
    const originCoords = `${position.coords.latitude}, ${position.coords.longitude}`;
    console.log("Valid origin coordinates:", originCoords); // Debug log to verify
    // Now pass originCoords to your Distance Matrix API call
    callDistanceMatrixAPI(originCoords);
  },
  (error) => {
    // Handle geolocation failures (critical step!)
    console.error("Geolocation failed:", error.message);
    // Fallback: Ask user to manually enter an origin address
    alert("Couldn't get your location. Please enter an address manually.");
  }
);

If you skip the error callback or don’t wait for the getCurrentPosition promise to resolve before calling the API, you’ll likely pass an undefined/NaN value as origins.

2. Verify the Format of Your Origins Parameter #

The Google Maps API expects origins to be a comma-separated latitude/longitude string (e.g., "37.7749, -122.4194") or a valid address string. If your code is passing non-numeric values (like a misformatted string, or an actual NaN variable), the API will parse this as nan, nan.

Add a debug log right before your API call to confirm the value:

console.log("Sending origins value:", origins);

If this log shows NaN, NaN or an invalid string, your geolocation logic is the root cause.

3. Check Geolocation Permissions & Browser Support #

• Permissions: If the user hasn’t granted your app location access, getCurrentPosition will trigger the error callback. If your code doesn’t handle this case, it might still attempt to call the API with an uninitialized variable.
• Browser/Environment Restrictions: Most modern browsers block geolocation on non-HTTPS sites (except localhost). If your app is running on an HTTP server, geolocation will fail silently in some cases.

4. Inspect the Full API Request #

Take a look at the actual request you’re sending to the API:

• For GET requests: Check the URL’s origins query parameter (e.g., https://maps.googleapis.com/maps/api/distancematrix/json?origins=nan%2C+nan&destinations=-25.494926%2C+-49.294445).
• For POST requests: Check the request body’s origins field.

This will confirm whether the invalid nan value is being sent from your code, or if there’s an unexpected parsing issue (though the former is far more likely).

Final Takeaway #

The most probable issue is that your geolocation logic isn’t correctly capturing valid coordinates before calling the Distance Matrix API. By adding debug logs, handling errors properly, and verifying the format of your origins value, you’ll quickly spot and fix the problem.

内容的提问来源于stack exchange，提问作者Gustavo Eklund