0

I have found the only working google map example in React at https://github.com/StephenGrider/ReduxCasts in the weather project. It can be installed with npm i; npm start

I have https://bitbucket.org/codyc54321/anthony-project-react where the maps do not show an error when you click them, but nothing shows up on page. If you do inspect element and open the body, you do indeed see many divs containing the html of a google map, but nothing is visible. I'm not styling things so I don't know why it would be invisible.

The map is 

import React, { Component } from 'react';

class GoogleMap extends Component {

  componentDidMount() {
    new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: this.props.lat,
        lng: this.props.lon
      }
    });
  }

  render() {
    return <div ref="map" />;
  }
}

export default GoogleMap;
halfer
  • 19,824
  • 17
  • 99
  • 186
codyc4321
  • 9,014
  • 22
  • 92
  • 165
  • I've had issues in the past with google maps not showing and it was due to styling. Make sure the parent container of the map has explicit height and width sizes and you should good. The map is there it just won't show without these changes. – KA01 May 21 '17 at 18:36
  • Not sure how google maps work, but are you sure it works with `refs` and not `id`? Also, you should [**read this**](http://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs/43873736#43873736) regarding using string literals for `refs` - it is deprecated. – Chris May 21 '17 at 18:38
  • @KeithAlpichi i've wasted a larger portion of my life on this than anyone should have to, please make an answer so i can accept – codyc4321 May 21 '17 at 18:48
  • the change was `
    `     – codyc4321 May 21 '17 at 18:48

1 Answers1

1

Make sure the parent container of the map has explicit height and width sizes. The map is there it just won't show without these changes.

KA01
  • 4,191
  • 3
  • 19
  • 26