Closed klegeron closed 7 years ago
Hi,
I try this example https://github.com/dburles/meteor-google-maps-react-example/blob/master/googlemaps-react.jsx with https://github.com/studiointeract/tracker-component
it's partially working, but no map and marker (however I see that map div changes in html from empty div). May you pls help?
export default class Map extends Tracker.Component { constructor(props){ super(props); this.autorun(() => { this.setState({ loaded: GoogleMaps.loaded(), mapOptions: GoogleMaps.loaded() && this._mapOptions() }) }) } componentDidMount(){ GoogleMaps.load({ v: '3', key: '', libraries: 'geometry,places' }); } _mapOptions() { return { center: new google.maps.LatLng(-37.8136, 144.9631), zoom: 8 }; } render() { if (this.state.loaded) return <GoogleMap name="mymap" options={this.state.mapOptions} />; return <div>Loading map...</div>; } }; class GoogleMap extends Component{ constructor(props){ super(props); } componentDidMount() { GoogleMaps.create({ name: this.props.name, element: $('.map-container')[0], options: this.props.options }); GoogleMaps.ready(this.props.name, function(map) { var marker = new google.maps.Marker({ position: map.options.center, map: map.instance }); }); } componentWillUnmount() { if (GoogleMaps.maps[this.props.name]) { google.maps.event.clearInstanceListeners(GoogleMaps.maps[this.props.name].instance); delete GoogleMaps.maps[this.props.name]; } } render() { return <div className="map-container"></div>; } };
Don't use jquery $('.map-container')[0], use refs
$('.map-container')[0],
Thank you for you help. I see this map :-)
Hi,
I try this example https://github.com/dburles/meteor-google-maps-react-example/blob/master/googlemaps-react.jsx with https://github.com/studiointeract/tracker-component
it's partially working, but no map and marker (however I see that map div changes in html from empty div). May you pls help?