multiple maps on one page?

[donni106]

is it possible to have multiple maps on one page?

in the body i render two maps at different places but only the second map shows up.

the map component that is used in both cases looks like:

withScriptjs(withGoogleMap((props) => (
  <GoogleMap ...>
    {props.markers.map((marker) => (
      <Marker ...>
        ...
      </Marker>
  </GoogleMap>
));    

any ideas?

[JustFly1984]

@donni106 The repo of this project is unmaintained more than 3 years, and we had build new version. I have build another library that provides functionality for your requirements

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.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ 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!


[donni106]

@JustFly1984 thanks so far. can you show me one example with two or more maps on the same page with your library?

[DanyDanny7]

you can try using useLoadScript

import { GoogleMaps, useLoadScript } from "@react-google-maps/api";

 const { isLoaded, loadError } = useLoadScript({
        id: `google-map`,
        googleMapsApiKey: REACT_APP_GOOGLE_MAP_API_KEY,
         libraries: ["places"]
    });

return  isLoaded ? <GoogleMaps .../>  : <div>Loading...</div> 

In my case it works to render multiple maps I know I'm replying late, but for someone else in the future