CODEWITHSUNDEEP
google-maps-api-3reactjs
trebek1
trebek1

Reputation: 775

Google Maps v3 Grey Box with React

Hey guys I am trying to add a google map to a react project and I am getting a grey box with no errors. Any idea why. Here's the code: 

componentDidMount: function(){


    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749300, lng: -122.4194200},
        mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    };
        initMap(); 

 }// end of cdm;
});

Upvotes: 0

Views: 555

Answers (1)

Daniel
Daniel

Reputation: 371

You should not be using document.getElementByID('map'). Is that a node inside this component you are trying to render the google.maps container?

This should really look like

function renderMap() {
    // map node
    var mapNode = ReactDOM.findDOMNode(this.refs.map);
    new google.maps.Map(mapNode, {
        zoom: 12,
        center: {lat: 37.7749300, lng: -122.4194200},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

You need to add react-dom as a dependency.

Upvotes: 1

Related Questions