Google Places SearchBox边界约束失效问题求助及替代方案咨询

Let me start by saying I’ve run into similar behavior with the Places API recently—looks like Google might have tweaked how bounds/preferences are prioritized, especially when there’s a big mismatch between the specified bounds and the user’s IP location. Here’s how I’ve approached this issue, along with solutions that fit your requirement of bounded free-text search with map markers:

Why This Is Happening #

From what I’ve observed and tested, the recent API updates seem to prioritize user IP location over explicit bounds or componentRestrictions when the two are geographically far apart (like Sydney vs. your physical country). This explains the inconsistent IP-based behavior you mentioned. Even if you set bounds, the API might override it to "serve more relevant results" based on the request’s origin IP.

The Best Workaround: Combine AutocompleteService + PlacesService #

While it requires an extra API call, this method gives you full control over bounds compliance and supports free-text search—exactly what you need. Here’s how to implement it:

Step-by-Step Implementation #

1. Use AutocompleteService.getPlacePredictions to fetch bounded free-text suggestions (it honors bounds and componentRestrictions reliably).
2. When the user selects a suggestion, call PlacesService.getDetails to fetch the full location data (including coordinates for markers).
3. Optionally, add checks to ensure results stay within your target bounds.

Example Code

// Initialize map centered on Sydney
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -33.8688, lng: 151.2195 },
  zoom: 13,
});

// Initialize required services
const autocompleteService = new google.maps.places.AutocompleteService();
const placesService = new google.maps.places.PlacesService(map);
const searchInput = document.getElementById("search-input");
const resultsList = document.getElementById("results-list");

// Listen for input to fetch predictions
searchInput.addEventListener("input", () => {
  const query = searchInput.value.trim();
  if (!query) {
    resultsList.innerHTML = "";
    return;
  }

  autocompleteService.getPlacePredictions(
    {
      input: query,
      bounds: map.getBounds(), // Tie predictions to current map bounds
      componentRestrictions: { country: "au" }, // Lock to Australia
      region: "au", // Reinforce regional preference
    },
    (predictions, status) => {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error("Prediction error:", status);
        resultsList.innerHTML = "<li>No results found</li>";
        return;
      }
      renderPredictions(predictions);
    }
  );
});

// Render prediction suggestions
function renderPredictions(predictions) {
  resultsList.innerHTML = "";
  predictions.forEach((prediction) => {
    const listItem = document.createElement("li");
    listItem.textContent = prediction.description;
    listItem.addEventListener("click", () => selectPrediction(prediction.place_id));
    resultsList.appendChild(listItem);
  });
}

// Handle prediction selection and add map marker
function selectPrediction(placeId) {
  placesService.getDetails({ placeId }, (place, status) => {
    if (status !== google.maps.places.PlacesServiceStatus.OK) {
      console.error("Place details error:", status);
      return;
    }

    // Check if the place is within your target bounds (optional but recommended)
    const targetBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-34.0, 150.5), // Sydney southwest
      new google.maps.LatLng(-33.7, 151.3)  // Sydney northeast
    );

    if (targetBounds.contains(place.geometry.location)) {
      // Add marker to map
      new google.maps.Marker({
        position: place.geometry.location,
        map: map,
        title: place.name,
      });
      // Pan map to the selected place (optional)
      map.panTo(place.geometry.location);
    } else {
      alert("This location is outside the specified search area.");
    }
  });
}

Additional Checks to Try #

• Verify API Key Settings: Ensure your API key has no geographic restrictions set in the Google Cloud Console that might override your componentRestrictions.
• Update API Libraries: Make sure you’re loading the latest version of the Maps JavaScript API (use v=weekly temporarily to test if a newer build fixes the issue).
• Explicit Region Parameter: Adding region: "au" (or your target country code) to prediction requests can strengthen the regional preference, even if the IP is from another country.

Why Other Alternatives Fall Short #

• nearbySearch: No free-text support, as you noted.
• freetextSearch: No bounds control—this is by design for global searches.
• findPlaceFromQuery: Only returns one result, which isn’t ideal for a search box.

This workaround has been reliable for me across different IP locations, and it keeps your search constrained to the area you need while supporting free-text queries.

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