CODEWITHSUNDEEP
reactjs
joethemow
joethemow

Reputation: 1773

Google Map React not appearing

I am trying to use the google-map-react, but when I try to render it, nothing appears. Am I missing something?

import GoogleMap from 'google-map-react';
import React, { Component } from 'react';

class GMaps extends Component {



static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };

render() {
  return (
   <div>
    <GoogleMap
       style={{width: "100%", height: "500"}}
       defaultCenter={this.props.center}
       defaultZoom={this.props.zoom}
     />
   </div>
  )
} 


}

Upvotes: 5

Views: 9955

Answers (2)

G H Mahimaanvita
G H Mahimaanvita

Reputation: 61

Assigning height and width to the container div fill, will fix the issue

<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
   defaultCenter={this.props.center}
   defaultZoom={this.props.zoom}
 />
</div>

as mentioned in getting-started: https://www.npmjs.com/package/google-map-react

Upvotes: 6

Deividas
Deividas

Reputation: 6507

Please check if you are rendering the app correctly.

See this working example: Codepen

Upvotes: 1

Related Questions