Using React JS in Meteor 1.5

Question: Need a way to add Marker using react-google-maps

Using ES6 and in JSX format

Followed the documentation and was able to get the map embedded in, but not able to add the marker.

Here is my code:

const InitialMap = withGoogleMap(props => {
  var index = this.marker.index || [];

  return(
    <GoogleMap
      ref={props.onMapLoad}
      defaultZoom={14}
      defaultCenter={{lat: 40.6944, lng:-73.9213}}
      >
        <Marker
          key={index}
          position={marker.position}
          onClick={() => props.onMarkerClick(marker)}
        />
      </GoogleMap>
  )
});

export default class MapContainer extends Component{
  constructor(props){
    this.state = {
      markers:[{
        position:{
          lat: 255.0112183,
          lng:121.52067570000001,
        }
      }]
    }
  }
  render(){
    return(
      <div style={{height:"100%"}}>
        <InitialMap
          containerElement={
            <div style={{height:"100%"}}/>
          }
          mapElement={
            <div style={{height:"100%"}} />
          }
          markers={this.state.markers} />
      </div>
    )
  }
}

Using React JS in Meteor 1.5

Question: Need a way to add Marker using react-google-maps

Using ES6 and in JSX format

Followed the documentation and was able to get the map embedded in, but not able to add the marker.

Here is my code:

const InitialMap = withGoogleMap(props => {
  var index = this.marker.index || [];

  return(
    <GoogleMap
      ref={props.onMapLoad}
      defaultZoom={14}
      defaultCenter={{lat: 40.6944, lng:-73.9213}}
      >
        <Marker
          key={index}
          position={marker.position}
          onClick={() => props.onMarkerClick(marker)}
        />
      </GoogleMap>
  )
});

export default class MapContainer extends Component{
  constructor(props){
    this.state = {
      markers:[{
        position:{
          lat: 255.0112183,
          lng:121.52067570000001,
        }
      }]
    }
  }
  render(){
    return(
      <div style={{height:"100%"}}>
        <InitialMap
          containerElement={
            <div style={{height:"100%"}}/>
          }
          mapElement={
            <div style={{height:"100%"}} />
          }
          markers={this.state.markers} />
      </div>
    )
  }
}

• javascript
• google-maps
• reactjs
• google-maps-api-3
• google-maps-markers

• 1 Anyone with the same problem, please follow the demo provided by the creator. – Dhaval Jardosh Commented Jun 15, 2017 at 13:35

2 Answers 2

Added the first constant

const GettingStartedGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapLoad}
    zoom={13}
    center={{ lat: 21.178574, lng: 72.814149 }}
    onClick={props.onMapClick}
  >
    {props.markers.map(marker => (
      <Marker
        {...marker}
        onRightClick={() => props.onMarkerRightClick(marker)}
      />
    ))}
  </GoogleMap>

Changed the containerElement size and mapElement size to pixels instead of percentage

  containerElement={
    <div style={{ height: `150px` }} />
  }
  mapElement={
    <div style={{ height: `150px` }} />
  }

And just adding marker to the function which was called

markers={this.state.markers}

I'd check over your lat, lng coordinates again. From google explaining coordinates

"Check that the first number in your latitude coordinate is between -90 and 90."

Also any other error info would be helpful getting an answer for you.