How to pass data from a parent component or use axios here in the map function for react-google-maps library?

Question

I try to pass an array of the markers' coordinates and some other props from the index page (parent of the CardTransactionMapRGMs component) to the map function, so it can use the data to map the Markers. However, I can get the props in the CardTransactionMapRGMs, but I don't know how to get it in the Map function or how to reorganize it. Also I'm quite confused about this "const WrapperMap = withScriptjs(withGoogleMap(Map));" Thank you so much! Here's my code:

in index.js

<CardTransactionMapRGMs charges={this.state.charges} coordinates={this.state.coordinates} />

in CardTransactionMapRGMs.js

import React, { Component } from 'react';
import axios from 'axios';
import { GoogleMap, Marker, withScriptjs, withGoogleMap } from "react-google-maps";

import Constants from '../Constants';
import MapMarker from './MapMarker';



function Map() {

    return (
        <GoogleMap

            defaultZoom={10}
            defaultCenter={{ lat: 38.96, lng: -77.29 }}
        >
 //I want to use {props.coordinates.map(e)=> {
 // <Marker...>}}here

            <Marker position={{ lat: 38.96, lng: -77.29 }} />
        </GoogleMap>

    )
}



class CardTransactionMapRGMs extends Component {

    render() {

        const WrapperMap = withScriptjs(withGoogleMap(Map));
        return (
            <div>
                <WrapperMap
                    googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${Constants.GOOGLE_MAP_API_KEY}`}
                    loadingElement={<div style={{ height: '100%' }}></div>}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}


                />
            </div>
        );
    }
}

export default CardTransactionMapRGMs;

score 2 · Answer 1 · answered Aug 18 '19 at 17:07

You can just use your props in your Map functional component.

 function Map(props){
     return <GoogleMap
                  defaultZoom={10}
                  defaultCenter={{ lat: 38.96, lng: -77.29 }}>
               {props.coordinates.map(markerProps)=> <Marker {markerProps}>}
               <Marker position={{ lat: 38.96, lng: -77.29 }} />
            </GoogleMap>
           }

CardTransactionMapRGMs.js

class CardTransactionMapRGMs extends Component {
 render() {
    const WrapperMap = withScriptjs(withGoogleMap(Map));
    return (
        <div>
            <WrapperMap
                googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${Constants.GOOGLE_MAP_API_KEY}`}
                loadingElement={<div style={{ height: '100%' }}></div>}
                containerElement={<div style={{ height: `400px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
                coordinates={[{ lat: 38.96, lng: -77.29 }]}
            />
        </div>
    );
   }
}

How to pass data from a parent component or use axios here in the map function for react-google-maps library?

1 Answers1