I cannot enable any google api

Question

In the google developer console: I've been using google api's but now for some reason every single api's enable button is greyed out and next to it is the message "Page loading error. Refresh this page to try again."

Refreshing the page does nothing. It's been like this for over two days now.

Please post pictures of the apis you are having issues with or at least give us an idea of which apis you are having issues with. — Linda Lawton - DaImTo
– Linda Lawton - DaImTo, Commented Aug 5, 2019 at 15:14

pamplemousse · Accepted Answer · 2019-07-26 03:04:25Z

1

Try again now, I had the same problem and it fixed itself at midnight AST.

I think these questions from today are the same issue:

answered Jul 26, 2019 at 3:04

pamplemousse

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

guest123 · Accepted Answer · 2025-06-28 12:48:58Z

import { collection, getDocs } from "firebase/firestore";
import { db } from "../../config/firebase";
import { getDistance } from "geolib";
import { useEffect, useState } from "react";

function Listing() {
  const [drives, setDrives] = useState([]);

  useEffect(() => {
    const fetchDrives = async () => {
      try {
        const position = await new Promise((resolve, reject) => {
          navigator.geolocation.getCurrentPosition(resolve, reject, {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 300000
          });
        });

        const userLat = position.coords.latitude;
        const userLng = position.coords.longitude;

        const querySnapshot = await getDocs(collection(db, "beach_drives"));
        const locations = [];

        querySnapshot.forEach((doc) => {
          const data = doc.data();

          if (data.coordinates?.latitude && data.coordinates?.longitude) {
            const distance = getDistance(
              { latitude: userLat, longitude: userLng },
              { latitude: data.coordinates.latitude, longitude: data.coordinates.longitude }
            );

            locations.push({
              id: doc.id,
              name: data.name || "Unnamed Location",
              distance,
              coordinates: {
                lat: data.coordinates.latitude,
                lng: data.coordinates.longitude
              }
            });
          }
        });

        locations.sort((a, b) => a.distance - b.distance);
        setDrives(locations);
      } catch (err) {
        // Silently fail (no UI if error)
      }
    };

    fetchDrives();
  }, []);

  return (
    <div className="p-6">
      {drives.map((drive) => (
        <div key={drive.id} className="p-4 border border-gray-200 rounded shadow-sm mb-3">
          <h2 className="text-lg font-semibold">{drive.name}</h2>
          <p className="text-sm text-gray-600">
            {(drive.distance / 1000).toFixed(2)} km away
          </p>
          <p className="text-xs text-gray-500">
            {drive.coordinates.lat.toFixed(4)}°, {drive.coordinates.lng.toFixed(4)}°
          </p>
        </div>
      ))}
    </div>
  );
}

export default Listing;

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

I cannot enable any google api

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related