Блог

Главная - Вопросы по программированию - Next.js Заголовок — Вы несколько раз включали JavaScript API Карт Google на этой странице

Next.js Заголовок — Вы несколько раз включали JavaScript API Карт Google на этой странице

#reactjs #google-maps #next.js

#reactjs #google-карты #next.js

Вопрос:

Чтобы использовать библиотеку react-places-autocomplete, я реализовал скрипт gmaps, как указано в документе, но я получаю сообщение «Вы несколько раз включали JavaScript API Карт Google на этой странице». ошибка, когда я перехожу на любую страницу с 4-5 копиями тега script.

Если я удалю компонент GooglePlacesScript, экземпляр скрипта не будет добавлен.

Если я помещаю компонент GooglePlacesScript на уровень страницы или компонента, я все равно получаю ошибку, куда бы я ни заходил на веб-сайт.

Есть идеи, почему Next дублирует скрипт?

Компонент GooglePlacesScript:

 import React from "react";
import getConfig from "next/config";
import Head from "next/head";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const GooglePlacesScript = () => {
  return (
    <Head>
      <script
        type="text/javascript"
        src={
          "https://maps.googleapis.com/maps/api/js?key="  
          GOOGLE_MAPS_API_KEY  
          "amp;libraries=places"
        }
      ></script>
    </Head>
  );
};

export default GooglePlacesScript;

_app.js:

 import { ThemeProvider } from "styled-components";
import { theme } from "@styles";
import { BaseCSS } from "styled-bootstrap-grid";
import "@fortawesome/fontawesome-svg-core/styles.css";
import "pure-react-carousel/dist/react-carousel.es.css";
import "react-input-range/lib/css/index.css";
import "@styles/_app.css";
import "swiper/swiper-bundle.min.css";
import CartManager from "@components/Cart/CartManager";
import CartContextProvider from "contexts/CartContext";
import AuthContextProvider from "contexts/AuthContext";
import AuthManager from "@components/Auth/AuthManager";
import FavoritesManager from "@components/Favorites/FavoritesManager";
import FavoritesContextProvider from "contexts/FavoritesContext";
import GooglePlacesScript from "@components/GooglePlacesScript";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <BaseCSS />
      <AuthContextProvider>
        <AuthManager>
          <CartContextProvider>
            <CartManager>
              <FavoritesContextProvider>
                <FavoritesManager>
                  <GooglePlacesScript />
                  <Component {...pageProps} />
                </FavoritesManager>
              </FavoritesContextProvider>
            </CartManager>
          </CartContextProvider>
        </AuthManager>
      </AuthContextProvider>
    </ThemeProvider>
  );
}

export default MyApp;

Редактирование решения: обновлен код GooglePlacesScript с использованием next /script (Next v11 ):

 import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}amp;libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

Комментарии:

1. Вы пробовали использовать key prop для <script> тега? Кроме того, вы можете захотеть взглянуть на использование next/script вместо этого.

2. Спасибо! Поддержка ключа не решила проблему, но обновление Next для получения команды «next / script» сработало как чудо. Отредактирует сообщение с обновленным кодом.

Ответ №1:

Найдено решение: обновлен код GooglePlacesScript с использованием next /script (Next v11 ):

 import React from "react";
import getConfig from "next/config";
import Script from "next/script";

const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
const GOOGLE_MAPS_API_KEY =
  serverRuntimeConfig.GOOGLE_MAPS_API_KEY ||
  publicRuntimeConfig.GOOGLE_MAPS_API_KEY;

const source = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}amp;libraries=places`;

const GooglePlacesScript = () => {
  return (
    <Script type="text/javascript" src={source} strategy="beforeInteractive" />
  );
};

export default GooglePlacesScript;

Ответ №2:

Я бы предложил использовать @googlemaps / react-wrapper .

 import { Wrapper } from "@googlemaps/react-wrapper";

const MyApp = () => (
  <Wrapper apiKey={"YOUR_API_KEY"}>
    <MyMapComponent />
  </Wrapper>
);
Метки: