search

JustFly1984 / react-google-maps-api

React Google Maps API
MIT License
1.82k stars 439 forks source link

Map grey out #3244

Open nguye3hg opened 1 year ago

nguye3hg commented 1 year ago

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Please provide an explanation of the issue

My Map is Grey Out like this when I go to any location Outside of the US. I can not put markers outside of the US to make them appear on the Map as well

Screenshot (393)

Your Environment

os: mac/linux/windows/android/ios

node --version

react version

webpack version

@babel version

@react-google-maps/api version

How does it behave?

How should it behave correctly?

Basic implementation of incorrect behavior in codesandbox.com

msidlo commented 1 year ago

Hi @nguye3hg. I have the same issue on localhost in development since 3.54 map version. Using 3.53 may solve your issue. V3 versions.

E.g.:

useJsApiLoader({ googleMapsApiKey: 'API_KEY', version: '3.53' })

TL;DR I've noticed the same behaviour on one of my projects. In our production everything works fine, but on localhost I see the same issue. This part of the code base wasn't changed for considerable time. In our project, the version of this library is fixed. Thus I believe the issue itself is not caused by this library. I'd watch for the map versions. Currently the latest is 3.54. Let's hope for now in 3.55 everything will get back to normal.

msidlo commented 8 months ago

I reviewed the issue today and found the problem. We use miragejs for API mocking and it is interfering with google maps. It's interesting it was working until 3.54 version without any problem.

For the reference if anybody encounter this issue, adding following passthrough into miragejs server solves the problem.

this.passthrough('https://maps.googleapis.com/**')