CODEWITHSUNDEEP
javascriptgoogle-mapsreactjs
ckim16
ckim16

Reputation: 1749

Googlemap does not get rendered in React

I'm currently working on a project using React and Google Map but my google map is not getting rendered. I'm using google-maps-react library and it says 'Loading map...' but it does not go any further than that.. Also I'm curious that is there a way I can set the default center for this library.

Here is my Google map code..

import React, {PropTypes, Component} from 'react';
import Map, { Marker } from 'google-maps-react';

export default class GoogleMap extends Component {

  render() {
    return (
      <Map google={this.props.google}
        style={{width: '100%', height: '100%', position: 'relative'}}
        zoom={10}>
      </Map>
    );
  }
}

and here is my index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

import TruckList from './components/truck_list';
import GoogleMap from './components/google_map';

const url = `https://data.sfgov.org/resource/6a9r-agq8.json`;
const truckArr = [];

class App extends Component {
  constructor(props) {
    super(props);
    const self = this;
    self.state = { truckArr: [] };

    axios.get(url)
    .then((truckList) => {
      _.forEach(truckList.data, (truck) => {
        truckArr.push(truck);
      });
      self.setState({ truckArr });
    });
  }

  render() {
    return (
      <div className="app">
        <GoogleMap />
        <TruckList list={this.state.truckArr}/>
      </div>
    );
  }
};

ReactDOM.render(<App/>, document.querySelector('.container'));

I need to complete this first step to be able to move forward but since this my first time using google map with React, I'm having trouble to find my way out.

If anyone can tell what I need to do, that would be great.

Thanks in advance

Upvotes: 1

Views: 457

Answers (1)

Freez
Freez

Reputation: 7568

This is because you needs to load google maps api script.

1 / Get a key from here

2 / Include the script in your html <body> tag

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY">
</script>

3 / Inject the global google object to your GoogleMap component

<GoogleMap google={window.google} />

Upvotes: 1

Related Questions