Replace unmaintained react-google-maps with @react-google-maps/api

[rideyourstyle]

I replaced react-google-maps and added mapOptions, used by the new library

[rameshsyn]

@rideyourstyle Nice work! will review changes and merge. Thanks.

[asimkt]

@rameshsyn got a chance to review this? I'm getting a

index.js:183 Uncaught TypeError: Cannot read property 'maps' of undefined

at

key: 'geocodePosition',
    value: function geocodePosition(position) {
      // Geocoder instance
      var geocoder = new google.maps.Geocoder();
      return new Promise(function (resolve, reject) {
        geocoder.geocode({
          location: position
        }, function (results, status) {
          if (status === google.maps.GeocoderStatus.OK) {
            resolve(results);
          } else {
            reject(status);
          }
        });
      });
    }

Will this error be fixed by this change?

[rameshsyn]

@asimkt This change is about replacing the internal library.

[rameshsyn]

@asimkt Can you confirm that you included <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.exp&libraries=geometry,drawing,places"></script>?

[asimkt]

@asimkt Can you confirm that you included <script src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&v=3.exp&libraries=geometry,drawing,places"></script>?

I did inside an effect. So the flow is like:

1. Include script
2. on script load, change a state, render the picker.

This is working fine. I'm getting map and all, but when I change the location, the mentioned error occurs. I couldn't find a fix, so went with another library for now. I will try to create a code sandbox, but not sure.

[rideyourstyle]

Have you tried include it outside of the effect?