reactjs cant passing props to latitude and longitude (google map)

Question

i cannot passing this props to langitude and longitude from google map. i want to put them a value from api data.

error

heres the code

import { GoogleMap } from "react-google-maps";
import React from "react";

export default function Goomap(props) {
  return (
    <div>
      <GoogleMap
        defaultZoom={10}
        defaultCenter={{
          lat: props.result.location.coordinates.latitude,
          lng: props.result.location.coordinates.longitude
        }}
      />
    </div>
  );
}

import React from "react";
import { withScriptjs, withGoogleMap } from "react-google-maps";
import Goomap from "./goomap";
const WrappedMap = withScriptjs(withGoogleMap(Goomap));

class MapGoogle extends React.Component {
  render() {
    return (
      <div>
        <div style={{ width: "30vw", height: "100vh" }}>
          <WrappedMap
            googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${process.env.REACT_APP_GOOGLE_KEY}`}
            loadingElement={<div style={{ height: "100%" }} />}
            containerElement={<div style={{ height: "100%" }} />}
            mapElement={<div style={{ height: "100%" }} />}
          />
        </div>
      </div>
    );
  }
}

export default MapGoogle;


import React from "react";
import DataListItem from "../feature/datalist";
import Axios from "axios";
import MapGoogle from "./gmap";

class Data extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      results: [],
      loading: true
    };
  }

  componentDidMount() {
    Axios.get("https://randomuser.me/api/").then(res => {
      const results = res.data.results;
      this.setState({ results, loading: false });
      console.log(results);
    });
  }

  render() {
    const { results, loading } = this.state;

    if (loading) {
      return <div>loading...</div>;
    }
    if (!results) {
      return <div>data not found</div>;
    }

    return (
      <div>
        {results.map(result => {
          return (
            <div key={result.id}>
              <DataListItem result={result} />
              <MapGoogle result={result}></MapGoogle>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Data;

i cant passing props.result.location.coordinates.latitude and props.result.location.coordinates.longitude, but when i passing like props.result.phone, it works, and heres the code.

import React from "react";

export default function DataListItem(props) {
  return (
    <div>
      <div>
        {props.result.name.first} {props.result.name.last}
      </div>
      <div>Developer</div>
      <div>{props.result.phone}</div>
      <div>{props.result.email}</div>
      <div>
        {props.result.location.street} {props.result.location.city}
        {props.result.location.state} {props.result.location.postcode}
      </div>
      <div>{props.result.location.coordinates.latitude}</div>
      <div>{props.result.location.coordinates.longitude}</div>
      <img src={props.result.picture.large}></img>
    </div>
  );
}

thanks

Answer 1

That's because your result.location object isn't there. I'm not familiar with the react-google-maps library but from what I can tell, you are not passing props to Goomap .

Try:

// replace this line
const WrappedMap = withScriptjs(withGoogleMap(Goomap));
// with this
const WrappedMap = withScriptjs(withGoogleMap(props => <Goomap {...props}/>));

Also you will need to use parseFloat() method for your lat lng

 defaultCenter={{
       lat: parseFloat(props.result.location.coordinates.latitude),
       lng: parseFloat(props.result.location.coordinates.longitude)
     }}

Working example: https://codesandbox.io/s/intelligent-diffie-9d5b3