Как подключить Yandex Maps JS API 3 к Next.js 13?

Как подключить Яндекс карты JS API 3 к Next.js 13

Я нашел это но в нем используется webpack
https://codesandbox.io/s/yimzzd?file=/webpack.config.js
  • Вопрос задан
  • 1742 просмотра
Решения вопроса 1
alexrapro
@alexrapro
Frontend Developer
Если ты хочешь подключить скрипт яндекс карты, можно сделать так:
'use client'

import React, {FC} from 'react';
import Script from "next/script";
import useYandexMap from "@/services/hooks/stores/map/useYandexMap";

const YMapProvider: FC<{ children?: React.ReactNode }> = ({children}) => {
    const exist = `${process.env.NEXT_PUBLIC_YMAP_APIKEY}` !== 'undefined'
    const {setIsOpen} = useYandexMap()
    const initYmaps = () => {
        setIsOpen(true)
    }


    return (
        <>
            {exist && <Script
                onLoad={() => ymaps.ready(initYmaps)}
                src={`https://api-maps.yandex.ru/2.1.79/?apikey=${process.env.NEXT_PUBLIC_MAP}&lang=ru_RU`}
            />}
            {children}
        </>
    )
}

export default YMapProvider;


В моём примере имеется Store, но можно обойтись и без него.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Else Ростов-на-Дону
от 150 000 до 200 000 ₽
OWNR SOLUTIONS Нижний Новгород
от 150 000 до 250 000 ₽