CODEWITHSUNDEEP
google-mapsreactjs
Pak Chu
Pak Chu

Reputation: 253

react google map not appearing

react-google-maps is not showing on screen. I have a Home component that is rendering a container MapNavigation component that is rendering view Map Component. Basically is Home -> MapNavigation -> Map

I am trying to get a simple map showing up, but is not working.

I am following this tutorial -> https://tomchentw.github.io/react-google-maps/basics/simple-map

When I check the elements in the browser it shows that the div exists but it isn't populated with any map.

enter image description here

What am I missing?

Home.js 

import React, {Component} from 'react';
import {Posts, MapNavigation} from '../containers';


class Home extends Component {
  render() {
    return (
      <div className='container'>
        Home Layout
        <div className='row'>

          <div className='col-md-3'>
            <MapNavigation/>
          </div>

          <div className='col-md-6'>
            <Posts/>
          </div>
          <div className='col-md-3'>
            Account
          </div>
        </div>
      </div>
    )
  }
}

export default Home

MapNavigation.js

import React, { Component } from 'react';
import { Map } from '../view';

class MapNavigation extends Component {
  render () {
    return (
      <div>
        MapNavigation
        <div>
            <Map />
        </div>


      </div>
    )
  }
}

export default MapNavigation;

Map.js

import React, {Component} from 'react';
import { withGoogleMap, GoogleMap, Marker} from 'react-google-maps';

class Map extends Component {

  render() {

    const GettingStartedGoogleMap = withGoogleMap( props => (
      <GoogleMap
        defaultZoom={3}
        defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
        >


      </GoogleMap>

    ))


    return (
        <GettingStartedGoogleMap
          containerElement={
            <div style={{height: `100%`, width: `100%`}} />
          }

          mapElement={
            <div style={{height: `100%`, width: `100%`}} />
          }

          />
    )


  }
}

export default Map;

Upvotes: 3

Views: 7387

Answers (1)

voquockhanh
voquockhanh

Reputation: 366

It's look like stylesheet of your html have problems with style={{height:100%, width:100%}}.

You can try replace your style of map to 1000px to test.

return (
    <GettingStartedGoogleMap
      containerElement={
        <div style={{height: `1000px`, width: `1000px`}} />
      }

      mapElement={
        <div style={{height: `1000px`, width: `1000px`}} />
      }

      />
)

If map display, try fix your html stylesheets

Upvotes: 8

Related Questions