How to load google maps markers in a React Component

Question

I've found this post here with a similar issue, but it didn't help. Google Map Marker as Reactjs Component

In my database I have some Latitude and Longitude values stored. I retrieve these values in a model to display some data for the user. I am sending these values to a simple Google Maps Component I created following this tutorial https://tomchentw.github.io/react-google-maps/#introduction

The component receives "model" from "props", I get these values and set in two variables and try to send them to the google component.

The map simply does not load with these values I am sending. If I don't use "parseFloat" I get an error saying the values were not in a correct format.

import React from 'react'
import {withGoogleMap,
     withScriptjs,
     GoogleMap,
     Marker } from 'react-google-maps';
import { compose, withProps } from 'recompose'

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
 <GoogleMap
  defaultZoom={8}
  defaultCenter={{lat:parseFloat(props.lat),lng:parseFloat(props.long)}}
 >
  {props.isMarkerShown && <Marker position={{lat:-18.245630,lng:-45.222387}} 
 />}
 </GoogleMap>
))

export default class extends React.Component {
  constructor(props) {
  super(props)
  this.state = {
   isMarkerShown: false
 }
}
componentDidMount() {
 this.delayedShowMarker()
}
delayedShowMarker = () => {
 setTimeout(() => {
  this.setState({ isMarkerShown: true })
 }, 3000)
}
handleMarkerClick = () => {
  this.setState({ isMarkerShown: false })
  this.delayedShowMarker()
}
render() {
  let { model } = this.props;
  let lat = model.value.latitudeGeoreferencia
  let long = model.value.longitudeGeoreferencia
  return (
    <MyMapComponent
      isMarkerShown
      googleMapURL="https://maps.googleapis.com/maps/api/js?
      key=myKey.exp&libraries=geometry,drawing,places"
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `400px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      lat
      long
    />
  )
 }
}

Matt Pawley Matt Pawley · Accepted Answer · 2018-01-24T13:13:58

You aren't passing the props to MyMapComponent. If you just put the attribute name, it will receive true as the prop value. Try:

<MyMapComponent
    isMarkerShown={this.state.isMarkerShown}
    googleMapURL="https://maps.googleapis.com/maps/api/js?
    key=myKey.exp&libraries=geometry,drawing,places"
    loadingElement={<div style={{ height: `100%` }} />}
    containerElement={<div style={{ height: `400px` }} />}
    mapElement={<div style={{ height: `100%` }} />}
    lat={lat}
    long={long}
/>

How to load google maps markers in a React Component

1 Answers