Update google maps API to remove context legacy warning

rickstaa commented 3 years ago

Version

1.9.0

Reproduction link

https://demos.creative-tim.com/material-kit-pro-react/#/contact-us (Add your own API key)

Operating System

Ubuntu 20.04, windows 10

Device

Hp Zbook G5

Browser & Version

Chrome v8.0.4324.150, firefox v85.0.1

Steps to reproduce

Go to the contact-us page
Open the console.
See react Legacy Context deprecation warning.

What is expected?

There should be no warning.

What is actually happening?

The warning is visible.

Solution

This can be fixed by moving over to the new Maintained version of the google-react-maps API (see https://www.npmjs.com/package/@react-google-maps/api). The new code is as follows (Add your API key to the .even file).

....
const CustomMap = (
  <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
    <GoogleMap
      zoom={8}
      center={{
        lat: 52.449,
        lng: 4.17,
      }}
      streetViewControl={false}
      options={{
        streetViewControl: false,
        mapTypeControl: false,
        zoomControl: false,
        fullscreenControl: false,
        backgroundColor: "#17263c",
        ...googleMapsStyle["dark"],
      }}
      mapContainerStyle={{
        height: "100%",
        overflow: "hidden",
      }}
    >
      <Marker
        position={{ lat: 52.38149641351333, lng: 4.635444167817593 }}
        animation="2"
      />
    </GoogleMap>
  </LoadScript>
);
...
<div className={classes.bigMap}>{CustomMap}</div>
...

github-actions[bot] commented 3 years ago

@rickstaa this issue was automatically closed because it did not follow our rules:


IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/material-kit-pro-react

**If your issue was not created using the app above, it will be closed immediately.**

Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com

rickstaa commented 3 years ago

Bad bot it was opened using that link and has the right format.

creativetimofficial / ct-material-kit-pro-react