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

Question

[Ислом Жуманиёзов]

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

Я нашел это но в нем используется webpack
https://codesandbox.io/s/yimzzd?file=/webpack.config.js

Comments

[Mikhail Osher]

Просто подключить - это одно дело. Другое, как хотите это в приложении использовать. Просто показать карту? Показать карту + разрешить перемещаться + показать маркеры? Показать карту, и показывать там уже сохраненные объекты, предварительно получив токен пользователя через oauth авторизацию?
Вам для каких целей?

[Ислом Жуманиёзов]

Mikhail Osher, показать карту и на карте добавлять маркеры получаемые из API и сделать функионал показа данных при нажатии на эти маркери.

Answer 1

[Alexander]

Если ты хочешь подключить скрипт яндекс карты, можно сделать так:

'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, но можно обойтись и без него.

Comments

[MatweyZhukov]

Здравствуйте, не могли бы вы показать код вашего на сколько я понимаю кастомного хука useYandexMaps, сижу работаю над своим проектом, тоже хочу внедрить туда карты, пока трудновато, заранее спасибо)