How to invoke the panTo() function?

danksky commented 5 years ago

It appears that the panTo function of the Google Maps API is exposed. How do I invoke it in an example?

crobinson42 commented 4 years ago

const MapPanToClick = () => {
  const [position, setPosition] = useState()

  const mapRef = useRef()

  useEffect(() => {
    if (mapRef.current?.panTo && position)
      mapRef.current?.panTo(position)

  }, [position])

  return (
    <GoogleMap
      defaultZoom={15}
      center={position || { lat: -34.397, lng: 150.644 }}
      onClick={e => setPosition({ lat: e.latLng.lat(), lng: e.latLng.lng() })}
      ref={mapRef}
    >
      <Marker position={position} />
    </GoogleMap>
  )
})

JustFly1984 commented 4 years ago

@crobinson42 The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!

tomchentw / react-google-maps

How to invoke the panTo() function? #989