Rendering a Google Map without react-google-map

Question

Has anyone been able to render a google map using React and not using the react-google-map plugin? I\'m trying something like this:

var MapTab = React.creat         


        

Answer 1

It seems that you are not familiar with React Component Life Cycle yet.

https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle

or this: http://busypeoples.github.io/post/react-component-lifecycle/ (this has the table of order in which react's methods are executed)

Actually, in the componentDidMount() ("DID-mount" means the element has already been there on the page, so you can start binding events to it)

React Component's idea is interesting, so we don't need to use javascript's "window.onload()" or jQuery's "$(document).ready()"

Therefore, your code can be revised as follows:

render: function() {
    return  

       

     
},

componentDidMount: function(){

    console.log("Hello")

    var markers = [];
    var geocoder = new google.maps.Geocoder();

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

}// end of cdm;

PS: Besides, in order to make the map appear, you need to style the map-container and map correctly (which need a height in pixel, in your case of "0 px width, maybe you need to put the width, too - either in px or 100%) Feel free to style them, though!