React-google-maps: My maps is grey

[Rtg147]

>

Maps is grey when larger than a certain width. And the zoom btns icons dont display well as i move too.Where does it come from ?

import React from 'react';
import getAvaiabilityResults from '../../utils/helpers';
import Results from './Results';
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";
class ResultList extends React.Component{
constructor(props){
super(props);
this.state ={ usersDataArr:null }
}

componentDidMount() {
getAvaiabilityResults(this.props.params.places,this.props.params.branch,this.props.params.dayOfMonth,this.props.params.timeStart,this.props.params.timeEnd)
.then(function(data){
this.setState({
usersDataArr:data.AvaiabilityResults
})
}.bind(this));

}
render(){
return(

containerElement={
{...this.props.containerElementProps}
style={{
height: "100%",
}}
/
}
googleMapElement={
ref={(map) = console.log(map)}
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
markers={[{
position:{
lat:46.181364,
lng:6.144949
},
key:Carouge,
defaultAnimation:2,
}]}
onClick={this.props.onMapClick}
}
/
{this.state.usersDataArr && import React from 'react';
import getAvaiabilityResults from '../../utils/helpers';
import Results from './Results';
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";
class ResultList extends React.Component{
constructor(props){
super(props);
this.state ={ usersDataArr:null }
}

componentDidMount() {
getAvaiabilityResults(this.props.params.places,this.props.params.branch,this.props.params.dayOfMonth,this.props.params.timeStart,this.props.params.timeEnd)
.then(function(data){
this.setState({
);
}
}
export default ResultList;

[cristiandley]

@Rtg147 at first glance i saw bad formated your ISSUE dont use > (thats for QUOTES) to add code use "" . Also... you have ResultList ``` twice please improve this issue description. I've been using this package since a time ago for several projects and only once i had SIZE issues because of a Component i did. Try to isolate your component and tell me what happen.

[tomchentw]

I just had this issue recently. It's because for my center props of <GoogleMap>, I've switched the values of lat and lng so they point to the wrong location and I got a blank gray map as well.

[Rtg147]

@cristiandley I've done as the example and i got the same issue,(ps: the streetview monkey even if isnt visible works well ^^)

[Rtg147]

import { default as React, Component } from "react";
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";
const SimpleMap = props => (
    <GoogleMapLoader
      containerElement={
        <div
          {...props.containerElementProps}
          style={{
            height: `100%`,
          }}
        />
      }
      googleMapElement={
        <GoogleMap
          defaultZoom={15}
          defaultCenter={{ lat: 46.2017559, lng: 6.1466014 }}
        >
          {props.markers.map((marker, index) => (
            <Marker
              {...marker}
              onRightclick={() => props.onMarkerRightclick(index)}
            />
          ))}
        </GoogleMap>
      }
    />
);
export default SimpleMap;

[Rtg147]

.mapResult{ width: 100%; height: 600px; background-color: grey; }

[cristiandley]

@Rtg147

First. Are you using sub-components like GoogleLoader.js > GoogleMap.js > Markers.js and importing them in that order ?

Second. Try to make a parent node before the loader, give it height: 80vh, width:100vw and in the Loader height: inherit.

Check out my example here: https://github.com/AYCRAL/alimentar alimentar/imports/ui/components/mapa/MapLoader.js i still working on that so dont expect pretty code...

Third, upload a simple repo trying to show me your issue if you can. I will be glad to help you but the example you pasted is not even formated. Next time plase take a time to indent your code at least...

[Rtg147]

https://drive.google.com/folderview?id=0B3QY371CAbzgc1c5aWpaVVhQVmc&usp=sharing its the files concernig my maps.Thank you @cristiandley for the time you consecrate

[Rtg147]

Ahh do we have to refresh on mouse map move

 handleMapClick(event) {
     let e = event.latLng;
     this.setState({
       confirm: true,
       mapInsert: {
         lat:e.lat(),
         lng:e.lng()
       }
     })
 }

[rewop]

@Rtg147 I looked into the folder you shared privately with me but, despite I managed to open the index.php.html file, the code you have problem with is never imported in the example, so still I cannot reproduce.

It spites me, but I cannot spend more time on this issue until I have a working example.

Again we are willing to help, but you first need to help us in reproducing your problem. Please read the CONTRIBUITING.md file about how to proper report a bug.

Until this issue is not reproducible and no proper working examples are given, I will close it.

[tomchentw]

I may found the issue. Reproducible in Directions example.

[Rtg147]

Really😀. What's reason of this issue ?

[Rtg147]

The problem was the img class inside css

[gregegan]

Any progress on this issue? Not sure I understand your response @Rtg147