search

appbaseio / reactivemaps

A data aware UI components library for building realtime maps
https://opensource.appbase.io/reactivemaps
941 stars 44 forks source link

renderMap() doesn't show Google Map #98

Closed czarinacatambing closed 5 years ago

czarinacatambing commented 5 years ago

See the code here: https://codesandbox.io/s/react-example-3mvlr?fontsize=14

No console errors or any warnings. Was thinking it is related to dependencies or the Google API.

If you look at the screenshot below, the Google Map component gets rendered but just doesn't show. Trying to see if it's a styling issue or not.

Screen Shot 2019-10-10 at 10 45 42 PM

I removed the cards to see if it were a styling issue and still doesn't show Screen Shot 2019-10-10 at 10 46 30 PM

lakhansamani commented 5 years ago

@czarinacatambing you are missing mapKey prop in ReactiveBase. For reference you can check this codesandbox https://codesandbox.io/s/ovq0m97qy6?from-embed

czarinacatambing commented 5 years ago

@lakhansamani I tried adding that prop previously but didn't do anything. If you check the codesandbox I posted above, I just added it to show it didn't work. I referenced this codesandbox: https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step5 which doesn't use that prop but still works. The map's key is found in index.html

jyash97 commented 5 years ago

Hey, @czarinacatambing can you create a codesandbox replica for your issue? It would be great to have a replicable demo so that we can look into this issue.

czarinacatambing commented 5 years ago

@jyash97 Yes i do have a codesandbox I posted above. For ease of reference, here it is https://codesandbox.io/s/react-example-3mvlr?fontsize=14

jyash97 commented 5 years ago

Hey @czarinacatambing after looking into the issue I found that this issue was not related to the library instead it was more of a setup issue. Here are a few points:

After doing the above step you will see the Search As Move label but the map won't be visible. The reason is that you are not importing your CSS file. After importing the CSS file and changing height and width of map-container you will see the map.

Here is the updated sandbox: https://codesandbox.io/s/react-example-8gkts

Also, going forward you can file any issue related to ReactiveMaps over here: https://github.com/appbaseio/reactivesearch.

Hope this helps!

czarinacatambing commented 5 years ago

@jyash97 Thank you for resolving this. And sounds good, will keep that in mind going forward