谷歌地图v3灰盒与反应

Question

嘿伙计们我正在尝试将谷歌地图添加到反应项目中，我得到一个没有错误的灰色框。知道为什么。这是代码：

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;
});

Answer 1

您不应该使用document.getElementByID（＆＃39; map＆＃39;）。这是您尝试渲染google.maps容器的此组件中的节点吗？

这应该看起来像

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
    });
}

您需要添加react-dom作为依赖项。