map not showing up

[klegeron]

Hi,

I try this example https://github.com/dburles/meteor-google-maps-react-example/blob/master/googlemaps-react.jsx with https://github.com/studiointeract/tracker-component

it's partially working, but no map and marker (however I see that map div changes in html from empty div). May you pls help?

export default class Map extends Tracker.Component {
    constructor(props){
        super(props);
        this.autorun(() => {
            this.setState({
                loaded: GoogleMaps.loaded(),
                mapOptions: GoogleMaps.loaded() && this._mapOptions()
            })
        })

    }
    componentDidMount(){
        GoogleMaps.load({ v: '3', key: '', libraries: 'geometry,places' });
    }
    _mapOptions() {
        return {
            center: new google.maps.LatLng(-37.8136, 144.9631),
            zoom: 8
        };
    }
    render() {
        if (this.state.loaded)
            return <GoogleMap name="mymap" options={this.state.mapOptions} />;

        return <div>Loading map...</div>;
    }
};

class GoogleMap extends Component{
    constructor(props){
        super(props);
    }
    componentDidMount() {
        GoogleMaps.create({
            name: this.props.name,
            element: $('.map-container')[0],
            options: this.props.options
        });

        GoogleMaps.ready(this.props.name, function(map) {
            var marker = new google.maps.Marker({
                position: map.options.center,
                map: map.instance
            });
        });
    }
    componentWillUnmount() {
        if (GoogleMaps.maps[this.props.name]) {
            google.maps.event.clearInstanceListeners(GoogleMaps.maps[this.props.name].instance);
            delete GoogleMaps.maps[this.props.name];
        }
    }
    render() {
        return <div className="map-container"></div>;
    }
};

[dburles]

Don't use jquery $('.map-container')[0], use refs

[klegeron]

Thank you for you help. I see this map :-)