1

I'm using React Meteor 1.3 and this google maps package. https://github.com/dburles/meteor-google-maps-react-example.

I can successfully render the map to a single page App, however as soon as I add routing to the mix - things stop working. Specifically when I move the element from an index html template to a JSX component that renders to the page - it breaks. I'm at a bit of a loss here and as the problem is quite vague (in my mind at least) I can't find an answer on google.

What's happening here? Does anyone have an example of this package working with flowrouter?

My current working set up looks like this.

Map.jsx

import React from 'react';
import ReactDOM from 'react-dom';

MyTestMap = React.createClass({
  mixins: [ReactMeteorData],
  componentDidMount() {
    GoogleMaps.load();
  },
  getMeteorData() {
    return {
      loaded: GoogleMaps.loaded(),
      mapOptions: GoogleMaps.loaded() && this._mapOptions()
    };
  },
  _mapOptions() {
    return {
      center: new google.maps.LatLng(-37.8136, 144.9631),
      zoom: 8
    };
  },
  render() {
    if (this.data.loaded)
      return <GoogleMap name="mymap" options={this.data.mapOptions} />;

    return <div>Loading map...</div>;
  }
});

GoogleMap = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    options: React.PropTypes.object.isRequired
  },
  componentDidMount() {
    GoogleMaps.create({
      name: this.props.name,
      element: ReactDOM.findDOMNode(this),
      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  id="mapId" className="map-container"></div>
)
  }
});

if (Meteor.isClient) {
  Meteor.startup(function() {
    return ReactDOM.render(<MyTestMap />, document.getElementById('root'));
  });
}

And then I render this to an Index.html file - however this means that the map is on every page.

<head>
  <title>googlemaps-react</title>
</head>

<body>
  <div id="root"></div>
</body>

Thanks

ElJefeJames
  • 295
  • 3
  • 16
  • Could you possibly post a github link to your project? Maybe paste code up in here to show what you're working with. Without doing so, I fear you risk getting this question down-voted by the stackOverflow *"nay sayers"*. Without seeing some code I won't be able to help point you in the right direction. – Jeremy Iglehart Jun 29 '16 at 06:06
  • thanks for the tip! – ElJefeJames Jun 29 '16 at 10:19
  • Yah, no worries. [I'm sure you have read this](http://stackoverflow.com/help/how-to-ask), but if in case you haven't - it's a good read. [I was doing it wrong until I figure this out](http://stackoverflow.com/q/37887038/484732). It's better to ask short and simple questions, as if you're speaking to a child on StackOverflow - or people get pissy. Other sites are more conversational and your questions would be perfectly formatted there. Sometimes adding code and such is not enough, literally HOW you ask a question effects the response you get from this site greatly. – Jeremy Iglehart Jun 29 '16 at 15:03

0 Answers0