CodAre Development•17mo ago

react google maps

siteye google maps iframe eklicem ama api key istiyor paralı başka yolu var mıdır?

11 Replies

canOP•17mo ago

@Trial Support

Unknown User•17mo ago

Message Not Public

canOP•17mo ago

ne kullanıcam alternatif var mı

Unknown User•17mo ago

Message Not Public

canOP•17mo ago

Note : This answer is now out-of-date. You are now required to have an API key to use google maps. Read More

Unknown User•17mo ago

Message Not Public

canOP•17mo ago

mapbox güzelmiş la

canOP•17mo ago

https://visgl.github.io/react-map-gl/examples/layers

React Map GL

canOP•17mo ago

hoş görünüyor bunu bi denicem @Support Team

    <AnimatePresence>
      {isMenuOpen && (
        <motion.div className="min-h-[100dvh] w-full mt-[60px] bg-black/50 backdrop-blur-sm z-[99] absolute p-8 text-neutral-200" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} key='menu' id='menu'>
          <motion.div className="flex flex-col gap-y-4 text-xl font-medium" variants={{
            hidden: { opacity: 0 },
            visible: {
              opacity: 1,
              transition: {
                delay: 0.1,
                staggerChildren: 0.2
              }
            }
          }} initial="hidden" animate="visible">
            {menu.map((item, index) => (
              item.link ? (item.link.startsWith('#') ? (
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' onClick={() => {
                  document.querySelector(item.link)?.scrollIntoView({ behavior: 'smooth' });
                  setIsMenuOpen(false);
                }} variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index}>
                  {item.name}
                </motion.span>
              ) : (
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' onClick={() => setIsMenuOpen(false)} variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index}>
                  <NavLink to={item.link}>
                    {item.name}
                  </NavLink>
                </motion.span>
              )) : (<Fragment>
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index} onClick={() => {
                  if (currentActiveDropdown === index) setCurrentActiveDropdown(null);
                  else setCurrentActiveDropdown(index);
                }}>
                  {item.name}
                  {item.dropdown && (
                    <LuChevronRight className={twMerge(
                      'inline-block ml-2 transition-default',
                      currentActiveDropdown === index ? 'transform rotate-90' : ''
                    )} size={16} />
                  )}
                </motion.span>
              </Fragment>)
            ))}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>

    <AnimatePresence>
      {isMenuOpen && (
        <motion.div className="min-h-[100dvh] w-full mt-[60px] bg-black/50 backdrop-blur-sm z-[99] absolute p-8 text-neutral-200" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.2 }} key='menu' id='menu'>
          <motion.div className="flex flex-col gap-y-4 text-xl font-medium" variants={{
            hidden: { opacity: 0 },
            visible: {
              opacity: 1,
              transition: {
                delay: 0.1,
                staggerChildren: 0.2
              }
            }
          }} initial="hidden" animate="visible">
            {menu.map((item, index) => (
              item.link ? (item.link.startsWith('#') ? (
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' onClick={() => {
                  document.querySelector(item.link)?.scrollIntoView({ behavior: 'smooth' });
                  setIsMenuOpen(false);
                }} variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index}>
                  {item.name}
                </motion.span>
              ) : (
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' onClick={() => setIsMenuOpen(false)} variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index}>
                  <NavLink to={item.link}>
                    {item.name}
                  </NavLink>
                </motion.span>
              )) : (<Fragment>
                <motion.span className='cursor-pointer focus:opacity-60 transition-default' variants={{
                  hidden: { opacity: 0 },
                  visible: {
                    opacity: 1
                  }
                }} key={index} onClick={() => {
                  if (currentActiveDropdown === index) setCurrentActiveDropdown(null);
                  else setCurrentActiveDropdown(index);
                }}>
                  {item.name}
                  {item.dropdown && (
                    <LuChevronRight className={twMerge(
                      'inline-block ml-2 transition-default',
                      currentActiveDropdown === index ? 'transform rotate-90' : ''
                    )} size={16} />
                  )}
                </motion.span>
              </Fragment>)
            ))}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>

The following CSS fix the transition flicker on safari * { -webkit-backface-visibility: hidden; } şöyle bişey buldum deneyecem yok bisey degismedi neyse kaldırıyom animasyonu ugrasamicam

Unknown User•17mo ago

Message Not Public

canOP•17mo ago

sevmiyorum

Gaming

Programming

react google maps

Did you find this page helpful?