ReactJS - Google Map not loaded, only loaded the grey background

[xshadowlegendx]

`// Map.jsx import React from 'react'; import TrackerReact from 'meteor/ultimatejs:tracker-react';

import { GoogleApi } from './GoogleApi.jsx';

class Map extends TrackerReact( React.Component ) {

constructor ( props ) {

    super ( props );

}

loadMap () {

    return GoogleMaps.loaded();

}

loadMapOption () {

    return GoogleMaps.loaded() && this._mapOptions()

}

componentDidMount () {

    GoogleMaps.load({

        v: '3',
        key: 'AIzaSyCrD4iVjx_iGouxfj9ElxzAg5Xsd1vvuUU',
        libraries: 'geometry, places'

    });

}

_mapOptions () {

    return {
        center: new google.maps.LatLng( -34.397, 150.644 ),
        zoom: 8
    }

}

render () {

    let map_loaded = this.loadMap ();

    return map_loaded ?

        <GoogleApi name="myMap" options={ this.loadMapOption } /> :

        <div> Loading Map... </div>

}

}

export { Map };

// GoogleApi.jsx

import React from 'react'; import TrackerReact from 'meteor/ultimatejs:tracker-react';

import { Random } from 'meteor/random';

class GoogleApi extends TrackerReact( React.Component ) {

constructor ( props ) {

    super ( props );

}

componentWillMount () {

    console.log ( "Mounting" );

}

componentDidMount () {

    GoogleMaps.create({

        name: this.props.name,
        element: this.refs.map,
        options: this.props.options

    });

    GoogleMaps.ready(this.props.name, ( map )=> {

        let marker = new google.maps.Marker({

            position: map.options.center,
            map: map.instance

        });

    });

}

componentWillUnmount () {

    if ( GoogleMaps.maps[ this.name ] ) {

        google.maps.event.clearInstanceListeners( GoogleMaps.maps[ this.name ].instance );
        delete GoogleMaps.maps[ this.name ];

    }

}

render () {
    return <div className="map-container" ref="map"></div>
}

}

export { GoogleApi }; ` There are not console error, the element div that map is created in has changes and also i can try to drag the grey background and the element inside the inner div changes, here is the screenshot link https://ibb.co/hqcH85. I already searched the issues and i did not found anything that solve this so please help and thanks very much.

[melkati]

May it be because the container isn't defined?

AFAIK the container where the map is going to be rendered should be defined.

This is mine:

.map-container {
  width: 800px;
  max-width: 100%;
  height: 500px;
}

[xshadowlegendx]

Ok i will look into it again and will get back to you after that

[xshadowlegendx]

Bro, i already try to add fixed size to width and height and it still not working

[dburles]

Hey @xshadowlegendx take a look at the updated example app https://github.com/dburles/meteor-google-maps-react-example